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

總體情況


h5之前丛塌,存儲(chǔ)主要是用cookies。

  • cookies缺點(diǎn):有在請(qǐng)求頭上帶著數(shù)據(jù)畜疾,大小是4k之內(nèi)赴邻。主Domain污染。
  • 主要應(yīng)用:購(gòu)物車啡捶、客戶登錄
  • 對(duì)于IE瀏覽器有UserData姥敛,大小是64k,只有IE瀏覽器支持。

目標(biāo)

  • 解決4k的大小問題
  • 解決請(qǐng)求頭常帶存儲(chǔ)信息的問題
  • 解決關(guān)系型存儲(chǔ)的問題
  • 跨瀏覽器

1.本地存儲(chǔ)localstorage


存儲(chǔ)方式:

以鍵值對(duì)(Key-Value)的方式存儲(chǔ)瞎暑,永久存儲(chǔ)彤敛,永不失效,除非手動(dòng)刪除了赌。

大心:

每個(gè)域名5M

支持情況:

注意:IE9 localStorage不支持本地文件,需要將項(xiàng)目署到服務(wù)器勿她,才可以支持袄秩!

檢測(cè)方法:

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

常用的API:

getItem//取記錄

setIten//設(shè)置記錄

removeItem//移除記錄

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

clear//清除記錄

存儲(chǔ)的內(nèi)容

數(shù)組,圖片逢并,json之剧,樣式,腳本砍聊。背稼。。(只要是能序列化成字符串的內(nèi)容都可以存儲(chǔ))

2.本地存儲(chǔ)sessionstorage


HTML5 的本地存儲(chǔ) API 中的 localStorage 與 sessionStorage 在使用方法上是相同的辩恼,區(qū)別在于 sessionStorage 在關(guān)閉頁面后即被清空雇庙,而 localStorage 則會(huì)一直保存。

3.離線緩存(application cache)


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

使用方法

配置manifest文件

頁面上:

 <!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ù)器的連接,且不會(huì)被緩存

FALLBACK – 在此標(biāo)題下列出的文件規(guī)定當(dāng)頁面無法訪問時(shí)的回退頁面(比如 404 頁面)

完整demo

 CACHE MANIFEST
 # 2016-07-24 v1.0.0
 /theme.css
 /main.js

 NETWORK:
 login.jsp

 FALLBACK:
 /html/ /offline.html

服務(wù)器上

manifest文件需要配置正確的MIME-type聘萨,即 “text/cache-manifest”竹椒。

如Tomcat:

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

常用API

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

0(UNCACHED) : 無緩存胸完, 即沒有與頁面相關(guān)的應(yīng)用緩存

1(IDLE) : 閑置,即應(yīng)用緩存未得到更新

2 (CHECKING) : 檢查中翘贮,即正在下載描述文件并檢查更新

3 (DOWNLOADING) : 下載中赊窥,即應(yīng)用緩存正在下載描述文件中指定的資源

4 (UPDATEREADY) : 更新完成,所有資源都已下載完畢

5 (IDLE) : 廢棄狸页,即應(yīng)用緩存的描述文件已經(jīng)不存在了锨能,因此頁面無法再訪問應(yīng)用緩存

相關(guān)的事件

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

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

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

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

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

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

updateready : 在頁面新的應(yīng)用緩存下載完畢觸發(fā)

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

Application Cache的三個(gè)優(yōu)勢(shì)

離線瀏覽

提升頁面載入速度

降低服務(wù)器壓力

注意事項(xiàng)

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

  2. 如果manifest文件,或者內(nèi)部列舉的某一個(gè)文件不能正常下載芍耘,整個(gè)更新過程將視為失敗址遇,瀏覽器繼續(xù)全部使用老的緩存

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

  4. 瀏覽器會(huì)自動(dòng)緩存引用manifest文件的HTML文件斋竞,這就導(dǎo)致如果改了HTML內(nèi)容倔约,也需要更新版本才能做到更新。

  5. manifest文件中CACHE則與NETWORK坝初,F(xiàn)ALLBACK的位置順序沒有關(guān)系浸剩,如果是隱式聲明需要在最前面

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

  7. 更新完版本后,必須刷新一次才會(huì)啟動(dòng)新版本(會(huì)出現(xiàn)重刷一次頁面的情況)脖卖,需要添加監(jiān)聽版本事件乒省。

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

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

點(diǎn)我參考更多資料袖扛!

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

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

  2. 離線緩存斷網(wǎng)了還是可以打開頁面十籍,瀏覽器緩存不行

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

4.Web SQL


關(guān)系數(shù)據(jù)庫(kù)蛆封,通過SQL語句訪問

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

支持情況

Web SQL 數(shù)據(jù)庫(kù)可以在最新版的 Safari, Chrome 和 Opera 瀏覽器中工作。

核心方法

①openDatabase:這個(gè)方法使用現(xiàn)有的數(shù)據(jù)庫(kù)或者新建的數(shù)據(jù)庫(kù)創(chuàng)建一個(gè)數(shù)據(jù)庫(kù)對(duì)象围俘。

②transaction:這個(gè)方法讓我們能夠控制一個(gè)事務(wù)砸讳,以及基于這種情況執(zhí)行提交或者回滾琢融。

③executeSql:這個(gè)方法用于執(zhí)行實(shí)際的 SQL 查詢。

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

var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024,fn);
//openDatabase() 方法對(duì)應(yīng)的五個(gè)參數(shù)分別為:數(shù)據(jù)庫(kù)名稱簿寂、版本號(hào)漾抬、描述文本、數(shù)據(jù)庫(kù)大小常遂、創(chuàng)建回調(diào)

執(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")');
 });

讀取數(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);
 });

