摘要：說(shuō)一說(shuō)常用得本地存儲(chǔ)方法這個(gè)東西我覺(jué)得對(duì)于前端來(lái)講都不會(huì)很陌生，瀏覽器都會(huì)支持在最初得時(shí)候適用于客戶端存儲(chǔ)會(huì)話信息用的，在我們發(fā)送請(qǐng)求得時(shí)候，響應(yīng)頭會(huì)包含此次會(huì)話得會(huì)話信息返回給客戶端，瀏覽器回存儲(chǔ)這樣得會(huì)話信息并且在本地有了之后，每次發(fā)送

說(shuō)一說(shuō)常用得本地存儲(chǔ)方法

cookie

localStorage

sessionStorage

cookie這個(gè)東西我覺(jué)得對(duì)于前端來(lái)講都不會(huì)很陌生，瀏覽器都會(huì)支持cookie
HTTP cookie 在最初得時(shí)候適用于客戶端存儲(chǔ)會(huì)話信息用的，在我們發(fā)送http請(qǐng)求得時(shí)候
，響應(yīng)頭會(huì)包含此次會(huì)話得會(huì)話信息返回給客戶端，瀏覽器回存儲(chǔ)這樣得會(huì)話信息

并且在本地有了cookie之后，每次發(fā)送請(qǐng)求都會(huì)把信息發(fā)送回服務(wù)器

cookie 得設(shè)置很簡(jiǎn)單，直接document.cookie賦值就可以，一般情況下cookie得存儲(chǔ)格式是

document.cookie = "名字=值";

然后里邊可以附帶一些選項(xiàng)是選填得

expires

domain

path

secure

expires是設(shè)置cookie得過(guò)期時(shí)間得，如果沒(méi)有設(shè)置expires的話，默認(rèn)是當(dāng)前得會(huì)話，即關(guān)閉瀏覽器后cookie失效

domain是指定了cookie將要被發(fā)送得域，默認(rèn)是創(chuàng)建了這個(gè)cookie得域名

path顧名思義，路徑，就是說(shuō)在請(qǐng)求的時(shí)候，url里邊必須要存在這個(gè)路徑，才會(huì)發(fā)送cookie這個(gè)消息頭

secure，這個(gè)選項(xiàng)是一個(gè)標(biāo)記，不用賦值，這個(gè)標(biāo)記代表著只有通過(guò)https創(chuàng)建得請(qǐng)求才能被發(fā)送到服務(wù)器

上邊講了cookie得創(chuàng)建，那么修改得話是不是和創(chuàng)建一樣呢，答案是否定得，
cookie并不能像變量一樣隨意得修改賦值。

想要改變cookie得值得話，首先要確定之前講的四個(gè)選項(xiàng)中domain和path都是相同得才可以
，其中有一個(gè)不同得時(shí)候都會(huì)創(chuàng)建出一個(gè)新的cookie比如說(shuō)

    Set-Cookie:name=aa; domain=aaa.net; path=/
        
Set-Cookie:name=aa; domain=aaa.net; path=/xxx

這樣的話并不會(huì)修改之前得cookie ，只會(huì)創(chuàng)建一個(gè)新的cookie，再比如說(shuō)

Set-Cookie:name=aa; domain=aa.net; path=/

Set-Cookie:name=bb; domain=aa.net; path=/

上邊這種得話是會(huì)把之前得cookie修改掉的

還有一個(gè)cookie得刪除

在之前我們說(shuō)到了在這四個(gè)選項(xiàng)之中有一個(gè)過(guò)期時(shí)間，最常用的方法就是給cookie設(shè)置一個(gè)過(guò)期的事件，這樣cookie會(huì)被瀏覽器刪除，

當(dāng)然也存在其他的刪除情況，比如說(shuō)瀏覽器被關(guān)閉，或者說(shuō) cookie超出限制，這個(gè)限制根據(jù)不同的瀏覽器，數(shù)量也不一樣，一般都是20個(gè)

