## 前言 也許你已經使用過cookie,session，但有可能不了解其原理以及特性，andweb存儲還有其他的方案，通過該文檔你將獲知所有的web存儲類型各自的語法以及特征。 ## cookie ### 描述 * 一般情況下只有用戶的token會保存到cookie中，其他的保存到會話中即可。 * 大小限制只有4k * 一般情況下不建議放大數據，因為這部分會隨著http交互傳接，影響性能 * 一般情況下存儲的是純文本，對象需要序列化之后才可以存儲，解析需要反序列化，其中最常見的是json的對象以及字符串的互相轉換。 * 最早作為http拓展協議的一部分，是指web瀏覽器存儲的少量數據。 ### 原生方法 請參考js-js常用技術-jscookie的自定義方法，你將獲得setCookie(name, value)；delCookie(name)；getCookie(name)三個基本方法。 ### js封裝方法 github地址：https://github.com/js-cookie/js-cookie<br> 直接引入：<script src="/path/to/js.cookie.js"></script> 基本語法： * 創建： Cookies.set('name', 'value'); * 創建7天有效期： Cookies.set('name', 'value', { expires: 7 });; * 創建指定路徑有效的： Cookies.set('name', 'value', { expires: 7, path: '' }); * 讀取單獨：Cookies.get('name'); // => 'value'; * 讀取所有：Cookies.get(); // => { name: 'value' }; * 刪除指定： Cookies.remove('name');// => true 錯誤的返回false ### jq封裝方法 github地址：https://github.com/carhartl/jquery-cookie<br> 直接引入：<script src="/path/to/jquery.cookie.js"></script> 基本語法： * 創建： $.cookie('name', 'value'); * 創建7天有效期：$.cookie('name', 'value', { expires: 7 }); * 創建指定路徑有效的：$.cookie('name', 'value', { expires: 7, path: '/' }); * 讀取單獨：$.cookie('name'); // => "value" * 讀取所有：$.cookie(); // => { "name": "value" } * 刪除指定：$.removeCookie('name'); // => true 錯誤的返回false ## webStroage * 描述 在window對象上定義了兩個屬性，分別是localStroage,以及sessionStroage,這兩個屬性都代表同一個Stroage對象，一個持久化的關聯數組。 * 語法（localStroage,以及sessionStroage語法公用的） ~~~ var name=localStroage.username; name=localStroage["username"];//等同于數組的表示法 if(!name){ name=promt("what is your name"); localStroage.username=name; } //迭代讀取存儲 for( var name in localStroage){ var value=localStroage[name]; } ~~~ * 存儲api ~~~ setItem(name,value) getItem(name) removeItem(name); clear() //清除所有 ~~~ ## localStroage * 描述 localStorage用于持久化的本地存儲，除非主動刪除數據，否則數據是永遠不會過期的。 * 作用域 作用域限定在文檔源，文檔源通過協議，主機名以及端口確定的；也受瀏覽器廠商的限制 * 有效期 永久性的，除非應用特意刪除，否則一直保存在用戶的電腦上，永不過期 ## sessionStroage * 描述 sessionStorage用于本地存儲一個會話（session）中的數據，這些數據只有在同一個會話中的頁面才能訪問并且當會話結束后數據也隨之銷毀。因此sessionStorage不是一種持久化的本地存儲，僅僅是會話級別的存儲 * 作用域 與localStroage基本相同，并且不同標簽頁的數據也是不可公用的 * 有效期 頂層窗口的標簽頁，關閉就失效，如果一個頁面有兩個并列的iframe，那么這兩個是可以互相通訊的。 ## 對比 Web Storage的概念和cookie相似，區別是它是為了更大容量存儲設計的。Cookie的大小是受限的，并且每次你請求一個新的頁面的時候Cookie都會被發送過去，這樣無形中浪費了帶寬，另外cookie還需要指定作用域，不可以跨域調用。 除此之外，Web Storage擁有setItem,getItem,removeItem,clear等方法，不像cookie需要前端開發者自己封裝setCookie，getCookie。但是Cookie也是不可以或缺的：Cookie的作用是與服務器進行交互，作為HTTP規范的一部分而存在 ，而Web Storage僅僅是為了在本地“存儲”數據而生。 ## 其他 ### 用戶緩存的更新 ### 離線的web應用