html' target='_blank'>Cookies的野蠻生長(zhǎng)

本地存儲(chǔ)localstorage

本地存儲(chǔ)sessionstorage

離線緩存（application cache）

Web SQL

IndexedDB

在HTML5出現(xiàn)之前，Cookies便占據(jù)了客戶端存儲(chǔ)的整個(gè)江山，就像是蠻荒時(shí)代的野蠻生長(zhǎng)，cookies很好、快速地滿足實(shí)際應(yīng)用的需求。但是它的問(wèn)題也很明顯，cookies會(huì)在請(qǐng)求頭上帶著數(shù)據(jù)，而且大小限制在4K以內(nèi)，這是非常不安全的，容易被外部截取，還存在domain污染。

IE瀏覽器特別喜歡搞自己的一套，對(duì)于增加存儲(chǔ)容量加入了UserData，大小是64K，但是其他瀏覽器不喜歡跟它玩，也就只有它自己一家支持。

那么，重點(diǎn)來(lái)了。既然cookies問(wèn)題那么多，就要想辦法解決，不然沒(méi)法繼續(xù)往前發(fā)展。首先要確認(rèn)它的問(wèn)題有哪些，然后根據(jù)這些問(wèn)題尋找解決方案。

解決4K存儲(chǔ)容量問(wèn)題

解決請(qǐng)求頭帶有存儲(chǔ)信息的問(wèn)題，也就是增加安全性，通過(guò)加密通道或方式進(jìn)行數(shù)據(jù)存儲(chǔ)和傳輸

解決關(guān)系型存儲(chǔ)的問(wèn)題

跨瀏覽器

存儲(chǔ)方式

以鍵值對(duì)（key-value）的方式存儲(chǔ)，永久存儲(chǔ)，永不失效，除非手動(dòng)刪除。

存儲(chǔ)容量

每個(gè)域名5M。

常用的API

getItem //取記錄

setItem //設(shè)置記錄

removeItem //移除記錄

key //取key所對(duì)應(yīng)的值

clear //清除記錄

HTML5的本地存儲(chǔ)API中的localstorage與sessionstorage在使用方法上是相同的，區(qū)別在于sessionstorage在關(guān)閉頁(yè)面后即被清空，而localstorage則會(huì)一直保存，除非手動(dòng)刪除。

本地緩存應(yīng)用所需的文件

使用方法

1、配置manifest文件

頁(yè)面上：

 !DOCTYPE HTML  html manifest= demo.appcache  /html 

manifest文件：

manifest是最簡(jiǎn)單的文本文件，它告知瀏覽器被緩存的內(nèi)容（以及不緩存的內(nèi)容）。

manifest文件分為三個(gè)部分：

CACHE MANIFEST-在此標(biāo)題下列出的文件將在首次下載后進(jìn)行緩存

NETWOrK-在此標(biāo)題下的文件需要與服務(wù)器進(jìn)行連接，且不會(huì)被緩存

FALLBACK-在此標(biāo)題下的文件規(guī)定當(dāng)頁(yè)面無(wú)法被訪問(wèn)時(shí)的回退頁(yè)面（比如404頁(yè)面）

完整demo

CACHE MANIFEST# 2016-07-24 v1.0.0/theme.css/main.jsNETWORK:login.jspFALLBACK:/html/ /offline.html

服務(wù)器上：manifest文件需要配置正確的MIME-type，即text/cache-manifest。

常用API

核心是applicationCache對(duì)象，有個(gè)status屬性，表示應(yīng)用緩存的當(dāng)前狀態(tài)：

0 （UNCACHED）：無(wú)緩存，沒(méi)有和頁(yè)面相關(guān)的應(yīng)用緩存

1 （IDLE）：閑置，應(yīng)用緩存沒(méi)有得到更新

2 （CHECKING）：檢查中，正在下載描述文件并檢查更新

3 （DOWNLOADING）：下載中，應(yīng)用緩存正在下載與描述文件中指定的資源

4 （UPDATEREADY）：更新完成，所有資源都已經(jīng)下載完畢

5 （IDLE）：廢棄，應(yīng)用緩存的描述文件已經(jīng)不存在了，因此頁(yè)面無(wú)法再訪問(wèn)應(yīng)用緩存

相關(guān)事件

表示應(yīng)用緩存狀態(tài)的改變：

checking：在瀏覽器為應(yīng)用緩存查找更新時(shí)觸發(fā)

error：在檢查更新或下載資源期間發(fā)生錯(cuò)誤時(shí)觸發(fā)

noupdate：在檢查描述文件發(fā)現(xiàn)文件無(wú)變化時(shí)觸發(fā)

downloading：在開(kāi)始下載應(yīng)用緩存資源時(shí)觸發(fā)

progress：在文件下載應(yīng)用緩存的過(guò)程中持續(xù)不斷地下載時(shí)觸發(fā)

updateready：在頁(yè)面新的應(yīng)用緩存下載完畢時(shí)觸發(fā)

cached：在應(yīng)用緩存完整可用時(shí)觸發(fā)

application cache的三個(gè)優(yōu)勢(shì)：

離線瀏覽

提升頁(yè)面載入速度

