簡介

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.lengthlength?屬性用于獲取 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 還可以用于同域不同窗口間的通信。
來源：?https://my.oschina.net/u/2282680/blog/791180

總結

以上是生活随笔為你收集整理的浅析localstorage、sessionstorage的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。