JavaScript / 本地存儲

cookie

　　首先讓咱們先了解一下，什麼是cookie，cookie是瀏覽器提供的一種機制，他將document.cookie的接口提供給JavaScript使其能夠對cookie進行控制，但cookie並非JavaScript自己的屬性，cookie是儲存於用戶硬盤的一個文件（測試的時候在FF測試，其餘瀏覽器不支持直接輸出cookie）

1. cookie的做用

   1. 因爲http協議自己是一個無狀態的通訊協議，因此咱們須要把一些信息經過cookie一塊兒進行傳遞，保證服務器能識別，能夠理解爲cookie是用來加強http協議的部分不足之處
   2. 因爲cookie是存儲於用戶的硬盤上的，因此能夠做爲一個全局變量來使用，這是它最大的一個優勢，能夠根據這個特性來操做如：保存用戶登陸狀態，跟蹤用戶行爲，建立購物車等

2. 使用cookie須要注意的是

   1. cookie具備不可跨域性，不一樣域名下的cookie是不能夠相互獲取的
   2. cookie有大小的限制，大概爲4kb，也就是4096字節
   3. cookie須要設定過時時間，若是不設定的狀況下默認關閉瀏覽器後清除
   4. 瀏覽器自己會限制每一個站點的cookie的數量，大概爲20個cookie
   5. cookie不建議放置太多內容，由於每次都會隨着請求頭一塊兒發送，會影響性能，同時cookie在電腦上是可查看的，因此重要的信息不建議放置在cookie上

3. 接下來是重點了，那麼咱們如何獲取cookie呢?在js中爲咱們提供了這麼一種方法 doucmnet.cookie，返回的是一個字符串，咱們來舉個例子

   <script>
   document.cookie="userName=user" document.cookie="userName=xiaoming" console.log(document.cookie)//userName=xiaoming; suerNmae=xiaoming </script> 

   這就是建立了一個cookie，userName表明cookie的名稱，user表明cookie的值，若是cookie的名稱不存在那麼表明從新建立cookie，若是已經存在，表明爲cookie從新賦值

