HTML5本地存儲

HTML5中的 Web Storage 包括兩種存儲方式： sessionStorage 和 localStorage 本地離線存儲，同域下只能存儲 5M 的空間；IE6.7中可以用 UserData 來實現

sessionStorage 用于本地存儲一個會話(session)中的數據，這些數據只有在同個會話中的頁面才能訪問并且當會話結束后數據也隨之銷毀，因此 seesionStorage 不是一種持久化的本地存儲，僅僅是會話級別的存儲；

localStorage，用于持久化存儲本地數據，如果不手動刪除則會一直存在，就算把瀏覽器關了，清了瀏覽器緩存，關機等十天半個月再開，一樣的存在；但是，它只是存在同一個域名下；

localStorage 和 sessionStorage操作

localStorage 和 sessionStorage 都具有相同的操作方法：

注意，下面 value 的值始終是字符串，即使傳的是一個數字也會被轉換成字符串

• localStorage.setItem(“key”, “value”)，設置 key 的值為 value，如果 key 已經存在則更新其值為 value

  localStorage[“key”] = value，也可以這樣設置值，不推薦

  localStorage.key = value，這樣也行，不推薦

• localStorage.getItem(“key”)，獲取 key 的值，如果 key 不存在返回 null

  localStorage[“key”]，也可以這樣獲取值，不推薦

  localStorage.key，這樣也可以獲取值，不推薦

• localStorage.removeItem(“key”)，刪除 key 對應的數據

• localStorage.clear()，清空所有 localStorage 保存的數據

• localStorage.length，數據總量

• localStorage.key(index)，獲取 key

• 存儲 JSON 格式數據

  JSON.stringify(data)，將一個對象轉換成 JSON 格式的數據串，返回轉換后的串

  JSON.parse(data)，將數據解析成 js 對象，返回解析后的對象

• HTML5 的本地存儲，還提供了一個 storage 事件，可以對鍵值對的改變進行監聽，如果我們同時打開了同域名下的多個頁面，這時在其中一個頁面中對 localStorage 有操作，那其它同域的頁面就會觸發這個事件

  對于事件對象 e，是一個 StorageEvent 對象，提供了一些實用的屬性，可以很好的觀察鍵值對的變化：

  • e.key，被修改的鍵名

  • e.oldValue，被修改的鍵對應的舊的值

  • e.newValue，被修改的鍵對應的新的值

  • e.url，解發 storage 事件的 url

  • e.storageArea，當前 Storage 的引用(session 或 local)