cookie常常被用來(lái)跟蹤用戶信息，或者校驗(yàn)用戶身份等等，在cookie里邊放一些敏感的信息是很不明智的，因?yàn)閏ookie是明文傳輸，很容易被別有用心的人利用

另外cookie本身的話，不是那種真正意義上的本地存儲(chǔ)，因?yàn)閏ookie的大小最大只有4kb大

上邊有提到cookie的大小問(wèn)題，在html5的時(shí)候，就出現(xiàn)了sessionStorage和localStorage

sessionStorage和localStorage 都受到同源策略限制，就是跨域問(wèn)題，在訪問(wèn)sessionStorage和localStorage 的時(shí)候，頁(yè)面必須在同一個(gè)域名，使用同一個(gè)協(xié)議，并且一個(gè)端口

sessionStorage在使用中有很嚴(yán)格的要求，他在一個(gè)tab頁(yè)里邊不能被另一個(gè)tab頁(yè)使用

應(yīng)用的場(chǎng)景有，比如說(shuō)我們都制動(dòng)，在頁(yè)面刷新的時(shí)候，我們寫(xiě)的js里邊的變量函數(shù)等等的，內(nèi)存會(huì)被釋放掉，那么這個(gè)時(shí)候可以用sessionStorage來(lái)存儲(chǔ)一些不想被釋放掉內(nèi)存的數(shù)據(jù)，比如說(shuō)記錄一個(gè)滾動(dòng)條的位置，或者播放器的進(jìn)度等等

sessionStorage會(huì)在標(biāo)簽頁(yè)被關(guān)閉的時(shí)候唄清空

sessionStorage和localStorage 也有大小限制，相比cookie就大了很多，是5M

現(xiàn)在說(shuō)一說(shuō)這個(gè)localStorage，剛才又說(shuō)到sessionStorage是不可以跨頁(yè)的，那么這個(gè)限制，對(duì)于我來(lái)講我感覺(jué)叫他本地存儲(chǔ)是有點(diǎn)牽強(qiáng)的，下邊要說(shuō)的這個(gè)localStorage，他和sessionStorage有些不同，他可以進(jìn)行跨頁(yè)讀取，并且他是一個(gè)真正的本地存儲(chǔ)，他并不會(huì)因?yàn)闉g覽器的關(guān)閉而清除數(shù)據(jù)，如果你不進(jìn)行手動(dòng)清除的話，他是會(huì)一直存在的

storage事件是可以跨頁(yè)面通訊的，在你對(duì)storage對(duì)象進(jìn)行任何操作的時(shí)候，都會(huì)出發(fā)storage事件

事件里邊包括

domain：發(fā)生變化的存儲(chǔ)空間的域名

key：設(shè)置或者刪除的鍵名

newValue：如果是設(shè)置值，則是新值；如果是刪除鍵，則是null

oldValue：鍵被更改之前的值

那么，在上邊說(shuō)了這么多屁話之后，他到底是怎么用的呢。

常用的api 有

setItem("name","val")

上邊這個(gè)setItem是storage的一個(gè)方法用來(lái)存儲(chǔ)數(shù)據(jù)，第一個(gè)變量是鍵，第二個(gè)變量是存儲(chǔ)得值

也可以直接用屬性名稱賦值 比如說(shuō)

sessionStorage.name="123"

同理取值，相比也能猜出來(lái)了

    
getItem("name")

只需要傳一個(gè)鍵名進(jìn)去就可以取到對(duì)應(yīng)得值

同理也可以直接去點(diǎn)屬性名稱

sessionStorage.name

需要注意得是 storage只能存儲(chǔ)字符串，如果是對(duì)象或者數(shù)組等等其他數(shù)據(jù)類型得時(shí)候需要轉(zhuǎn)譯一下才可以存儲(chǔ)

以上是對(duì)前端常用本地存儲(chǔ)得一些認(rèn)識(shí)，當(dāng)然還有前端數(shù)據(jù)庫(kù)比如說(shuō)indexedDB Web SQL 等等，這些會(huì)在下次得時(shí)候介紹給大家，有不足之處，希望支出