前端開發本地存儲之localStorage和sessionStorage

一、localStorage 概念

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

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

二、localStorage 特徵

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

三、sessionStorage

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

四、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) 方法將字符串轉換爲對象。

五、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 能夠設置域名及路徑，實現同一域名或者目錄共享。三者都是在不一樣瀏覽器下保存的位置可能不同，都不能跨瀏覽器共享。