HTML5中,我們常常用到storage,那這個storage到底是什麼?有啥用呢? 其實,storage是個很簡單的東西,只要熟悉JavaScript中物件的童鞋,看完小編本文的分享,對storage的概念及用法應該都能掌握個七七八八了。 在HTML5中,你可以吧storage 想象成是儲存在客戶端(瀏覽器)中的一些 javascript 物件,那麼有什麼用呢?舉個簡單的例子,百度搜索會把你每次的搜尋關鍵字用 storage(localStorage) 儲存下來,那麼下次你再搜尋相同的內容的時候,它會優先將你曾經搜過的內容進行下拉展示。 關於 storage 的內容,可以用 chrome 下的 Resources 面板進行檢視。 方法:

1、clear() 刪除所有值。ff 沒有實現 2、getItem(name) 根據指定的名字 name 獲取對應的值 3、key(index) 獲得 index 位置處的值的名字 4、removeItem(name) 刪除由 name 指定的名值對 5、setItem(name, value) 為指定的 name 設定一個對應的值

也可以用點語法和方括號語法來訪問設定,但是建議用上面的方法。除此之外,還需要注意的一點就是 value 必須是字串 。 sessionStorage 顧名思義,sessionStorage 物件儲存特定於某個會話的資料,也就是該資料只保持到瀏覽器關閉,或者更準確地說是保持到該頁面標籤關閉為止。對於同一個頁面,在不同標籤中開啟,是擁有不同的 sessionStorage 物件的,而如果相同頁面,重新整理後,sessionStorage 物件也會重新開始。

// 設定 sessionStorage.setItem('name', 'maiziedu'); sessionStorage.age = '10';

// 讀取 var name = sessionStorage.getItem('name'); // maiziedu var age = sessionStorage.age; // 10

// 遍歷 for (var i = 0, len = sessionStorage.length; i < len; i++) { var key = sessionStorage.key(i); var value = sessionStorage.getItem(key); console.log(key, value); } // age 10 // name maiziedu // 也可以用 for in for (var key in sessionStorage) { console.log(key, sessionStorage.getItem(key)); }

// 刪除 delete sessionStorage.name; sessionStorage.removeItem('age'); 因為 sessionStorage 物件綁定於某個伺服器會話,所以當檔案在本地執行的時候是不可用的。 sessionStorage 物件主要用於僅針對會話的小段資料的儲存,如果需要跨域會話儲存資料,那麼就要使用 localStorage 了。 localStorage localStorage 和 sessionStorage 大抵相同。可以多頁面訪問同一個 localStorage 物件,但是頁面必須來自同一域名(子域名無效),使用同一種協議,同一個埠(同源策略)。至於 localStorage 的使用方法,可以參考上面 sessionStorage 的使用。 Storage 事件 對 Storage 物件進行任何修改,都會在文件上觸發 Storage 事件。當通過屬性或 setItem() 方法儲存資料,使用 delete 操作符或者 removeItem() 刪除資料,或者呼叫 clear() 方法時,都會發生該事件。這個事件的 event 物件有如下屬性:

1、domain 發生變化的儲存空間的域名 2、key 設定或者刪除的鍵名 3、newValue 如果是設定值,則是新值;如果是刪除鍵,則是 null 4、oldValue 鍵被更改之前的值 遺憾的是,webkit(chrome)還不支援這個事件,儘管 IE8 以及 ff 支援其部分屬性,但因為 chrome 的不支援,註定其到目前為止還無法廣泛使用。 EventUtil.addHandler(document, 'storage', function(e) { console.log(e.domain, e.key, e.newValue, e.oldValue); }); 以上就是html5中,涉及到的storage相關內容及其使用方法,如果大家在前端開發中,需要實現上述功能,不妨可以