由這些操作可以看出纳令,基本上都是用SQL語句進(jìn)行數(shù)據(jù)庫(kù)的相關(guān)操作,如果你會(huì)MySQL的話克胳,這個(gè)應(yīng)該比較容易用平绩。

點(diǎn)我看更多教程!

5.IndexedDB


索引數(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)的模式,比如打開數(shù)據(jù)庫(kù)的操作

這樣砚作,我們打開數(shù)據(jù)庫(kù)的時(shí)候窘奏,實(shí)質(zhì)上返回了一個(gè)DB對(duì)象,而這個(gè)對(duì)象就在result中葫录。由上圖可以看出着裹,除了result之外。還有幾個(gè)重要的屬性就是onerror米同、onsuccess骇扇、onupgradeneeded(我們請(qǐng)求打開的數(shù)據(jù)庫(kù)的版本號(hào)和已經(jīng)存在的數(shù)據(jù)庫(kù)版本號(hào)不一致的時(shí)候調(diào)用)。這就類似于我們的ajax請(qǐng)求那樣面粮。我們發(fā)起了這個(gè)請(qǐng)求之后并不能確定它什么時(shí)候才請(qǐng)求成功少孝,所以需要在回調(diào)中處理一些邏輯。

關(guān)閉與刪除

  function closeDB(db){
       db.close();
  }
  function deleteDB(name){
       indexedDB.deleteDatabase(name);
  }

數(shù)據(jù)存儲(chǔ)

indexedDB中沒有表的概念熬苍,而是objectStore稍走,一個(gè)數(shù)據(jù)庫(kù)中可以包含多個(gè)objectStore,objectStore是一個(gè)靈活的數(shù)據(jù)結(jié)構(gòu)柴底,可以存放多種類型數(shù)據(jù)婿脸。也就是說一個(gè)objectStore相當(dāng)于一張表,里面存儲(chǔ)的每條數(shù)據(jù)和一個(gè)鍵相關(guān)聯(lián)柄驻。

我們可以使用每條記錄中的某個(gè)指定字段作為鍵值(keyPath)狐树,也可以使用自動(dòng)生成的遞增數(shù)字作為鍵值(keyGenerator),也可以不指定鸿脓。選擇鍵的類型不同抑钟,objectStore可以存儲(chǔ)的數(shù)據(jù)結(jié)構(gòu)也有差異涯曲。

這個(gè)就有點(diǎn)復(fù)雜了≡谒看這里的教程:

1.http://www.cnblogs.com/dolphinX/p/3415761.html
 
2.http://www.cnblogs.com/dolphinX/p/3416889.html

詳細(xì)API地址http://www.ibm.com/developerworks/cn/web/wa-indexeddb/#ibm-pcon


轉(zhuǎn)自:http://www.cnblogs.com/LuckyWinty/p/5699117.html

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末掀抹,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子心俗,更是在濱河造成了極大的恐慌,老刑警劉巖蓉驹,帶你破解...
    沈念sama閱讀 218,036評(píng)論 6 506
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件城榛,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡态兴,警方通過查閱死者的電腦和手機(jī)狠持,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,046評(píng)論 3 395
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來瞻润,“玉大人喘垂,你說我怎么就攤上這事∩茏玻” “怎么了正勒?”我有些...
    開封第一講書人閱讀 164,411評(píng)論 0 354
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)傻铣。 經(jīng)常有香客問我章贞,道長(zhǎng),這世上最難降的妖魔是什么非洲? 我笑而不...
    開封第一講書人閱讀 58,622評(píng)論 1 293
  • 正文 為了忘掉前任鸭限,我火速辦了婚禮,結(jié)果婚禮上两踏,老公的妹妹穿的比我還像新娘败京。我一直安慰自己,他們只是感情好梦染,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,661評(píng)論 6 392
  • 文/花漫 我一把揭開白布赡麦。 她就那樣靜靜地躺著,像睡著了一般帕识。 火紅的嫁衣襯著肌膚如雪隧甚。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,521評(píng)論 1 304
  • 那天渡冻,我揣著相機(jī)與錄音戚扳,去河邊找鬼。 笑死族吻,一個(gè)胖子當(dāng)著我的面吹牛帽借,可吹牛的內(nèi)容都是我干的珠增。 我是一名探鬼主播,決...
    沈念sama閱讀 40,288評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼砍艾,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼蒂教!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起脆荷,我...
    開封第一講書人閱讀 39,200評(píng)論 0 276
  • 序言:老撾萬榮一對(duì)情侶失蹤凝垛,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后蜓谋,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體梦皮,經(jīng)...
    沈念sama閱讀 45,644評(píng)論 1 314
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,837評(píng)論 3 336
  • 正文 我和宋清朗相戀三年桃焕,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了剑肯。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 39,953評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡观堂,死狀恐怖让网,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情师痕,我是刑警寧澤溃睹,帶...
    沈念sama閱讀 35,673評(píng)論 5 346
  • 正文 年R本政府宣布,位于F島的核電站胰坟,受9級(jí)特大地震影響丸凭,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜腕铸,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,281評(píng)論 3 329
  • 文/蒙蒙 一惜犀、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧狠裹,春花似錦虽界、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,889評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至俗冻,卻和暖如春礁叔,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背迄薄。 一陣腳步聲響...
    開封第一講書人閱讀 33,011評(píng)論 1 269
  • 我被黑心中介騙來泰國(guó)打工琅关, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人讥蔽。 一個(gè)月前我還...
    沈念sama閱讀 48,119評(píng)論 3 370
  • 正文 我出身青樓涣易,卻偏偏與公主長(zhǎng)得像画机,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子新症,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,901評(píng)論 2 355

推薦閱讀更多精彩內(nèi)容