總結本地存儲幾種方式

最近學習了本地存儲幾種方式各自的特色和區別，遂記錄下來，以加深印象。

1、cookie

cookie算是比較早的技術，最初是爲了記錄http的狀態，提升訪問速度。cookie是服務器"種植"在客戶端的key-value形式文本文件。但同時客戶端也能操做cookie。
特色：

• 大小：cookie的大小限制在4k。每一個域名下cookie的個數如今在20個。
• 在客戶端請求服務器端和服務器響應時，cookie始終被攜帶在http請求中，即便不須要(形成流量浪費)。這也是限制cookie大小的緣由。
• 客戶端能夠經過document.cookie操做cookie，並不安全。
• cookie能夠設置過時時間、路徑、域和httpOnly等字段。若是設置了過時時間，cookie會保存在硬盤裏，知道到了設定的過時時間纔會失效。若未設置過時時間，在瀏覽器窗口關閉時，cookie就失效了。路徑和域兩個字段限制了cookie的做用範圍。httpOnly設置爲true，則js不能經過document.cookie操做cookie。

2、localStorage

它也是採用key-value的形式存儲數據，可是它與cookie有很大的區別
特色：

• 對比着來，localStorage能保存更大的數據，標準瀏覽器是5Mb。
• localStorage保存在客戶端，不隨着請求發送給服務器，避免了流量的浪費。
• 客戶端能夠經過：setItem、getItem方法訪問localStorage。
• 而且，localStorage沒有過時時間，若是不手動清除，數據就永遠不會過時，一直保存在瀏覽器當中。
• 存儲的信息在同一域中是共享的。

3、sessionStorage

特色：

• 與localStorage不一樣的是，sessionStorage並不持久化，在窗口關閉那一刻，sessionStorage會被清除。
• 存儲的信息是會話級別的，同域也是不能共享的。關閉當前標籤頁，sessionStorage即失效。

4、session(附加)

上面提到了cookie，順帶提一下session。客戶端第一次訪問服務器，服務器種植一個cookie，保存惟一的sessionId。後面客戶端再次訪問，會讀取此sessionId，隨即能在服務端讀取到此id保存的會話對象。
特色：

session是基於cookie的，因爲session在客戶端不可被修改，相對於cookie來講安全，因此可存放一些重要數據。
數據保存在服務器端，客戶端經過sessionId，讀取到相對應的數據。

5、用法

對瀏覽器來講，使用 Web Storage 存儲鍵值對比存儲 Cookie 方式更直觀，並且容量更大，它包含兩種：localStorage 和 sessionStorage
sessionStorage（臨時存儲） ：爲每個數據源維持一個存儲區域，在瀏覽器打開期間存在，包括頁面從新加載
localStorage（長期存儲） ：與 sessionStorage 同樣，可是瀏覽器關閉後，數據依然會一直存在
sessionStorage 和 localStorage 的用法基本一致，引用類型的值要轉換成JSON

1. 保存數據到本地

const info = {
    name: 'Lee',
    age: 20,
    id: '001'
};
sessionStorage.setItem('key', JSON.stringify(info));
localStorage.setItem('key', JSON.stringify(info));

2. 從本地存儲獲取數據

var data1 = JSON.parse(sessionStorage.getItem('key'));
var data2 = JSON.parse(localStorage.getItem('key'));

3. 本地存儲中刪除某個保存的數據

sessionStorage.removeItem('key');
localStorage.removeItem('key');

4.刪除全部保存的數據

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

5. 監聽本地存儲的變化
Storage 發生變化（ 增長、 更新、 刪除） 時的 觸發， 同一個頁面發生的改變不會觸發， 只會監聽同一域名下其餘頁面改變 Storage

window.addEventListener('storage', function(e) {
    console.log('key', e.key);
    console.log('oldValue', e.oldValue);
    console.log('newValue', e.newValue);
    console.log('url', e.url);
})

6.數組例子

/*本地存儲保存數組*/
var list = []
list1 = 1
list2 = 2
list.push(list1)
list.push(list2)
list = JSON.stringify(list);
localStorage.setItem("list", list);
/*獲取*/
var list = eval(decodeURIComponent(localStorage.getItem("list")))
list1 = list[0]
list2 = list[1]
/*清除指定*/
localStorage.removeItem("lastname");