html5有哪些類型的儲存方式-前端問答-PHP中文網

首頁

web前端

前端問答

html5有哪些類型的儲存方式

青灯夜游

Mar 15, 2022 pm 02:51 PM

html5儲存類型

html5的儲存類型：1、本地儲存“localstorage”，適用於長期儲存資料；2、本地儲存“sessionstorage”，儲存的資料在瀏覽器關閉後自動刪除；3、離線快取“application cache”，本地快取應用所需的檔案。

html5有哪些類型的儲存方式

本教學操作環境：windows7系統、HTML5版、Dell G3電腦。

h5之前，儲存主要是用cookies。 cookies缺點有在請求頭上帶著數據，大小是4k之內。主Domain污染。

主要應用程式：購物車、客戶登入

對於IE瀏覽器有UserData，大小是64k,只有IE瀏覽器支援。

HTML5 提供了兩種在客戶端儲存資料的新方法：

sessionStorage - 針對一個session 的數據儲存

1.本地儲存localstorage

localStorage 方法儲存的資料沒有時間限制。第二天、第二週或下一年之後，數據仍然可用。

localStorage：適用於長期儲存數據，瀏覽器關閉後資料不遺失；

#儲存方式：##以鍵值對(Key- Value)的方式存儲，永久存儲，永不失效，除非手動刪除。

大小：

每個網域5M

#支援情況：

注意：IE9 localStorage不支援本地文件，需要將專案署到伺服器，才可以支援！

檢測方法：

