前端存儲

在前端開發當中,有時會由於某些需求,要將一些數據存儲在前端本地當中。不一樣的場景、不一樣的應用，咱們對存儲的選擇也不同，前端常見的存儲包括如下5種：

• cookie：在HTML5標準前，本地存儲的主要方式。優勢是兼容性好，請求頭自帶cookie，方便。缺點是大小隻有4k，自動請求頭加入cookie浪費流量，每一個domain（域名）限制20個cookie，使用起來麻煩，須要自動封裝。
• localStorage：HTML5加入的以鍵值對爲標準的存儲方式。優勢是操做方便，永久性存儲（除非手動刪除），大小爲5M，兼容IE8+。
• sessionStorage：與localStorage基本相似，區別是sessionStorage頁面關閉後會被清理，而且，是會話級別的存儲，不能再其餘同源窗口中共享。
• webSQL：2010年被W3C廢棄的本地數據存儲方案，但主流瀏覽器都已經有了相關的實現
• indexedDB：是被正式歸入HTML5標準的數據存儲方案。它是NoSQL數據庫，用鍵值對進行存儲，能夠進行快速讀取操做，適合web場景。

cookie

cookie是純文本，沒有可執行代碼。當網頁要發http請求時，瀏覽器會先檢查是否有相應的cookie，有則自動添加在request header中的cookie字段中。這樣存儲在cookie中的數據，每次都會被瀏覽器自動放在http請求中，若是這些數據並非每一個請求都須要發給服務端的數據，瀏覽器這設置自動處理無疑增長了網絡開銷；但若是這些數據是每一個請求都須要發給服務端的數據（好比身份認證信息），瀏覽器這設置自動處理就大大免去了重複添加操做。

設置和修改

 

 在設置和修改cookie的時候，除了添加名字和屬性值，還能夠添加expires（過時時間,，默認會話結束）、domain（生效域名）、path（路徑，默認當前頁面）、secure（類型）。

修改cookie的時候，只須要從新賦值就能夠了，可是在設置新cookie時，path/domain這幾個選項必定要舊cookie 保持同樣。不然不會修改舊值，而是添加了一個新的 cookie。

獲取

document.cookie 將以字符串的方式返回全部的 cookie，類型格式： cookie1=value; cookie2=value; cookie3=value;

刪除

刪除cookie很是簡單，只須要修改expires參數爲之前的時間便可。

 JavaScript cookie實例

function setCookie(cname,cvalue,exdays){
                var d = new Date();
                d.setTime(d.getTime()+(exdays*24*60*60*1000));
                var expires = "expires="+d.toGMTString();
                document.cookie = cname+"="+cvalue+"; "+expires;
            }
            function getCookie(cname){
                var name = cname + "=";
                var ca = document.cookie.split(';');
                for(var i=0; i<ca.length; i++) {
                    var c = ca[i].trim();
                    if (c.indexOf(name)==0) { return c.substring(name.length,c.length); }
                }
                return "";
            }
            setCookie('title','建立cookie',5);
            setCookie('user','未知用戶',5);
            console.log(getCookie('title'));
            console.log(getCookie('user'));

 

 須要注意的是，cookie的存儲是以域名形式進行區分的，不一樣的域下存儲的cookie是獨立的。一個域名下存放的cookie的個數是有限制的，不一樣瀏覽器存放的個數不同，通常爲20個。每一個cookie存放的內容大小也有限制，通常爲4KB。

localStorage

localStorage能夠存儲k-v形式的數據。存儲的值須要是字符串類型，無法直接存儲對象，可是能夠將對象序列化爲字符串再存入。

設置和修改（setItem）

 

 獲取（getItem）

 

 

 刪除（removeItem）

 

清空

 

 sessionStorage

sessionStorage的使用同localStorage相似

 三者異同

	存儲大小	有效期	HTTP請求
cookie	4KB	能夠設置失效，默認關閉瀏覽器後失效	每次都會攜帶在HTTP請求頭中，存儲過多數據，會帶來性能問題
localStorage	5MB	除非被手動清除，不然將會永久保存	僅在客戶端（瀏覽器）中保存
sessionStorage	5MB	僅在當前網頁會話下有效，關閉網頁或者瀏覽器後就會被清除	僅在客戶端（瀏覽器）中保存

 webSQL和IndexedDB

如今官網已經中止維護webSQL了，轉爲維護indexeddb。因爲webSQL的兼容性很好，而indexeddb的在移動端的兼容性不太好，因此一般會替代使用。

indexeddb和webSQL的存儲時間也是永久的，除非用戶手動清除數據，能夠用於長效存儲。