網站首頁 網站建設 公司動態 行業新聞 案例展示 關于我們

文章內容

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

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

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

客服熱線:tel(謝先生)  客服QQ:1323605005  
服務郵箱:[email protected](售前咨詢)  [email protected](技術部)  [email protected](售后服務)
公司地址:四川省攀枝花市
郵編:617200

青海十一选五开奖图