Web Storage 與cookies

Web Storage介紹

Web Storage帶來的好處

• 減小網絡流量：一旦數據保存在本地後，就能夠避免再向服務器請求數據，所以減小沒必要要的數據請求，減小數據在瀏覽器和服務器間沒必要要地來回傳遞。快速顯示數據

• 性能好，從本地讀數據比經過網絡從服務器得到數據快得多，本地數據能夠即時得到。再加上網頁自己也能夠有緩存，所以整個頁面和數據都在本地的話，能夠當即顯示。

• 臨時存儲：不少時候數據只須要在用戶瀏覽一組頁面期間使用，關閉窗口後數據就能夠丟棄了，這種狀況使用sessionStorage很是方便

• essionStorage和localStorage不會自動把數據發給服務器，僅在本地保存。sessionStorage和localStorage雖然也有存儲大小的限制，但比cookie大得多，能夠達到5M或更大

• Web Storage 支持事件通知機制，能夠將數據更新的通知發送給監聽者。Web Storage 的 api 接口使用更方便

Web Storage

HTML5 提供了兩種在客戶端存儲數據的新方法==localStorage==和==sessionStorage==

localStorage

用於本地存儲一個會話（session）中的數據，這些數據只有在同一個會話中的頁面才能訪問而且當會話結束後數據也隨之銷燬
sessionStorage
用於持久化的本地存儲，除非主動刪除數據，不然數據是永遠不會過時的

localStorage和sessionStorage都具備相同的操做方法

setItem存儲value

用途：將value存儲到key字段
用法：.setItem( key, value)
代碼示例：

sessionStorage.setItem("key", "value");     localStorage.setItem("site", "js8.in");

getItem獲取value

用途：獲取指定key本地存儲的值
用法：.getItem(key)
代碼示例：

var value = sessionStorage.getItem("key");     var site = localStorage.getItem("site");

removeItem刪除key

用途：刪除指定key本地存儲的值
用法：.removeItem(key)
代碼示例：

sessionStorage.removeItem("key");     localStorage.removeItem("site");

clear清除全部的key/value

用途：清除全部的key/value
用法：.clear()
代碼示例：

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

sessionStorage和localStorage的有效期和數據

做用域

做用域不一樣，sessionStorage不在不一樣的瀏覽器窗口中共享，即便是同一個頁面；localStorage 在全部同源窗口中都是共享的

有效期

數據有效期不一樣，sessionStorage：僅在當前瀏覽器窗口關閉前有效，天然也就不可能持久保持；localStorage：始終有效，窗口或瀏覽器關閉也一直保存，所以用做持久數據

cookie介紹

cookies：

存儲在用戶本地終端上的數據。有時也用cookies，指某些網站爲了辨別用戶身份，進行session跟蹤而存儲在本地終端上的數據，一般通過加密。通常應用最典型的案列就是判斷註冊用戶是否已經登過該網站

cookie數據始終在同源的http請求中攜帶（即便不須要），即cookie在瀏覽器和服務器間來回傳遞；cookie數據還有路徑（path）的概念，能夠限制cookie只屬於某個路徑下。存儲大小限制也不一樣，cookie數據不能超過4k，同時由於每次http請求都會攜帶cookie，因此cookie只適合保存很小的數據，如會話標識
#### cookies 使用
cookies 須要一個簡單是靜態服務器來作開發環境，nodejs、python、php這些都有一句話起一個靜態服務器的工具。
cookies的使用須要本身封裝插件
感興趣的朋友能夠用看看這個cookies插件
https://github.com/hxj886600/...