你必須知道：localStorage、sessionStorage 和 Cookie 區別在什麼地方

概念的理解

webstorage本地存儲

• webstorage是本地存儲，存儲在客戶端，包括localStorage和sessionStorage
• localStorage生命週期是永久，這意味着除非用戶顯示在瀏覽器提供的UI上清除localStorage信息，否則這些信息將永遠存在。存放數據大小爲一般爲5MB,而且它僅在客戶端（即瀏覽器）中保存，不參與和服務器的通信
• sessionStorage僅在當前會話下有效，關閉頁面或瀏覽器後被清除。存放數據大小爲一般爲5MB,而且它僅在客戶端（即瀏覽器）中保存，不參與和服務器的通信。源生接口可以接受，亦可再次封裝來對Object和Array有更好的支持

WebStorage的目標
提供一種在cookie之外存儲會話數據的路徑
提供一種存儲大量可以跨會話存在的數據的機制

HTML5的WebStorage提供了兩種API：localStorage（本地存儲）和sessionStorage（會話存儲）

作用域的不同：
不同瀏覽器無法共享localStorage或sessionStorage中的信息。
相同瀏覽器的不同頁面間可以共享相同的 localStorage（頁面屬於相同域名和端口），但是不同頁面或標籤頁間無法共享sessionStorage的信息。這裏需要注意的是，頁面及標籤頁僅指頂級窗口，如果一個標籤頁包含多個iframe標籤且他們屬於同源頁面，那麼他們之間是可以共享sessionStorage的

存儲大小：
localStorage和sessionStorage的存儲數據大小一般都是：5MB

存儲位置：
localStorage和sessionStorage都保存在客戶端，不與服務器進行交互通信

存儲內容類型：
localStorage和sessionStorage只能存儲字符串類型，對於複雜的對象可以使用ECMAScript提供的JSON對象的stringify和parse來處理

獲取方式：
localStorage：window.localStorage;；sessionStorage：window.sessionStorage;

應用場景：
localStoragese：常用於長期登錄（+判斷用戶是否已登錄），適合長期保存在本地的數據，而sessionStorage：敏感賬號一次性登錄

WebStorage的優點：
存儲空間更大：cookie爲4KB，而WebStorage是5MB

節省網絡流量：WebStorage不會傳送到服務器，存儲在本地的數據可以直接獲取，也不會像cookie一樣美詞請求都會傳送到服務器，所以減少了客戶端和服務器端的交互，節省了網絡流量

對於那種只需要在用戶瀏覽一組頁面期間保存而關閉瀏覽器後就可以丟棄的數據，sessionStorage會非常方便
快速顯示：有的數據存儲在WebStorage上，再加上瀏覽器本身的緩存。獲取數據時可以從本地獲取會比從服務器端獲取快得多，所以速度更快

安全性：WebStorage不會隨着HTTP header發送到服務器端，所以安全性相對於cookie來說比較高一些，不會擔心截獲，但是仍然存在僞造問題

WebStorage提供了一些方法，數據操作比cookie方便

• setItem (key, value) —— 保存數據，以鍵值對的方式儲存信息。
• getItem (key) —— 獲取數據，將鍵值傳入，即可獲取到對應的value值。
• removeItem (key) —— 刪除單個數據，根據鍵值移除對應的信息。
• clear () —— 刪除所有的數據
• key (index) —— 獲取某個索引的key

cookie

• HTTP Cookie簡稱cookie,在HTTP請求發送Set-Cookie HTTP頭作爲響應的一部分。通過name=value的形式存儲
• cookie的構成：
  名稱：name(不區分大小寫,但最好認爲它是區分的)
  值:value(通過URL編碼:encodeURIComponent)
  域
  路徑
  失效時間:一般默認是瀏覽器關閉失效,可以自己設置失效時間
  安全標誌:設置安全標誌後只有SSL連接的時候才發送到服務器
• cookie的作用:主要用於保存登錄信息
• 生命期爲只在設置的cookie過期時間之前一直有效，即使窗口或瀏覽器關閉。 存放數據大小爲4K左右 。有個數限制（各瀏覽器不同），一般不能超過20個。與服務器端通信：每次都會攜帶在HTTP頭中，如果使用cookie保存過多數據會帶來性能問題

cookie的優點：

• 具有極高的擴展性和可用性
• 通過良好的編程，控制保存在cookie中的session對象的大小
• 通過加密和安全傳輸技術，減少cookie被破解的可能性
• 只有在cookie中存放不敏感的數據，即使被盜取也不會有很大的損失
• 控制cookie的生命期，使之不會永遠有效。這樣的話偷盜者很可能拿到的就 是一個過期的cookie

cookie的缺點：

• cookie的長度和數量的限制。每個domain最多只能有20條cookie，每個cookie長度不能超過4KB，否則會被截掉
• 安全性問題。如果cookie被人攔掉了，那個人就可以獲取到所有session信息。加密的話也不起什麼作用
  有些狀態不可能保存在客戶端。例如，爲了防止重複提交表單，我們需要在服務端保存一個計數器。若吧計數器保存在客戶端，則起不到什麼作用

sessionStorage

• sessionStorage是Storage類型的一個對象，擁有
  clear(),
  getItem(name),
  key(index),
  removeItem(name),
  setItem(name,value)方法
• sessionStorage對象存儲特定於某個會話的數據,也就是該數據只保持到瀏覽器關閉
• 將數據保存在session對象中。所謂session，是指用戶在瀏覽某個網站時，從進入網站到瀏覽器關閉所經過的這段時間，也就是用戶瀏覽這個網站所花費的時間。session對象可以用來保存在這段時間內所要求保存的任何數據
• sessionStorage爲臨時保存

localStorage

• localStorage也是Storage類型的一個對象
• 在HTML5中localStorage作爲持久保存在客戶端數據的方案取代了globalStorage(globalStorage必須指定域名)
• localStorage會永久存儲會話數據，除非removeItem,否則會話數據一直存在
  4）將數據保存在客戶端本地的硬件設備(通常指硬盤，也可以是其他硬件設備)中，即使瀏覽器被關閉了，該數據仍然存在，下次打開瀏覽器訪問網站時仍然可以繼續使用
• localStorage爲永久保存

圖示說明：

注意：時刻注意XSS注入的風險，因爲可以在控制檯直接訪問它們，所以不要存入敏感數據

區別的比較

本地儲存localStorage與cookie的區別

• cookie在瀏覽器與服務器之間來回傳遞
  sessionStorage和localStorage不會把數據發給服務器，僅在本地保存
• 數據有效期不同
  cookie只在設置的cookie過期時間之前一直有效，即使窗口或瀏覽器關閉
  sessionStorage：僅在當前瀏覽器窗口關閉前有效
  localStorage始終有效，長期保存
• cookie數據還有路徑的概念，可以限制cookie只屬於某個路徑下
  存儲大小也不同，cookie數據不能超過4k，sessionStorage和localStorage雖然也有存儲大小的限制，但比cookie大得多，可以達到5M或更大
• 作用域不用
  sessionStorage不在不同的瀏覽器窗口中共享
  localStorage在所有同源窗口中都是共享的
  cookie也是在所有同源窗口中都是共享的
  WebStorage支持事件通知機制，可以將數據更新的通知發送給監聽者。Web Storage 的 api 接口使用更方便

cookie、session和localStorage的區別

• cookie的內容主要包括：名字、值、過期時間、路徑和域，路徑與域一起構成cookie的作用範圍。若不設置時間，則表示這個cookie的生命期爲瀏覽器會話期間，關閉瀏覽器窗口，cookie就會消失，這種生命期爲瀏覽器會話期的cookie被稱爲會話cookie
• 會話cookie一般不存儲在硬盤而是保存在內存裏，當然這個行爲並不是規範規定的。若設置了過期時間，瀏覽器就會把cookie保存到硬盤上，關閉後再打開瀏覽器這些cookie仍然有效直到超過設定的過期時間。對於保存在內存裏的cookie，不同的瀏覽器有不同的處理方式session機制。
• 當程序需要爲某個客戶端的請求創建一個session時，服務器首先檢查這個客戶端的請求裏是否已包含了一個session標識（稱爲session id），如果已包含則說明以前已經爲此客戶端創建過session，服務器就按照session id把這個session檢索出來使用（檢索不到，會新建一個），如果客戶端請求不包含session id，則爲客戶端創建一個session並且生成一個與此session相關聯的session id，session id的值應該是一個既不會重複，又不容易被找到規律以仿造的字符串，這個session id將被在本次響應中返回給客戶端保存。保存這個session id的方式可以採用cookie，這樣在交互過程中瀏覽器可以自動的按照規則把這個標識發送給服務器。

cookie和session的區別

• cookie數據存放在客戶的瀏覽器上，session數據放在服務器上
• cookie不是很安全，別人可以分析存放在本地的cookie並進行cookie欺騙，考慮到安全應當使用session
• session會在一定時間內保存在服務器上，當訪問增多，會比較佔用你服務器的性能，考慮到減輕服務器性能方面，應當使用cookie
• 單個cookie保存的數*據不能超過4K，很多瀏覽器都限制一個站點最多保存20個cookie
• 建議將登錄信息等重要信息存放爲session，其他信息如果需要保留，可以放在cookie中
• session保存在服務器，客戶端不知道其中的信心；cookie保存在客戶端，服務器能夠知道其中的信息
• session中保存的是對象，cookie中保存的是字符串
• session不能區分路徑，同一個用戶在訪問一個網站期間，所有的session在任何一個地方都可以訪問到，而cookie中如果設置了路徑參數，那麼同一個網站中不同路徑下的cookie互相是訪問不到的

web Storage和cookie的區別

• Web Storage的概念和cookie相似，區別是它是爲了更大容量存儲設計的，cookie的大小是受限的，並且每次請求一個新的頁面的時候cookie都會被髮送過去，這樣無形中浪費了帶寬，另外cookie還需要指定作用域，不可跨域調用
• web storage擁有setItem,getItem,removeItem,clear等方法，不像cookie需要前端開發者自己封裝setCookie，getCookie
  但是cookie也是不可或缺的，cookie的作用是與服務器進行交互，作爲http規範的一部分而存在的，而web Storage僅僅是爲了在本地“存儲”數據而生
