本地存儲sessionStorage 、 localStorage 、cookie整理

sessionStorage 、 localStorage 、cookie 的區別

sessionStorage 和 localStorage 是HTML5 Web Storage API 提供的，能夠方便的在web請求之間保存數據。有了本地數據，就能夠避免數據在瀏覽器和服務器間沒必要要地來回傳遞。

sessionStorage、localStorage、cookie都是在瀏覽器端存儲的數據，其中sessionStorage的概念很特別，引入了一個「瀏覽器窗口」的概念。sessionStorage是在同源的同學口（或tab）中，始終存在的數據。也就是說只要這個瀏覽器窗口沒有關閉，即便刷新頁面或進入同源另外一頁面，數據仍然存在。關閉窗口後，sessionStorage即被銷燬。同時「獨立」打開的不一樣窗口，即便是同一頁面，sessionStorage對象也是不一樣的。

Web Storage帶來的好處：減小網絡流量：一旦數據保存在本地後，就能夠避免再向服務器請求數據，所以減小沒必要要的數據請求，減小數據在瀏覽器和服務器間沒必要要地來回傳遞。快速顯示數據：性能好，從本地讀數據比經過網絡從服務器得到數據快得多，本地數據能夠即時得到。再加上網頁自己也能夠有緩存，所以整個頁面和數據都在本地的話，能夠當即顯示。臨時存儲：不少時候數據只須要在用戶瀏覽一組頁面期間使用，關閉窗口後數據就能夠丟棄了，這種狀況使用sessionStorage很是方便。

 

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

瀏覽器端能夠保存一些數據，須要的時候直接從本地獲取，sessionStorage、localStorage和cookie都由瀏覽器存儲在本地的數據。

服務器端也能夠保存全部用戶的全部數據，但須要的時候瀏覽器要向服務器請求數據。1.服務器端能夠保存用戶的持久數據，如數據庫和雲存儲將用戶的大量數據保存在服務器端。2.服務器端也能夠保存用戶的臨時會話數據。服務器端的 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 只要同源的同學口（或tab）中，刷新頁面或進入同源的不一樣頁面，數據始終存在。也就是說只要這個瀏覽器窗口沒有關閉，加載新頁面或從新加載，數據仍然存在。

 

cookie，容量4kb，默認各類瀏覽器都支持，缺陷就是每次請求，瀏覽器都會把本機存的cookies發送到服務器，無形中浪費帶寬。

userdata，只有ie支持，單個容量64kb，每一個域名最多可存10個共計640k數據。默認保存在C:\Documents and Settings\Administrator\UserData\目錄下，保存格式爲xml。

 

sessionStorage與localStorage

Web Storage實際上由兩部分組成：sessionStorage與localStorage。

sessionStorage用於本地存儲一個會話（session）中的數據，這些數據只有在同一個會話中的頁面才能訪問而且當會話結束後數據也隨之銷燬。所以sessionStorage不是一種持久化的本地存儲，僅僅是會話級別的存儲。

localStorage用於持久化的本地存儲，除非主動刪除數據，不然數據是永遠不會過時的。

 

爲何選擇Web Storage而不是Cookie？

與Cookie相比，Web Storage存在很多的優點，歸納爲如下幾點：

1. 存儲空間更大：IE8下每一個獨立的存儲空間爲10M，其餘瀏覽器實現略有不一樣，但都比Cookie要大不少。

2. 存儲內容不會發送到服務器：當設置了Cookie後，Cookie的內容會隨着請求一併發送的服務器，這對於本地存儲的數據是一種帶寬浪費。而Web Storage中的數據則僅僅是存在本地，不會與服務器發生任何交互。

3. 更多豐富易用的接口：Web Storage提供了一套更爲豐富的接口，使得數據操做更爲簡便。

4. 獨立的存儲空間：每一個域（包括子域）有獨立的存儲空間，各個存儲空間是徹底獨立的，所以不會形成數據混亂。