降低服務(wù)器壓力

注意事項(xiàng)：

瀏覽器對(duì)緩存數(shù)據(jù)的容量限制可能不太一樣（某些瀏覽器設(shè)置的限制是每個(gè)站點(diǎn)5M）

如果是manifest文件，或者內(nèi)部列舉的某一個(gè)文件不能正常下載，整個(gè)更新過(guò)程將視為失敗，瀏覽器繼續(xù)全部使用舊的緩存

引用manifest的html必須與manifest文件同源，在同一個(gè)域下

瀏覽器會(huì)自動(dòng)緩存引用manifest文件的html文件，這就導(dǎo)致了如果更改了html內(nèi)容，也需要更新版本才能做到最新

manifest文件中的CACHE與NETWOrK、FALLBACK的位置順序沒(méi)有關(guān)系，如果是隱式聲明需要在最前面

FALLBACK中的資源必須和manifest文件同源

更新完版本后，必須刷新一次才會(huì)啟動(dòng)新版本（會(huì)出現(xiàn)重刷一次頁(yè)面的情況），需要添加監(jiān)聽(tīng)版本事件

站點(diǎn)中的其他頁(yè)面即使沒(méi)有設(shè)置manifest屬性，請(qǐng)求的資源如果在緩存中也從緩存中訪問(wèn)

當(dāng)manifest文件發(fā)生改變時(shí)，資源請(qǐng)求本身也會(huì)觸發(fā)更新

離線緩存和傳統(tǒng)瀏覽器緩存的區(qū)別

離線緩存是針對(duì)整個(gè)應(yīng)用，瀏覽器緩存是單個(gè)文件

離線緩存可以主動(dòng)通知瀏覽器更新資源

Web SQL數(shù)據(jù)庫(kù)API并不是HTML5規(guī)范的一部分，但它是一個(gè)獨(dú)立的規(guī)范，引入了一組使用SQL操作客戶端數(shù)據(jù)庫(kù)的APIs。

核心方法

openDatabase：使用現(xiàn)有的數(shù)據(jù)庫(kù)或新建的數(shù)據(jù)庫(kù)創(chuàng)建一個(gè)數(shù)據(jù)庫(kù)對(duì)象

transaction： 控制一個(gè)事務(wù)，以及基于這種情況執(zhí)行提交或回滾

executeSql：用于執(zhí)行實(shí)際的SQL查詢

打開(kāi)數(shù)據(jù)庫(kù)

var db = openDatabase( mydb , 1.0 , TEST DB , 2 * 1024 * 1024, fn);

執(zhí)行查詢操作

var db = openDatabase( mydb , 1.0 , TEST DB , 2 * 1024 * 1024);db.transaction(function (tx) { tx.executeSql( CREATE TABLE IF NOT EXISTS WIN (id unique, name) })

插入數(shù)據(jù)

var db = openDatabase( mydb , 1.0 , Test DB , 2 * 1024 * 1024);db.transaction(function (tx) { tx.executeSql( CREATE TABLE IF NOT EXISTS WIN (id unique, name)  tx.executeSql( INSERT INTO WIN (id, name) VALUES (1, winty )  tx.executeSql( INSERT INTO WIN (id, name) VALUES (2, LuckyWinty ) });

var db = openDatabase( mydb , 1.0 , Test DB , 2 * 1024 * 1024);db.transaction(function (tx) { tx.executeSql( CREATE TABLE IF NOT EXISTS WIN (id unique, name)  tx.executeSql( INSERT INTO WIN (id, name) VALUES (1, winty )  tx.executeSql( INSERT INTO WIN (id, name) VALUES (2, LuckyWinty ) });

讀取數(shù)據(jù)

db.transaction(function (tx) { tx.executeSql( SELECT * FROM WIN , [], function (tx, results) { var len = results.rows.length, i; msg = p 查詢記錄條數(shù): + len + /p  document.querySelector( #status ).innerHTML += msg; for (i = 0; i len; i++){ alert(results.rows.item(i).name ); }, null);});

索引數(shù)據(jù)庫(kù)（IndexedDB）API（作為HTML5的一部分）對(duì)創(chuàng)建具有豐富本地存儲(chǔ)數(shù)據(jù)的數(shù)據(jù)密集型的離線HTML5 Web應(yīng)用程序很有用，同時(shí)它還有助于本地緩存數(shù)據(jù)，使傳統(tǒng)在線Web應(yīng)用程序（比如移動(dòng)Web應(yīng)用程序）能夠快速的運(yùn)行和響應(yīng)。

異步API

在IndexedDB大部分操作并不是我們常用的調(diào)用方法（返回結(jié)果的模式），而是（請(qǐng)求-響應(yīng)模式），比如打開(kāi)數(shù)據(jù)庫(kù)的操作。

相關(guān)推薦：

前端HTML5幾種存儲(chǔ)方式的總結(jié)

JavaScript中變量的存儲(chǔ)方式

在PHP中自定義session的存儲(chǔ)方式_PHP教程

以上就是HTML5存儲(chǔ)方式小結(jié)的詳細(xì)內(nèi)容，其它編程語(yǔ)言

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。