localstorage、sessionstorage的用法

html5 中的 web Storage 包括了兩種存儲方式：sessionStorage 和 localStorage。
sessionStorage 用於本地存儲一個會話（session）中的數據，這些數據只有在同一個會話中的頁面才能訪問，會話結束後數據也隨之銷燬。
localStorage 用於存儲一個域名下的須要永久存在在本地的數據，這些數據能夠被一直訪問，直到這些數據被刪除。
所以sessionStorage 和 localStorage 的主要區別在於他們存儲數據的生命週期，sessionStorage 存儲的數據的生命週期是一個會話，而 localStorage 存儲的數據的生命週期是永久，直到被主動刪除，不然數據永遠不會過時的。
Web Storage 和 cookie 的異同點及優劣勢：
一、Web Storage 和 cookie 有許多相同之處：
（1）它們均可以用於存儲用戶數據
（2）它們存儲數據的格式都是字符串形式
（3）它們存儲的數據都有大小限制
二、Web Storage 和 cookie 也有不一樣之處：
（1）它們的生命週期不一樣。sessionStorage 的生命週期是一個會話，localStorage的生命週期是永久，cookie 的生命週期能夠自定義，cookie 能夠設置過時時間，數據在過時時間以前能夠訪問。
（2）它們的存儲大小限制不一樣。大部分現代瀏覽器 Storage 的存儲限制大小爲 5M，cookie 的存儲大小限制 爲 4K。
（3）瀏覽器支持不一樣，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