好程式設計師前端教程之HTML5中的storage 如何使用？

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相關內容及其使用方法，如果大家在前端開發中，需要實現上述功能，不妨可以試試上述方法。