在使用網(wǎng)站時(shí)，是否遇過(guò)打開以前登錄過(guò)的登錄頁(yè)面，賬號(hào)已經(jīng)自動(dòng)填充；微博寫文章時(shí)不小心關(guān)閉頁(yè)面再打開，之前書寫的內(nèi)容還在；之前看到一半的視頻重新打開后繼續(xù)播放...這些功能的實(shí)現(xiàn)就需要本地儲(chǔ)存，即常說(shuō)的Cookie，以及H5中新提供的localstorage/sessionstorage。

JS里的Cookie

首先了解其特性：

1. 在服務(wù)環(huán)境下；
2. 存儲(chǔ)在用戶的本地機(jī)器上（臨時(shí)且不安全）；
3. 過(guò)期時(shí)間：默認(rèn)session——會(huì)話期間有效，在會(huì)話結(jié)束、瀏覽器關(guān)閉后消失；
4. 容量：4K左右，有些瀏覽器甚至有條數(shù)限制；
5. 格式：其值均保存為string類型。

保存Cookie

  document.cookie = `${name} = ${value}; path = /; expires = ${time}`;
  //name——名稱;value——內(nèi)容;path——保存路徑;expires——過(guò)期時(shí)間

需要注意的是

1. path保存的路徑最好指定為/，意指根目錄，通常一個(gè)網(wǎng)站只用一套Cookie，而path在默認(rèn)保存到當(dāng)前目錄時(shí)，子級(jí)能讀取上級(jí)目錄的Cookie，而上級(jí)目錄卻無(wú)法讀取子級(jí)的Cookie；
2. value，既然Cookie里存的都是字符串，那么存的時(shí)候就明確的寫成字符串，避免系統(tǒng)做對(duì)應(yīng)的類型轉(zhuǎn)換，另外，Cookie里不能存中文，若需要?jiǎng)t進(jìn)行轉(zhuǎn)碼；
3. expires的值為一個(gè)日期對(duì)象，但是Cookie里保存的數(shù)據(jù)類型為string，所以我們需要一個(gè)方法保存這種格式：

oDate.toUTCString();

讀取Cookie

同樣是document.cookie，但此時(shí)讀取的Cookie包含所有內(nèi)容，若需要單獨(dú)某條，就需要字符串方法進(jìn)行處理：

function getCookie(name){
    var arr = document.cookie.split('; ');
    for(var i = 0; i < arr.length; i++){
        var arr2 = arr[i].split('=');
        if(name == arr2[0]){
            return arr2[1];
        }
    }
    return '';
}

修改與刪除

修改Cookie的話通過(guò)再次添加同名Cookie就行了；
刪除Cookie可以直接去瀏覽器設(shè)置里清除瀏覽器數(shù)據(jù)最為暴力，也可以在控制臺(tái)尋找Cookie欄右鍵刪除選中數(shù)據(jù)，若要代碼實(shí)現(xiàn)的話，可以修改其過(guò)期時(shí)間，這意味著其值可以是過(guò)去的時(shí)間。

JQuery插件jquery.cookie.js

保存Cookie的方法為：

  $.cookie(`${name}`, `${value}`,{
        expires:1,
        path:`/`
    })

需要注意的是：

1. 根據(jù)Cookie數(shù)據(jù)類型為string的特性，如保存數(shù)據(jù)為json時(shí)，應(yīng)寫為'{a: 1, b: 2}'，若是{a: 1, b: 2}，讀取則為'object object'；
2. 這里指定天數(shù)，會(huì)與正常時(shí)間相差8小時(shí)，其值也能設(shè)置為日期對(duì)象，另外，天數(shù)可以為設(shè)置為負(fù)數(shù)，即刪除該條Cookie。
3. 其他用法與原生相似。

Cookie與LocalStorage

H5新提供的LocalStorage與SessionStorage比起Cookie有了更多新的特性，在用法上也有不少差異，而且由于是H5的新內(nèi)容所以只兼容IE8及以上版本瀏覽器，所以兩者在實(shí)際運(yùn)用中各有其優(yōu)勢(shì)。