Web Storage 學習

簡介

html5 中的 Web Storage 包括了兩種存儲方式：sessionStorage 和 localStorage。 sessionStorage 用於本地存儲一個會話（session）中的數據，這些數據只有在同一個會話中的頁面才能訪問，會話結束後數據也隨之銷燬。localStorage 用於存儲一個域名下的須要永久存在在本地的數據，這些數據能夠被一直訪問，直到這些數據被刪除。所以sessionStorage 和 localStorage 的主要區別在於他們存儲數據的生命週期，sessionStorage 存儲的數據的生命週期是一個會話，而 localStorage 存儲的數據的生命週期是永久，直到被主動刪除，不然數據永遠不會過時的。

Web Storage 和 cookie 的異同點及優劣勢

Web Storage 和 cookie 有許多相同之處：

• 它們均可以用於存儲用戶數據
• 它們存儲數據的格式都是字符串形式
• 它們存儲的數據都有大小限制

Web Storage 和 cookie 也有不一樣之處：

• 它們的生命週期不一樣。sessionStorage 的生命週期是一個會話，localStorage的生命週期是永久，cookie 的生命週期能夠自定義，cookie 能夠設置過時時間，數據在過時時間以前能夠訪問。
• 它們的存儲大小限制不一樣。大部分現代瀏覽器 Storage 的存儲限制大小爲 5M，cookie 的存儲大小限制 爲 4K。
• 瀏覽器支持不一樣，API 調用方式不一樣。

相比 cookie ，Web Storage 的優勢主要表如今存儲空間更大，可存儲的內容更大。cookie每次都隨請求數據發送到服務器端，Web Storage不會和請求數據一同發送到服務器端，佔用帶寬更少。缺點主要表如今，如今全部瀏覽器都支持 cookie 操做，而只有如今瀏覽器才支持 Web Storage 操做，若是須要兼容老舊瀏覽器，就不能使用 Web Storage。

Web Storage API

localStorage 和 sessionStorage 有着統一的API接口，這爲兩者的操做提供了極大的便利。下面以 localStorage 爲例來介紹一下 API 接口使用方法，一樣這些接口也適用於 sessionStorage。

• 添加鍵值對：localStorage.setItem(key, value)

  setItem 用於把值 value 存儲到鍵key上，除了使用 setItem ，還可使用 localStorage.key = value 或者 localStorage['key'] = value 這兩種形式。另外須要注意的是，key和value值必須是字符串形式的，若是不是字符串，會調用它們相應的toString() 方法來轉換成字符串再存儲。當咱們要存儲對象是，應先轉換成咱們可識別的字符串格式（好比JSON格式）再進行存儲。

// 把一個用戶名(lilei)存儲到 name 的鍵上
    localStorage.setItem('name', 'lilei');
    // localStorage.name = 'lilei';
    // localStorage['name'] = 'lilei';
    // 把一個用戶存儲到user的鍵上
    localStorage.setItem('user', JSON.stringify(id:1, name:'lilei'));

• 獲取鍵值：localStorage.getItem(key)

  getItem 用於獲取鍵 key 對應的數據，和 setItem 同樣，getItem 也有兩種等效形式 value = localStorage.key 和 value = localStorage['key'] 。獲取到的 value 值是字符串類型，若是須要其餘類型，要作手動的類型轉換。

// 獲取存儲到 name 的鍵上的值
    var name = localStorage.getItem('name');
    // var name = localStorage.name;
    // var name = localStorage['name'];
    // 獲取存儲到user的鍵上的值
    var user = JSON.parse(localStorage.getItem('user'));

• 刪除鍵值對：localStorage.removeItem(key)

  removeItem 用於刪除指定鍵的項，localStorage 沒有數據過時的概念，全部數據若是失效了，須要開發者手動刪除。

var name = localStorage.getItem('name'); // 'lilei'
    // 刪除存儲到 name 的鍵上的值
    localStorage.removeItem('name');
    name = localStorage.getItem('name'); // null

• 清除全部鍵值對：localStorage.clear()

  clear 用於刪除全部存儲的內容，它和removeItem不一樣的地方是removeItem 刪除的是某一項，而clear是刪除全部。

// 清除 localStorage
    localStorage.clear();
    var len = localStorage.length; // 0

• 獲取 localStorage 的屬性名稱(鍵名稱)：localStorage.key(index)

  key 方法用於獲取指定索引的鍵名稱。須要注意的是賦值早的鍵值對應的索引值大，賦值完的鍵值對應的索引小, key方法可用於遍歷 localStorage 存儲的鍵值。

localStorage.setItem('name','lilei');
    var key = localStorage.key(0); // 'name'
    localStorage.setItem('age', 10);
    key = localStorage.key(0); // 'age'
    key = localStorage.key(1); // 'name'

• 獲取 localStorage 中保存的鍵值對的數量：localStorage.length

  length 屬性用於獲取 localStorage 中鍵值對的數量。

localStorage.setItem('name','lilei');
    var len = localStorage.len; // 1
    localStorage.setItem('age', 10);
    len = localStorage.len; // 2

Web Storage 事件

• storage 事件

  當存儲的數據發生變化時，會觸發 storage 事件。但要注意的是它不一樣於click類的事件會事件捕獲和冒泡，storage 事件更像是一個通知，不可取消。觸發這個事件會調用同域下其餘窗口的storage事件，不過觸發storage的窗口（即當前窗口）不觸發這個事件。

  storage 的 event 對象的經常使用屬性以下：

  oldValue：更新前的值。若是該鍵爲新增長，則這個屬性爲null。
    newValue：更新後的值。若是該鍵被刪除，則這個屬性爲null。
    url：原始觸發storage事件的那個網頁的網址。
    key：存儲store的key名

function storageChanged() {
        console.log(arguments);
    }

    window.addEventListener('storage', storageChanged, false);

使用場景

基於 Web Storage 的特色，它主要被用於儲存一些不常常改動的，不敏感的數據，好比全國省市區縣信息。還能夠存儲一些不過重要的跟用戶相關的數據，好比說用戶的頭像地址、主題顏色等，這些信息能夠先存儲在用戶本地一份，便於快速呈現，等真正從服務器端讀取成功後再更改頭像地址，主題顏色。另外，基於 storage 事件特色，Web Storage 還能夠用於同域不一樣窗口間的通訊。