html5客戶端本地存儲之sessionStorage及storage事件

日期：2013-11-23 來源：攀枝花惠康網絡公司

首先您可以看一下《JavaScript當地存儲實踐（html5的localStorage和ie的userData）》
sessionStorage和上文中提到的localStorage很是體味，體例也幾乎一樣：

很是通俗易懂的接口:

sessionStorage.getItem(key):獲取指定key當地存儲的值
sessionStorage.setItem(key,value)：將value存儲到key字段
sessionStorage.removeItem(key):刪除指定key當地存儲的值
sessionStorage.length是sessionStorage的項目數

直接上demo：http://www.css88.com/demo/sessionStorage/

sessionStorage與 localStorage 的異同

sessionStorage 和 localStorage 就一個分歧的處所， sessionStorage數據的存儲僅特定于某個會話中，也就是說數據只連結到瀏覽器封鎖，當瀏覽器封鎖后年夜頭打開這個頁面時，之前的存儲已經被斷根。而 localStorage 是一個持久化的存儲，它并不局限于會話。

sessionStorage和localStorage供給的key()和length可以便利的實現存儲的數據遍歷，例如下面的代碼：

sessionStorage 和 localStorage的clear()函數的用于清空同源的當地存儲數據，好比localStorage.clear()，它將刪除所有同源的當地存儲的localStorage數據，而對于Session Storage，它只清空當前會話存儲的數據。


var storage = window.localStorage;
for (var i=0, len = storage.length; i < len; i++){
var key = storage.key(i);
var value = http://www.css88.com/archives/storage.getItem(key);
console.log(key + "=" + value);
}

sessionStorage 和 localStorage具有不異的體例storage事務，在存儲事務的措置函數中是不能打消這個存儲動作的。存儲事務只是瀏覽器在數據轉變發生之后給你的一個通知。當setItem(),removeItem()或者clear() 體例被挪用，而且數據真的發生了改變時，storage事務就會被觸發。注重這里的的前提是數據真的發生了轉變。也就是說，如不美觀當前的存儲區域是空的，你再去挪用clear()是不會觸發事務的?；蛘吣憬浻蛇^程setItem()來設置一個與現有值不異的值，事務也是不會觸發的。當存儲區域發生改變時就會被觸發，這其中包含良多有用的屬性：

storageArea: 暗示存儲類型（Session或Local）
key:發生改變項的key
oldValue: key的原值
newValue: key的新值
url*: key改變發生的URL

* 注重: url 屬性早期的規范中為uri屬性。有些瀏覽器發布較早，沒有包含這一變換。為兼容性考慮，使用url屬性前，你應該先搜檢它是否存在，如不美觀沒有url屬性，則應該使用uri屬性
如不美觀挪用clear()體例，那么key、oldValue和newValue城市被設置為null。
PS.在firefox和chrome中存儲和篡奪都是正常的, 可是對storage事務的觸發似乎有點問題, 自身頁面進行setItem后沒有觸發window的storage事務, 可是同時訪謁A.html和B.html, 在A頁面中進行 setItem能觸發B頁面中window的storage事務, 同樣的在B頁面中進行setItem能觸發A頁面中window的storage事務. 在IE9中, 頁面自身的設值能觸發當前頁面的storage事務,同樣當前頁面的設值能觸發統一”發源”下其他頁面window的storage事務,這看起來似乎更讓人想的通些.

直接上demo,同事打開這兩個頁面（代碼一模一樣）：

封鎖頁面會導致 sessionStorage 的數據被斷根，但刷新或年夜頭打開新頁面數據仍是存在，如不美觀需要存儲的只是少量的姑且數據。我們可以使用sessionStorage ?；蛘咦鲰撁骈g的小交互。

http://www.css88.com/demo/sessionStorage/index2.html

http://www.css88.com/demo/sessionStorage/index3.html

感謝感動：Mr.Prime在storage事務上給以的輔佐，此外舉薦一下他寫的關于storage的博文：http://www.cnblogs.com/AndyWithPassion/archive/2011/07/04/html5_localstorage.html

文章來源：攀枝花惠康網絡公司

惠康網絡，是一家專業從事攀枝花網站建設，攀枝花網站制作，攀枝花網站設計公司，提供網站建設一條龍服務（網站域名注冊+網站服務器租用+網站開發+網站維護+網站營銷推廣），惠康網絡立足攀枝花，輻射全中國，攀枝花惠康網絡的客戶已經遍布國內各地大中小城市，我們高效優質的網站建設服務深受用戶好評。