1、localStorage 概念

HTML5 web 存儲：HTML5 提供了兩種在客戶端存儲數據的新方式：localStorage 和 sessionStorage ，兩者都是僅在客戶端（即瀏覽器）中保存，不參與和服務器的通信。

早些時候，本地存儲使用的是 cookie，。但是 cookie 不適合大量數據的存儲，后來 HTML5 提供了 localStorage 和 sessionStorage Web，這些數據不會被保存在服務器上，它也可以存儲大量的數據，而不影響網站的性能。數據以鍵/值對存在且只允許該網頁訪問使用。

2、localStorage 特征

• 生命周期：持久化的本地存儲，保存的數據沒有過期時間，直到手動去除。
• 存儲的信息在同一域中是共享的。
• 當本頁操作（新增、修改、刪除）了localStorage的時候，本頁面不會觸發storage事件,但是別的頁面會觸發storage事件。
• 大小：據說是5M（跟瀏覽器廠商有關系）
• 在非IE下的瀏覽中可以本地打開。IE瀏覽器要在服務器中打開。
• localStorage本質上是對字符串的讀取，如果存儲內容多的話會消耗內存空間，會導致頁面變卡
• localStorage受同源策略的限制

3、sessionStorage

用于臨時保存同一窗口(或標簽頁)的數據，在關閉瀏覽器或該標簽頁之后就會刪除這些數據。

4、JavaScript操作 localStorage 和 sessionStorage 

不管是 localStorage，還是 sessionStorage，可使用的API都相同，常用的有如下幾個（下面以localStorage為例）：

• 保存數據：localStorage.setItem(key,value);    或者：localStorage.keyName = value;
• 讀取數據：localStorage.getItem(key);
• 刪除單個數據：localStorage.removeItem(key);
• 刪除所有數據：localStorage.clear();
• 得到某個索引的key：localStorage.key(index);

當我們想在 localStorage 和 sessionStorage 中存儲對象時，可以先用 JSON.stringify(obj) 方法將對象轉換為字符串，然后進行存儲。要想將值作為對象輸出可以用  JSON.parse(str) 方法將字符串轉換為對象。

5、cookie、localStorage 、 sessionStorage 的區別和共同點

共同點：

• 都是保存在本地瀏覽器端。

區別如下：

存儲大小：

• cookie 數據大小不能超過4 k 。（因為每次http請求都會攜帶cookie，所以cookie只適合保存很小的數據）
• sessionStorage 和 localStorage 雖然也有存儲大小的限制，但比 cookie 大得多，可以達到 5M 或更大。

有期時間：

• localStorage 存儲持久數據，持久化的本地存儲，保存的數據沒有過期時間，直到手動去除。
• sessionStorage 數據在頁面會話結束時會被清除。sessionStorage僅在當前標簽頁關閉前有效，當該標簽頁關閉后數據也會被刪除。
• cookie 默認當會話結束（關閉瀏覽器）的時候即銷毀，當然也可以手動設置過期的時間，此時在設置的 cookie 過期時間之前一直有效，即使窗口或瀏覽器關閉。

作用域：（三者的數據共享都遵循同源原則，sessionStorage還限制必須是同一個頁面。三者都是在不同瀏覽器下保存的位置可能不一樣，都不能跨瀏覽器共享。）

• sessionStorage 僅在當前標簽頁有效，即使是在同一瀏覽器中新建一標簽頁打開同一網站也不會共享。
• localStorage 在同一瀏覽器中的同一網站上都是共享的。
• cookie 可以設置域名及路徑，實現同一域名或者目錄共享。