Web Storage實用指南

本文一共分為兩章。

第一章講web storage的使用，目標是讓大家看完第一章後基本能應對80%的使用場景。

第二章會講一些web storage的高階知識，包括一些標準，沒有太多看的必要，但是也會有點小用。

當乙個新的技術出現時（已經不新了=。=），我們都會想知道：這個技術的出現是為了解決什麼問題的？所以，web storage的出現又是為了解決什麼問題咧？

顧名思義，web storage的出現就是為了解決客戶端資料儲存問題的。那有人就問了，儲存不是有cookie, userdata, flash等等解決方案嗎？需要這個web storage嗎？

其實web storage的出現是為了克服cookie的一些限制，如果你的資料不需要服務端處理，只需要儲存在客戶端，根本就不需要持續的將資料發回伺服器（cookie會跟在每次http請求裡）。web storage的兩個主要目標是：

所以，雖然現在的技術方案確實能解決很多儲存問題，但是，既然出現了這麼個新的東西，肯定也是有它存在的意義的，我們不妨深入的了解和嘗試一下，說不定就會發現還是挺好用的。

目前的情況是cookie和localstorage用的比較多，我們也可以嘗試用sessionstorage做一些cookie現在做的事情。

既然要使用它，那我們首先要知道各大瀏覽器對它的支援情況，如果滿足業務需要，那我們就可以放心大膽的用了。

瀏覽器ie

firefox

chrome

safari

opera版本8

3.54

410.5

從上面的圖可以看出來，桌面瀏覽器只有ie7及以下不支援web storage。

瀏覽器andriod

ucsafari

opera mini

版本2.1

113.2

不支援移動端瀏覽器除了opera mini不支援外，其他都是支援的

綜合以上的資訊，web storage的相容性其實是很好的，基本可以放心大膽的用它了。（如果你的專案需要相容ie7及以下，可以考慮用userdata代替，本文不展開介紹web storage以外的知識）。

我們已經確定了web storage可用了，現在可以具體的講講它的使用。web storage有兩種實現，乙個是localstorage，乙個是sessionstorage。在講它們之前我們先解釋乙個概念：文件源。

文件源是通過協議，主機名，埠來確定的。如圖：

只要有任何一項不同，它們就是非同源文件，下面的每個url都有不同的文件源：

// 協議：http; 主機名：www.example.com // 不同協議 // 不同主機名 :8000 // 不同埠

localstorage是用來做永久性儲存的。

時效localstorage裡的資料的時效是永久的！只要你不刪，它就一直在那。除非web應用需要刪除或者使用者需要刪掉它。

作用域localstorage的作用域是限定在文件源級別的，

不同的文件源之間是不能讀取和修改對方的資料的，而相同的文件源是可以的。但是不同的瀏覽器是不共享storage的，也就是說你在chorme瀏覽器裡存的資料，在firefox裡是訪問不到的，即使它們是同一文件源。

sessionstorage是用來做臨時性儲存的。

時效sessionstorage的時效只存在於標籤頁存在的時間，一旦標籤被關閉了，sessionstorage儲存的資料也會被刪除掉。

作用域sessionstorage的作用域同樣是限定在文件源級別的，不僅如此，它還被限制在標籤頁中，不同標籤頁的同乙個頁面擁有各自的sessionstorage，資料不能共享。如果是乙個頁面裡有兩個元素，它們是共享sessionstorage的。

好，簡要的講完了web storage的特性之後呢，接下來該講講怎麼操作web storage了。

storage物件提供了操作key/value對（下面我們稱之為item）的方法，key和value都是string型別的值（包括空字串），如果存的不是字串，會在儲存前被轉換成字串，要小心哦！

length返回storage物件內item的數量，這是乙個唯讀屬性。

下面的**可以在chorme控制台裡給localstorage增加乙個判斷是否為空的方法

localstorage.__proto__.isempty = function isempty()

key(index)返回第n項的key。當index的值超出了length，返回null。

注意：存入storage物件內的item的排序順序由瀏覽器廠商自己決定，不一定是按照你存入的順序排序的哦,當你增加或者刪除item時，index對應的值可能會變化

下面的**可以遍歷localstorage裡的所有key

for (let i = 0, len = localstorage.length; i < len; i++)

返回對應key值的value，如果沒有，返回null。

localstorage.getitem('gameremainingtime');

setitem方法首先檢查要設定的item是否存在，如果不存在，在storage裡加入該item；如果存在，更新這個item的value。如果無法存入新item，該方法會丟擲quotaexceedeerrordomexception異常，不改變storage內的任何內容（表示storage已經存滿了，storage目前推薦的儲存容量上限為5m）

localstorage.setitem('gameremainingtime', '10');

removeitem方法會刪除指定的item，如果不存在指定的item，什麼都不做

localstorage.removeitem('gameremainingtime');

clear方法會清空storage裡的所有item，如果storage本來就是空的，什麼都不做

localstorage.clear();

當localstorage或者sessionstorage的資料發生變化的時候，瀏覽器都會在其他對該資料可見的視窗物件上觸發storage事件（本視窗除外）。

重要：只有當儲存資料真正發生變化時才會觸發儲存事件，比如給乙個item重新設定乙個和原來一樣的value，或者是刪除乙個不存在的item是不會觸發儲存事件的。

storageevent的幾個屬性：

window.addeventlistener('storage', function(e) , false);

這一章主要講一些不那麼重要，零碎的小知識點，可看可不看，有發現一些新東西會慢慢補充進來。

對於存在sessionstorage裡的資料，瀏覽器是不應該給它設定過期時間的，它有自己的生命週期。除非使用者要求刪掉資料，或者儲存空間不足，或者處於完全原因。

現在有些瀏覽器有開啟上次關閉的標籤頁的功能，所以sessionstorage的生命週期可能並不是在標籤頁關閉之後就立馬結束，可能會延時一段時間。

如果使用者禁用了快取，那麼在我們存入資料時會丟擲securityerrordomexception

目前推薦的磁碟空間是5m，但是不同的瀏覽器廠商有不同的設定，這個設定會由實際檢驗合理性，比較合理的大小可以反饋給w3c，然後他們來修改這個推薦的大小。

當儲存空間即將達到上限的時候，瀏覽器可以提醒使用者授權增加一點儲存空間，剩餘的儲存空間瀏覽器也應該能讓使用者知道。

ie對資料的儲存是非同步的，firefox和webkit是同步的。在資料量少的時候是看不出區別的。除非儲存的資料量達到一定的量級，你會發現ie執行的會比較快，因為它跳過了寫到磁碟的過程。

Web Storage實用指南

DHTML實用指南

DHTML實用指南

npm實用指南

Web Storage實用指南

DHTML實用指南

DHTML實用指南

npm實用指南

相關推薦