webstorage vs cookie

sessionStorage以及localStorage都是html5定義的api方法。旨在實作本地存儲

先說說sessionStorage以及localStorage之間差別：

localStorage是在浏覽器同源下存儲的，也就是a.com/xx.html以及a.com/xxx.html都共享着各自存儲的内容。除非手工删除其存儲内容否則永遠不會過期。

當你關閉a.com後下次打開隻要沒有删除存儲内容 浏覽器還是會存在存儲内容。

sessionStorage也是在浏覽器同源下存儲的。a.com/xx.html以及a.com/xxx.html同樣共享着各自存儲的内容，

隻不過html5引入了一個浏覽器視窗概念，當設定sessionStorage的視窗未關閉情況下，同源内的其它頁面在這個視窗下也是會共享這個存儲資料，這裡注意是同一個視窗

但是如果這個頁面視窗（或者tab）被關閉其它同源下頁面就不存在這個存儲内容，生命周期也就結束。下次重新打開也不會存在。

共同點：

二者同為Storage對象，提供的方法常用的有getItem、setItem、clear;

getItem可以獲得存儲對象值 localStorage.getItem('xx');也可以用localStorage.xx來替代；

setItem可以設定存儲對象localStorage.setItem("xx",'xxx');也可以用localStorage.xx='xxx'來替代;

removeItem可以删除一條具體資料：localStorage.removeItem('xxx');

clear批量删除所有存儲；

對于object對象可以用JSON.stringfy進行轉化然後存儲，用的時候利用JSON.parse轉化回來使用。

對于圖檔存儲我們可以将圖檔轉化為DataURI格式進行存儲；具體轉化方式可以借用canvas提供的toDataURL

對于webstorage本地存儲各浏覽器支援也是不同，總體來說平均對每個源配置設定的存儲大小大約5M,這對于一般的資料存儲足夠了，

如果為了提高性能來緩存圖檔，一定要注意圖檔大小，及時清理無用的存儲，另外配合緩存來實作最佳性能

cookie:

cookie是所有浏覽器都支援的本地存儲政策，也是基于同源政策進行通路，存儲大小隻有4k，比較适合于小的資料标示用。

在同源請求中會預設進行傳送，也就是說每發一個請求，cookie都會在傳輸過程中作為請求内容進行傳送。

document.cookie預設得到所有cookie；

document.cookie='name=value;expires='+date.toGMTString();增加一條cookie;其中expires辨別為cookie過期時間，即過了這個時間該cookie就不存在了;

delcookie是不存在的，我們可以利用設定expires為一個過期的時間則執行之後該cookie立即消失；

webStorage與cookie差別：

在以上介紹了兩種特點之後，差別也就顯而易見了：

效率：cookie會在http請求中傳送，浪費帶寬，而webStorage隻有在手動添加時候才能進行請求

存儲大小：cookie隻有4k，而webStorage有平均5M的本地存儲；

過期時機：cookie根據expires設定過期時間。webStorage在浏覽器視窗關閉或者始終有效（靠手動進行删除）

共享方式：cookie在同源下隻要沒過期就會一直共享，localStorage在同源中沒被删除情況也會共享。sessionStorage在視窗關閉之前在同一個視窗同源下才能共享

總結：

webStorage相比于cookie有着更明顯的優勢。在存儲效率上可以減少請求帶寬、存儲大小更容易滿足我們一般資料處理、過期時機容易在人工操作下主觀的去管理、共享方式更是根據業務選擇面比較大；

缺點就是低版本浏覽器不支援，是以如果我們不确定使用者浏覽器是否支援情況下可以進行相容的封裝本地存儲。網上一大堆。。不再贅述！