4. 接下來咱們開始說一下如何設置和獲取以及刪除cookie

   1. 設置cookie，直接上代碼

      <script>
      function setCookie(name,value,expDays){ //name 名字 value 值 expDays 過時時間 //首先設置expDays爲當前時間 var expDate=new Date; //使用setDate的方法爲當前時間加上expDays設置cookie的失效時間 expDate.setDate(expDate.getDate()+expDays); //設置cookie的內容時不能出現空格方，分號等特殊字符，使用escape對內容進行編碼 //經過toUTCString方法把日期轉換爲字符串傳入 document.cookie=name+'='+escape(value)+';expires'+expDate.toUTCString(); } </script> 

   2. 獲取cookie，直接上代碼

      <script>
      function getCookie(name){ //設置初始位置，檢查cookie中有沒有這個name var start=document.cookie.indexOf(name+"="); if(start !=-1){ //若是有的話把strat的位置變爲由'='開始的位置 start=start+name.length+1; //設置cookie截取到的終點位置，到下一個";"爲止 var end=document.cookie.indexOf(";",start); //這裏是爲了判斷若是這個name是cookie的最後一個值的話那麼它的value是沒有";"的，直接到 cookie的結尾位置便可 if(end==-1) end=document.cookie.length; //將cookie的value的值解碼返回 return unescape(document.cookie.substring(start,end)) } //若是該cookie不存在的話直接返回空的字符串 return "" } </script> 

   3. 刪除cookie，這裏須要說一下，cookie的刪除是由瀏覽器執行的，在瀏覽器發現cookie的有效日期已通過期的話會對該條cookie進行刪除操做，下面開始代碼

      <script>
      //直接回調setCookie的方法，而後將cookie的有效時間向前一天 function removeCookie(name){ setCookie(name,"",-1) } </script> 

localStorage,sessionStorage

那麼我接下說一下關於localStorage（本地存儲）和sessionStorage（會話存儲）這兩個都是在HTML5中新增長的屬性，它們將瀏覽器的本地存儲的大小擴大到了5M，並且從IE8以上的瀏覽器都開始支持，localStorage指的是將數據存儲在瀏覽器本地，若是不進行清除那麼數據會一直存在，sessionStorage表示的是會話存儲，若是瀏覽器關閉那麼數據將會被清除，注意傳入的必須是字符串格式的,若是想要寫入的時候更復雜JSON.parse(localStorage.getItem("a"))，那麼相應的導出的時候使用localStorage.setItem("a", JSON.stringify(obj))

在HTML5中，本地存儲是一個window的方法，因此檢測的代碼以下：

if(window.localStorage){ alert('This browser supports localStorage'); }else{ alert('This browser does NOT support localStorage'); } 

這二者的方法，因爲用法比較簡單，因此直接上代碼

<script>
window.localStorage.name="xiaoming";//設置name window.localStorage["name"]="xiaobai";//設置name，注意須要是字符串格式的 localStorage.setItem("name","xiaohong");//設置name console.log(localStorage.name);//最後設置的值覆蓋了以前設置的值 console.log(localStorage["name"]);//也是獲取localStorage的值，不過記的要傳入的是字符串 // localStorage.removeItem("name");//刪除指定的localStorage的屬性值 localStorage.clear();//清除全部localStarge的屬性和值 console.log(localStorage.getItem("name"));//獲取特定的localStorage的值，返回的是null console.log(window.localStorage.name);//undefined //推薦使用的方法，setItem，getItem，removeItem，clear </script> 

在H5中提供了一個key（）方法，用來在不知道鍵和值得狀況下獲取全部的鍵和值，使用方法以下：

<script> var stroage=window.localStorage; function showStorage(){ for(var i=0;i<storage.length;i++){ //key(i)得到相應的鍵，再用getItem()方法得到對應的值 document.write(storage.key(i)+ " : " + storage.getItem(storage.key(i)) + "<br>"); } } </script> 

在H5中新增長了onstorage事件，當本地存儲發生改變時，會觸發該事件

StorageEvent對象的屬性：

• key：表示項目的key發生了變化；該屬性返回其初始化的值，建立對象後，該值被初始化爲null。
• oldValue:表示變動前的值
• newValue:變動後的值
• url:事件觸發源的URL
• source:事件觸發源的URL
• storageArea:受到影響的storage對象

來一段代碼

<script>
window.onstorage = function (event) { var key = event.key // 被修改的鍵名 var oldValue = event.oldValue // 舊的值 var newValue = event.newValue // 新的值 var url = event.url // 觸發改變的網頁的url var storage = event.storageArea // 當前localStorage的引用(當sessionStorage改變時，這裏就是當前sessionStorage的引用，好吧扯遠了，看不懂能夠先無視) } </script> 

if (!window.localStorage) { Object.defineProperty(window, "localStorage", new (function () { var aKeys = [], oStorage = {}; Object.defineProperty(oStorage, "getItem", { value: function (sKey) { return sKey ? this[sKey] : null; }, writable: false, configurable: false, enumerable: false }); Object.defineProperty(oStorage, "key", { value: function (nKeyId) { return aKeys[nKeyId]; }, writable: false, configurable: false, enumerable: false }); Object.defineProperty(oStorage, "setItem", { value: function (sKey, sValue) { if(!sKey) { return; } document.cookie = escape(sKey) + "=" + escape(sValue) + "; expires=Tue, 19 Jan 2038 03:14:07 GMT; path=/"; }, writable: false, configurable: false, enumerable: false }); Object.defineProperty(oStorage, "length", { get: function () { return aKeys.length; }, configurable: false, enumerable: false }); Object.defineProperty(oStorage, "removeItem", { value: function (sKey) { if(!sKey) { return; } document.cookie = escape(sKey) + "=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/"; }, writable: false, configurable: false, enumerable: false }); Object.defineProperty(oStorage, "clear", { value: function () { if(!aKeys.length) { return; } for (var sKey in aKeys) { document.cookie = escape(sKey) + "=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/"; } }, writable: false, configurable: false, enumerable: false }); this.get = function () { var iThisIndx; for (var sKey in oStorage) { iThisIndx = aKeys.indexOf(sKey); if (iThisIndx === -1) { oStorage.setItem(sKey, oStorage[sKey]); } else { aKeys.splice(iThisIndx, 1); } delete oStorage[sKey]; } for (aKeys; aKeys.length > 0; aKeys.splice(0, 1)) { oStorage.removeItem(aKeys[0]); } for (var aCouple, iKey, nIdx = 0, aCouples = document.cookie.split(/\s*;\s*/); nIdx < aCouples.length; nIdx++) { aCouple = aCouples[nIdx].split(/\s*=\s*/); if (aCouple.length > 1) { oStorage[iKey = unescape(aCouple[0])] = unescape(aCouple[1]); aKeys.push(iKey); } } return oStorage; }; this.configurable = false; this.enumerable = true; })()); }

轉載：https://www.jianshu.com/p/2549f5e7629b