數據存儲的兩種方式：Cookie 和Web Storage

數據存儲的兩種方式：Cookie 和Web Storage

1、Cookie

Cookie的作用就像你去超市購物時，第一次給你辦張購物卡，這個購物卡里存放了一些你的個人信息，下次你再來這個連鎖超市時，超市會識別你的購物卡，下次直接購物就好了。通俗地說，就是當一個用戶通過 HTTP 協議訪問一個服務器的時候，這個服務器會將一些 Key/Value 鍵值對返回給客戶端瀏覽器，並給這些數據加上一些限制條件，在條件符合時這個用戶下次訪問這個服務器的時候，數據又被完整地帶回給服務器。

Cookie最初是在客戶端用於存儲會話信息的，其要求服務器對任意HTTP請求發送Set-CookieHTTP頭作為響應的一部分。cookie
以name為名稱，以value為值，名和值在傳送時都必須是URL編碼的。瀏覽器會存儲這樣的會話信息，在這之后，通過為每個請求添加Cookie
HTTP頭將信息發送回服務器。

Cookie在性質上是綁定在特定的域名下的，當設置了一個cookie后，再給創建它的域名發送請求時，都會包含這個cookie，這確保了儲存在cookie中的信息智能讓批准的接收者訪問，而不能被其他域訪問。可以通過document.cookie屬性來設置cookie

Cookie的構成

Cookie的優點

• 可配置到期規則： Cookie 可以在瀏覽器會話結束時到期，或者可以在客戶端計算機上無限期存在，這取決於客戶端的到期規則。
• 不需要任何服務器資源： Cookie 存儲在客戶端並在發送后由服務器讀取。
• 簡單性： Cookie 是一種基於文本的輕量結構，包含簡單的鍵值對。
• 數據持久性： 雖然客戶端計算機上 Cookie 的持續時間取決於客戶端上的 Cookie 過期處理和用戶干預，但Cookie 通常是客戶端上持續時間最長的數據保留形式。

Cookie的弊端

cookie雖然在持久保存客戶端數據方面提供了方便，分擔了服務器存儲的負擔，但還是有很多局限性的。

• Cookie數量和長度的限制：每個域的cookie總數是有限的，IE6或更低版本最多20個cookie；IE7和之后的版本最后可以有50個；Firefox最多50個；chrome和Safari沒有做硬性限制。cookie的長度也有限制，最好將cookie控制在4095B以內。否則會被截掉。
• 安全性問題： Cookie 把所有要保存的數據通過 HTTP 協議的頭部從客戶端傳遞到服務端，又從服務端再傳回到客戶端，所有的數據都存儲在客戶端的瀏覽器里，所以這些 Cookie 數據可以被訪問到，如果cookie被人攔截了，那人就可以取得所有的信息。即使加密也與事無補，因為攔截者並不需要知道cookie的意義，他只要原樣轉發cookie就可以達到目的了。
• 性能問題：由於所有cookie都會由瀏覽器作為請求頭發送，所以在cookie中存儲大量信息會影響到特定域的請求性能

2、Web Storage

Web Storage 的目的是克服由cookie帶來的一些限制，當數據需要被嚴格控制在客戶端時，無需持續的將數據發回服務器。其主要目的在於：

1. 提供一種在cookie之外存儲會話數據的途徑；
2. 提供一種存儲大量可以跨會話存在的數據的機制。

Storage類型

Storage類型提供最大的存儲空間（因瀏覽器而異）來存儲名值對兒。其只能存儲字符串，非字符串數據會在存儲之前被轉換成字符串。

sessionStorage對象

存儲特定於某個會話的數據，該數據只保持到瀏覽器關閉。
存儲在sessionStorage中的數據可以跨越頁面刷新而存在；
sessionStorage對象主要用於僅針對會話的小段數據的存儲。

globalStorage對象

目的：跨越會話存儲數據。要使用globalStorage對象，首先要指定哪些域可以訪問該數據，通過方括號標記來實現：

//保存數據

globalStorage["wrox.com"].name = "Vicky";//獲取數據var name = globalStorage["wrox.com"].name;

在使用globalStorage對象時最好要指定域名，如果事先不能確定域名，那么使用location.host作為屬性名比較安全。

如果不使用removeItem（）或者delete刪除，或者用戶未清除瀏覽器緩存，存儲在globalStorage屬性中的數據會一直保存在磁盤上，因此globalStorage很適合在客戶端存儲文檔或者長期保存用戶偏好設置。

localStorage對象

localStorage對象是Html5中取代globalStorage的持久保存客戶端數據的方案。要訪問同一個localStorage對象，頁面必須來自同一個域名，使用那個同一種協議，在同一個端口上。這相當於globalStorage[location.host].
保存在localStorage和globalStorage中的數據一樣，數據保留到通過JavaScript刪除或者是用戶清除瀏覽器緩存

總結一下：

在較高版本的瀏覽器中，js提供了sessionStorage和globalStorage。在HTML5中提供了localStorage來取代globalStorage。
html5中的Web Storage包括了兩種存儲方式：sessionStorage和localStorage。
sessionStorage用於本地存儲一個會話（session）中的數據，這些數據只有在同一個會話中的頁面才能訪問並且當會話結束后數據也隨之銷毀。因此sessionStorage不是一種持久化的本地存儲，僅僅是會話級別的存儲。
而localStorage用於持久化的本地存儲，除非主動刪除數據，否則數據是永遠不會過期的。

Web storage和cookie的區別

1、Web Storage的概念和cookie相似，區別是它是為了更大容量存儲設計的。Cookie的大小是受限的，並且每次你請求一個新的頁面的時候Cookie都會被發送過去，這樣無形中浪費了帶寬，另外cookie還需要指定作用域，不可以跨域調用。
2、除此之外，Web Storage擁有setItem,getItem,removeItem,clear等方法，不像cookie需要前端開發者自己封裝setCookie，getCookie。
3、但是cookie也是不可以或缺的：cookie的作用是與服務器進行交互，作為HTTP規范的一部分而存在 ，而Web Storage僅僅是為了在本地“存儲”數據而生。