if(window.localStorage){
 alert(&#39;This browser supports localStorage&#39;);
}else{
 alert(&#39;This browser does NOT support localStorage&#39;);
}

常用的API：

##getItem //取記錄

setIten//設定記錄
#removeItem//移除記錄
key//取key所對應的值
clear//清除記錄

儲存的內容：

數組，圖片，json，樣式，腳本。。。（只要是能序列化成字串的內容都可以儲存）

2.本機儲存sessionstorage

HTML5 的本機儲存API 中的localStorage 與sessionStorage 在使用方法上是相同的，差別在於sessionStorage 在關閉頁面後即被清空，而localStorage 則會一直儲存。

3.離線快取（application cache）

HTML5引入了應用程式快取器，可對web進行緩存，在沒有網路形況下使用，透過建立cache manifest文件，建立應用快取.

本機快取應用程式所需的檔案

使用方法：

#①設定manifest檔

頁面上：

<!DOCTYPE HTML>
<html manifest="demo.appcache">
...
</html>

Manifest 文件：

manifest 文件是簡單的文字文件，它告知瀏覽器被快取的內容（以及不快取的內容）。

manifest 檔案可分為三個部分：

①

CACHE MANIFEST

- 在此標題下列出的檔案將在首次下載後進行快取

#②NETWORK

- 在此標題下列出的文件需要與伺服器的連接，且不會被快取

③FALLBACK

- 在此標題下列出的文件規定當頁面無法存取時的回退頁面（例如404 頁面）

完整demo：

CACHE MANIFEST
# 2016-07-24 v1.0.0
/theme.css
/main.js
 
NETWORK:
login.jsp
 
FALLBACK:
/html/ /offline.html

伺服器上：

manifest檔案需要配置正確的MIME-type，即"text/cache-manifest"。

如Tomcat:

<mime-mapping>
     <extension>manifest</extension>
     <mime-type>text/cache-manifest</mime-type>
</mime-mapping>

常用API：

核心是applicationCache對象，有個status屬性，表示應用快取的目前狀態：

0（UNCACHED） : 無緩存，即沒有與頁面相關的應用快取

1（IDLE） : 閒置，即應用快取未更新

2 （ CHECKING） : 檢查中，即正在下載描述檔並檢查更新

3 （DOWNLOADING） : 下載中，即應用快取正在下載描述檔中指定的資源

4 （UPDATEREADY） :更新完成，所有資源都已下載完畢

5 （IDLE） : 廢棄，即應用快取的描述檔已經不存在了，因此頁面無法再存取應用快取

相關的事件：

表示應用快取狀態的改變：

checking : 在瀏覽器為應用程式快取尋找更新時觸發

error : 在檢查更新或下載資源期間發送錯誤時觸發

noupdate : 在檢查描述文件發現文件無變化時觸發

downloading : 在開始下載應用快取資源時觸發

progress：在文件下載應用程式快取的過程中持續下載地觸發

updateready : 在頁面新的應用程式快取下載完成觸發

cached : 在應用快取完整可用時觸發

Application Cache的三個優點：

① 離線瀏覽

② 提升頁面載入速度

③ 降低伺服器壓力

注意事項：

1. 瀏覽器對快取資料的容量限制可能不太一樣（某些瀏覽器設定的限制是每個網站5MB）
2 . 如果manifest文件，或內部列舉的某一個文件不能正常下載，整個更新過程將視為失敗，瀏覽器繼續全部使用老的緩存
3. 引用manifest的html必須與manifest文件同源，在同一個網域下
4. 瀏覽器會自動快取引用manifest文件的HTML文件，這就導致如果改了HTML內容，也需要更新版本才能做到更新。
5. manifest檔案中CACHE則與NETWORK，FALLBACK的位置順序沒有關係，如果是隱含宣告需要在最前面
6. FALLBACK中的資源必須和manifest檔同源
7. 更新完版本後，必須刷新一次才會啟動新版本（會出現重刷一次頁面的狀況），需要新增監聽版本事件。
8. 網站中的其他頁面即使沒有設定manifest屬性，請求的資源如果在快取中也從快取中存取
9. 當manifest檔案改變時，資源請求本身也會觸發更新

離線快取與傳統瀏覽器快取區別：

1. 離線快取是針對整個應用，瀏覽器快取是單一檔案

2. 離線快取斷網路了還是可以開啟頁面，瀏覽器快取不行

3. 離線快取可以主動通知瀏覽器更新資源

相關推薦：《html影片教學》

以上是html5有哪些類型的儲存方式的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

html5的div一行可以放两个吗Apr 25, 2022 pm 05:32 PM

html5的div元素默认一行不可以放两个。div是一个块级元素，一个元素会独占一行，两个div默认无法在同一行显示；但可以通过给div元素添加“display：inline;”样式，将其转为行内元素，就可以实现多个div在同一行显示了。

html5中列表和表格的区别是什么Apr 28, 2022 pm 01:58 PM

html5中列表和表格的区别：1、表格主要是用于显示数据的，而列表主要是用于给数据进行布局；2、表格是使用table标签配合tr、td、th等标签进行定义的，列表是利用li标签配合ol、ul等标签进行定义的。

html5怎么让头和尾固定不动Apr 25, 2022 pm 02:30 PM

固定方法：1、使用header标签定义文档头部内容，并添加“position:fixed;top:0;”样式让其固定不动；2、使用footer标签定义尾部内容，并添加“position: fixed;bottom: 0;”样式让其固定不动。

html5中不支持的标签有哪些Mar 17, 2022 pm 05:43 PM

html5中不支持的标签有：1、acronym，用于定义首字母缩写，可用abbr替代；2、basefont，可利用css样式替代；3、applet，可用object替代；4、dir，定义目录列表，可用ul替代；5、big，定义大号文本等等。

HTML5中画布标签是什么May 18, 2022 pm 04:55 PM

HTML5中画布标签是“<canvas>”。canvas标签用于图形的绘制，它只是一个矩形的图形容器，绘制图形必须通过脚本（通常是JavaScript）来完成；开发者可利用多种js方法来在canvas中绘制路径、盒、圆、字符以及添加图像等。

html5废弃了哪个列表标签Jun 01, 2022 pm 06:32 PM

html5废弃了dir列表标签。dir标签被用来定义目录列表，一般和li标签配合使用，在dir标签对中通过li标签来设置列表项，语法“<dir><li>列表项值</li>...</dir>”。HTML5已经不支持dir，可使用ul标签取代。

Html5怎么取消td边框May 18, 2022 pm 06:57 PM

3种取消方法：1、给td元素添加“border:none”无边框样式即可，语法“td{border:none}”。2、给td元素添加“border:0”样式，语法“td{border:0;}”，将td边框的宽度设置为0即可。3、给td元素添加“border:transparent”样式，语法“td{border:transparent;}”，将td边框的颜色设置为透明即可。