引入

Web Storage的目的是解決cookie帶來的限制，當資料需要嚴格控制在客戶端時，無需持續的將資料發回伺服器。

Web Storage的兩個主要目標：提供一種在cookie之外的儲存資料的方式、提供一種儲存大量可以跨會話存在的資料的機制

Web Storage分為兩類：sessionStorage和localStorage。sessionStorage儲存的資料用於瀏覽器的一次會話，當會話結束(通常是該視窗關閉)，資料被清空；localStorage儲存的資料長期存在，下一次訪問該網站的時候，網頁可以直接讀取以前儲存的資料。這兩個物件的屬性和方法完全一樣

Web Storage的儲存空間要比Cookie大的多，Chrome是2.5MB，Firefox和Opera是5MB，IE是10MB。與Cookie一樣，它們也受同域限制，某個網頁存入的資料，只有同域下的網頁才能讀取

存取資料

sessionStorage和localStorage以鍵值對的形式儲存資料，每一項資料都有一個鍵名和對應的值。所有的資料都是以文字格式儲存

setItem()

setItem(key,value)用於儲存資料，它接受兩個引數，第一個是鍵名，第二個是儲存的資料

sessionStorage.setItem('name', 'wmui');
localStorage.setItem('name', 'wmui');

getItem()

getItem(key)用於讀取資料，它接收一個引數，表示要讀取資料的鍵名

var s = sessionStorage.getItem('name');
var l = localStorage.getItem('name');
 

除了使用setItem()和getItem()方法之外，還可以使用屬性來存取資料

localStorage.name = 'wmui'; // 存
console.log(localStorage.name); // 取

刪除資料

removeItem()

removeItem(key)方法用於刪除鍵名為key的儲存項。如果鍵名不存在不會報錯，而是靜默失敗

localStorage.removeItem('name')
sessionStorage.removeItem('name')

除了使用removeItem()方法，還可以使用delete操作來刪除儲存項

delete localStorage.name;
delete sessionStorage.name;
 

clear()

clear方法用於刪除所有已儲存的資料

localStorage.clear();
sessionStorage.clear();

遍歷操作

key()

key(index)方法返回index位置處的儲存項的鍵名

localStorage.name = 'wmui'
localStorage.token =  'asdf'
console.log(localStorage.key(0), localStorage.key(1), localStorage.key(2)) // name token null

length

length屬性返回名值對兒的個數

console.log(localStorage.length); // 2

利用length屬性和key()方法，可以遍歷所有的儲存項

for(var i = 0; i < localStorage.length; i++){
  var key = localStorage.key(i);
  var value = localStorage.getItem(key);
}

儲存事件

無論是sessionStorage還是localStorage，當存取資料和刪除資料時都會觸發storage事件。storage事件只發生在window物件上，使用DOM0級、DOM2級事件處理函式都可以

只有資料發生改變時才會觸發storage事件，也就是說，給已經存在的儲存項設定一個一模一樣的值，抑或是刪除一個本來就不存在的儲存項都是不會觸發儲存事件的

一般地，storage事件不在導致資料變化的當前頁面觸發，如果瀏覽器同時開啟一個域名下面的多個頁面，當其中的一個頁面改變sessionStorage或localStorage的資料時，其他所有頁面的storage事件會被觸發，而原始頁面並不觸發storage事件。可以通過這種機制，實現多個視窗之間的通訊

注意： IE9+瀏覽器與其他標準瀏覽器有所不同，無論資料真實值是否變化，只要對資料進行設定或刪除，都會觸發該事件，且原始頁面和同一域名下的其他頁面都會觸發

storage事件的event物件有以下屬性:

url:觸發事件的連結地址
key:設定或者刪除的鍵名
newvalue:如果是設定值，則是新值；如果是刪除鍵，則是null
oldValue:鍵被更改之前的值
storageArea:返回觸發事件的物件

示例

<button id="btn">btn</button>
<script>
  localStorage.name = 'wmui'
  btn.onclick = function() {
    localStorage.name = 'aaa'
  }
  window.onstorage = function(e) {
    console.log(e.url,e.key,e.newValue, e.oldValue,e.storageArea)
  }
</script>

同時開啟兩個地址為http://127.0.0.1:3030/的視窗，在B視窗點選按鈕，A視窗列印資訊如下: