JS基礎——Cookie與儲存

標籤：web前端   javascript   cookie   

一、Cookie是什麼
Cookie是一種用戶端（瀏覽器）把使用者資訊以檔案形式儲存到本地硬碟的技術，說白了就是一種瀏覽器技術

二、Cookie的作用
Cookie的作用很單一，就是儲存客戶資料。（儲存資料的檔案叫Cookie檔案）

三、Cookie與變數的區別
變數：資料是儲存到記憶體中的，是一種暫時儲存（一關瀏覽器就沒了）
Cookie:資料是儲存到Cookie檔案中的（硬碟），是一種長期儲存（即使關了瀏覽器還存在）

四、Cookie的注意事項
1、不同瀏覽器存放Cookie的位置不同，也是不能通用的
2、Cookie檔案的儲存以網域名稱形式進行區分的
3、Cookie的資料可以設定名字（為了儲存大量資料和方便操作這些資料）
4、一個網域名稱下存放Cookie的數量是有限的，而不同瀏覽器存放的個數不同
5、每個cookie存放的內容大小也是有限的，而不同瀏覽器存放內容大小不同

五、從Cookie中擷取資料

文法格式：

document.cookie  //name=leo; age=32

我們通過document.cookie來擷取當前網域名稱下的cookie時候，得到的是一個字串類型的值，它包含了當前網域名稱下的所有cookie。所有cookie通過一個分號+空格串連起來

六、向Cookie中寫入資料
文法格式：

document.cookie = 'username=leo';document.cookie = 'age=17';

七、Cookie長期儲存資料
如果Cookie要長時間儲存資料，需要在寫入Cookie時同時給它設定一個到期時間
文法格式：document.cookie = ‘username=leo；expires=‘ + 時間;
注意：Cookie檔案預設是臨時儲存的，當瀏覽器關閉時自動銷毀。

var oDate = new Date();oDate.setDate(oDate.getDate() + 5);document.cookie = 'username=leo；expires=' +oDate;

八、IE相容問題
上面這種Cookie長期儲存資料，在ie中有相容性問題。
原因：oDate是object類型，而cookie中要求oDate必須是字串
解決：把oDate轉化成string類型

var oDate = new Date();oDate.setDate(oDate.getDate() + 5);document.cookie = 'username=leo；expires=' +oDate.toGMTString();

九、儲存特殊字元問題
問題：在Cookie儲存特殊字元的時候（例如：中文、逸出字元等），儲存不了特殊字元
解決：內容最好編碼存放（encodeURI編碼，decodeURI解碼）

var oDate = new Date();oDate.setDate(oDate.getDate() + 5);document.cookie = 'username='+encodeURI('你好嗎')+'；expires=' +oDate.toGMTString();alert(decodeURI(document.cookie));

十、封裝讀取單個Cookie值的方法
由於document.cookie擷取的是該網站下的所有cookie值，為了能夠擷取所需的那個值，我們必須自己封裝函數。

//讀取Cookie的方法function getCookie(key){        var arr1 = document.cookie.split('; ');        for(var i=0;i<arr1.length;i++){                var arr2 = arr1[i].split('=');                if(arr2[0] == key){                        return decodeURI(arr2[1]);                }        }}

十一、封裝寫入Cookie的方法

function setCookie(key,value,t){        var oDate = new Date();        oDate.setDate(oDate.getDate() + t);        document.cookie = key + '=' + encodeURI(value) + ';expire=' + oDate.toGMTString();}

JS基礎——Cookie與儲存