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數據始終在同源的http請求中攜帶（即使不需要），即cookie在瀏覽器和服務器間來回傳遞；cookie數據還有路徑（path）的概念，可以限制cookie只屬於某個路徑下。而sessionStorage和localStorage不會自動把數據發給服務器，僅在本地保存。
-
存儲大小限制不同：cookie數據不能超過4k，同時因為每次http請求都會攜帶cookie，所以cookie只適合保存很小的數據，如會話標識。sessionStorage和localStorage 雖然也有存儲大小的限制，但比cookie大得多，可以達到5M或更大。
-
數據有效期不同：sessionStorage僅在當前標簽頁關閉前有效，當該標簽頁關閉后數據也會被刪除；localStorage：持久化的本地存儲，保存的數據沒有過期時間，直到手動去除；cookie只在設置的cookie過期時間之前一直有效，即使窗口或瀏覽器關閉。
- 作用域不同：sessionStorage 僅在當前標簽頁有效，即使是在同一瀏覽器中新建一標簽頁打開同一網站也不會共享；localStorage 在同一瀏覽器中的同一網站上都是共享的；cookie 可以設置域名及路徑，實現同一域名或者目錄共享。三者都是在不同瀏覽器下保存的位置可能不一樣，都不能跨瀏覽器共享。