站長(zhǎng)資訊網(wǎng)
html5的兩種存儲(chǔ)方法是：1、application cache（應(yīng)用緩存），web應(yīng)用可以進(jìn)行緩存，即使在沒(méi)有網(wǎng)絡(luò)的情況下也能使用；2、本地存儲(chǔ)（localStorage或sessionStorage），可以在客戶(hù)端存儲(chǔ)數(shù)據(jù)。
本教程操作環(huán)境：windows7系統(tǒng)、HTML5版、Dell G3電腦。
1.Application Cache
HTML5引入應(yīng)用緩存，意味著web應(yīng)用可以進(jìn)行緩存，即使在沒(méi)有網(wǎng)絡(luò)的情況下也能使用。
application cache有三個(gè)特點(diǎn)
- 離線瀏覽
- 已緩存的資源加載速度更快
- 減少服務(wù)器負(fù)載，瀏覽器將只從服務(wù)器下載更新過(guò)或更改過(guò)的資源
使用方法就是在 html標(biāo)簽中添加一個(gè)manifest屬性
每個(gè)指定了 manifest 的頁(yè)面在用戶(hù)對(duì)其訪問(wèn)時(shí)都會(huì)被緩存。如果未指定 manifest 屬性，則頁(yè)面不會(huì)被緩存（除非在 manifest 文件中直接指定了該頁(yè)面）。
manifest 文件的建議的文件擴(kuò)展名是：".appcache"。
<!DOCTYPE HTML> <html manifest="demo.appcache"> <body> The content of the document...... </body> </html>
manifest 文件是簡(jiǎn)單的文本文件，它告知瀏覽器被緩存的內(nèi)容（以及不緩存的內(nèi)容）。
manifest 文件可分為三個(gè)部分：
- CACHE MANIFEST – 在此標(biāo)題下列出的文件將在首次下載后進(jìn)行緩存
- NETWORK – 在此標(biāo)題下列出的文件需要與服務(wù)器的連接，且不會(huì)被緩存
- FALLBACK – 在此標(biāo)題下列出的文件規(guī)定當(dāng)頁(yè)面無(wú)法訪問(wèn)時(shí)的回退頁(yè)面（比如 404 頁(yè)面）
一個(gè)完整的manifest文件
CACHE MANIFEST # 2012-02-21 v1.0.0 /theme.css /logo.gif /main.js NETWORK: login.asp FALLBACK: /html5/ /404.html
2.本地存儲(chǔ)
HTML5 提供了兩種在客戶(hù)端存儲(chǔ)數(shù)據(jù)的新方法：
- localStorage – 沒(méi)有時(shí)間限制的數(shù)據(jù)存儲(chǔ)
- sessionStorage – 針對(duì)一個(gè) session 的數(shù)據(jù)存儲(chǔ)
之前，這些都是由 cookie 完成的。但是 cookie 不適合大量數(shù)據(jù)的存儲(chǔ)，因?yàn)樗鼈冇擅總€(gè)對(duì)服務(wù)器的請(qǐng)求來(lái)傳遞，這使得 cookie 速度很慢而且效率也不高。
localStorage和sessionStorage都具有相同的操作方法，例如setItem()、getItem()和removeItem()等
localStorage和sessionStorage的方法：
setItem存儲(chǔ)value
用途：將value存儲(chǔ)到key字段
用法：.setItem( key, value)
代碼示例：
sessionStorage.setItem("key", "value"); localStorage.setItem("site", "js8.in");
getItem獲取value
用途：獲取指定key本地存儲(chǔ)的值
用法：.getItem(key)
代碼示例：
var value = sessionStorage.getItem("key"); var site = localStorage.getItem("site");
removeItem刪除key
用途：刪除指定key本地存儲(chǔ)的值
用法：.removeItem(key)
代碼示例：
sessionStorage.removeItem("key"); localStorage.removeItem("site");
clear清除所有的key/value
用途：清除所有的key/value
用法：.clear()
sessionStorage不是一種持久化存儲(chǔ)，瀏覽器關(guān)閉之后會(huì)隨之清除。而localStorage用于持久化的本地存儲(chǔ)，除非主動(dòng)刪除數(shù)據(jù)，否則數(shù)據(jù)是永遠(yuǎn)不會(huì)過(guò)期的。