• sessionStorage、localStorage、cookie都是在瀏覽器端存儲的數據，其中sessionStorage的概念很特別，引入了一個“瀏覽器窗口”的概念，sessionStorage是在同源的同窗口中，始終存在的數據，也就是說只要這個瀏覽器窗口沒有關閉，即使刷新頁面或進入同源另一個頁面，數據仍然存在，關閉窗口後，sessionStorage就會被銷燬，同時“獨立”打開的不同窗口，即使是同一頁面，sessionStorage對象也是不同的

Web Storage的好處

• 減少網絡流量：一旦數據保存在本地之後，就可以避免再向服務器請求數據，因此減少不必要的數據請求，減少數據在瀏覽器和服務器間不必要的來回傳遞
• 快速顯示數據：性能好，從本地讀數據比通過網絡從服務器上獲得數據快得多，本地數據可以及時獲得，再加上網頁本身也可以有緩存，因此整個頁面和數據都在本地的話，可以立即顯示
• 臨時存儲：很多時候數據只需要在用戶瀏覽一組頁面期間使用，關閉窗口後數據就可以丟棄了，這種情況使用sessionStorage非常方便

瀏覽器本地存儲與服務器端存儲的區別

• 數據既可以在瀏覽器本地存儲，也可以在服務器端存儲
• 瀏覽器可以保存一些數據，需要的時候直接從本地存取，sessionStorage、localStorage和cookie都是由瀏覽器存儲在本地的數據
• 服務器端也可以保存所有用戶的所有數據，但需要的時候瀏覽器要向服務器請求數據
• 服務器端可以保存用戶的持久數據，如數據庫和雲存儲將用戶的大量數據保存在服務器端 ，服務器端也可以保存用戶的臨時會話數據，服務器端的session機制，如jsp的session對象，數據保存在服務器上
• 服務器和瀏覽器之間僅需傳遞session id即可，服務器根據session id找到對應用戶的session對象，會話數據僅在一段時間內有效，這個時間就是server端設置的session有效期
• 服務器端保存所有的用戶的數據，所以服務器端的開銷較大，而瀏覽器端保存則把不同用戶需要的數據分別保存在用戶各自的瀏覽器中，瀏覽器端一般只用來存儲小數據，而非服務可以存儲大數據或小數據服務器存儲數據安全一些，瀏覽器只適合存儲一般數據

sessionStorage、localStorage和cookie的區別

• 相同點是都是保存在瀏覽器端、且同源的
• cookie數據始終在同源的http請求中攜帶（即使不需要），即cookie在瀏覽器和服務器間來回傳遞，而sessionStorage和localStorage不會自動把數據發送給服務器，僅在本地保存。cookie數據還有路徑（path）的概念，可以限制cookie只屬於某個路徑下
• 存儲大小限制也不同，cookie數據不能超過4K，同時因爲每次http請求都會攜帶cookie、所以cookie只適合保存很小的數據，如會話標識。sessionStorage和localStorage雖然也有存儲大小的限制，但比cookie大得多，可以達到5M或更大
• 數據有效期不同，sessionStorage：僅在當前瀏覽器窗口關閉之前有效；localStorage：始終有效，窗口或瀏覽器關閉也一直保存，因此用作持久數據；cookie：只在設置的cookie過期時間之前有效，即使窗口關閉或瀏覽器關閉
• 作用域不同，sessionStorage不在不同的瀏覽器窗口中共享，即使是同一個頁面；localstorage在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的
• web Storage支持事件通知機制，可以將數據更新的通知發送給監聽者
• web Storage的api接口使用更方便

sessionStorage與頁面js數據對象的區別

• 頁面中一般的js對象的生存期僅在當前頁面有效，因此刷新頁面或轉到另一頁面這樣的重新加載頁面的情況，數據就不存在了
• sessionStorage只要同源的同窗口中，刷新頁面或進入同源的不同頁面，數據始終存在，也就是說只要瀏覽器不關閉，數據仍然存在

用法

localstorage和 sessionstorage

localStorage 和 sessionStorage都具有相同的操作方法，例如 setItem()、getItem() 和 removeItem()等

• 儲存數據
  用途: 將 value存儲到 key字段
  用法: setItem( key, value)

sessionStorage.setItem('key', 'value');
localStorage.setItem('key', 'value');

• 取出數據
  用途: 獲取指定 key本地存儲的值
  用法: getItem(key)

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

• 修改數據
  用途: 修改指定 key本地存儲的值
  用法:setItem(key)

sessionStorage.setItem('key', 'newVal');
localStorage.setItem('key', 'newVal');

• 刪除數據
  用途: 刪除指定 key本地存儲的值
  用法: getItem(key)

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

• 清除數據
  用途: 清除所有本地存儲的數據
  用法: clear()

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

cookie

• 儲存數據

window.document.cookie = 'xxx';

• 取出數據

document.cookie