今天總結(jié)前端數(shù)據(jù)存儲(chǔ)的幾種方式
- cookie
- session
- sessionStorage
- localStorage
首先我們來(lái)說(shuō)cookie和session的區(qū)別
保存狀態(tài)：
cookie保存在瀏覽器端
session保存在服務(wù)器端存儲(chǔ)內(nèi)容：
cookie只能保存字符串類(lèi)型，以文本的方式待诅；
session通過(guò)類(lèi)似與Hashtable的數(shù)據(jù)結(jié)構(gòu)來(lái)保存颈走，能支持任何類(lèi)型的對(duì)象(session中可含有多個(gè)對(duì)象)存儲(chǔ)的大小：
cookie：?jiǎn)蝹€(gè)cookie保存的數(shù)據(jù)不能超過(guò)4kb咱士，很多瀏覽器都限制一個(gè)站點(diǎn)最多保存20個(gè)cookie；
session大小沒(méi)有限制轧钓。安全性：
cookie：針對(duì)cookie所存在的攻擊：Cookie欺騙序厉，Cookie截獲；
session的安全性大于cookie毕箍。應(yīng)用場(chǎng)景：
cookie：
（1）判斷用戶(hù)是否登陸過(guò)網(wǎng)站弛房，以便下次登錄時(shí)能夠?qū)崿F(xiàn)自動(dòng)登錄（或者記住密碼）。如果我們刪除cookie而柑，則每次登錄必須從新填寫(xiě)登錄的相關(guān)信息文捶。（不推薦，有安全性問(wèn)題）
（2）保存上次登錄的時(shí)間等信息媒咳。
（3）保存上次查看的頁(yè)面
（4）瀏覽計(jì)數(shù)
（5）一些信息
session：
Session用于保存每個(gè)用戶(hù)的專(zhuān)用信息粹排，變量的值保存在服務(wù)器端，通過(guò)SessionID來(lái)區(qū)分不同的客戶(hù)涩澡。
⊥缍（1）網(wǎng)上商城中的購(gòu)物車(chē)
（2）保存用戶(hù)登錄信息
∶钔（3）將某些數(shù)據(jù)放入session中射富，供同一用戶(hù)的不同頁(yè)面使用
（4）防止用戶(hù)非法登錄
cookie和session的聯(lián)系
session是通過(guò)cookie來(lái)工作的
容器通過(guò)瀏覽器端傳送的cookie中的sessionid來(lái)區(qū)分不同的客戶(hù)對(duì)象粥帚，所以Session依賴(lài)于cookie胰耗。
cookie和session各自的缺點(diǎn)
cookie：
（1）大小受限
（2）用戶(hù)可以操作（禁用）cookie，使功能受限
（3）安全性較低
（4）有些狀態(tài)不可能保存在客戶(hù)端芒涡。
（5）每次訪(fǎng)問(wèn)都要傳送cookie給服務(wù)器柴灯，浪費(fèi)帶寬卖漫。
（6）cookie數(shù)據(jù)有路徑（path）的概念，可以限制cookie只屬于某個(gè)路徑下弛槐。
session：
（1）Session保存的東西越多懊亡，就越占用服務(wù)器內(nèi)存，對(duì)于用戶(hù)在線(xiàn)人數(shù)較多的網(wǎng)站乎串，服務(wù)器的內(nèi)存壓力會(huì)比較大店枣。
（2）依賴(lài)于cookie（sessionID保存在cookie），如果禁用cookie叹誉，則要使用URL重寫(xiě)鸯两，不安全
（3）創(chuàng)建Session變量有很大的隨意性，可隨時(shí)調(diào)用长豁，不需要開(kāi)發(fā)者做精確地處理钧唐，所以，過(guò)度使用session變量將會(huì)導(dǎo)致代碼不可讀而且不好維護(hù)匠襟。
WebStroage
HTML5的WebStorage提供了兩種API：
localStorage（本地存儲(chǔ)）
sessionStorage（會(huì)話(huà)存儲(chǔ)）
localStroage和sessionStroage的區(qū)別
-
生命周期：
localStorage的生命周期是永久的钝侠，關(guān)閉頁(yè)面或?yàn)g覽器之后localStorage中的數(shù)據(jù)也不會(huì)消失。localStorage除非主動(dòng)刪除數(shù)據(jù)酸舍，否則數(shù)據(jù)永遠(yuǎn)不會(huì)消失帅韧。
sessionStorage的生命周期是在僅在當(dāng)前會(huì)話(huà)下有效。
-
存儲(chǔ)大锌忻恪：
localStorage和sessionStorage的存儲(chǔ)數(shù)據(jù)大小一般都是：5MB
-
存儲(chǔ)位置：
localStorage和sessionStorage都保存在客戶(hù)端忽舟，不與服務(wù)器進(jìn)行交互通信。
-
存儲(chǔ)內(nèi)容類(lèi)型：
localStorage和sessionStorage只能存儲(chǔ)字符串類(lèi)型淮阐，對(duì)于復(fù)雜的對(duì)象可以使用ECMAScript提供的JSON對(duì)象的stringify和parse來(lái)處理
-
獲取方式：
localStorage：window.localStorage;叮阅；
sessionStorage：window.sessionStorage;。 -
應(yīng)用場(chǎng)景：
localStoragese：常用于長(zhǎng)期登錄（+判斷用戶(hù)是否已登錄）泣特，適合長(zhǎng)期保存在本地的數(shù)據(jù)浩姥。
sessionStorage：敏感賬號(hào)一次性登錄；
WebStroage的優(yōu)點(diǎn)
（1）存儲(chǔ)空間更大：cookie為4KB状您，而WebStorage是5MB及刻；
（2）節(jié)省網(wǎng)絡(luò)流量：WebStorage不會(huì)傳送到服務(wù)器，存儲(chǔ)在本地的數(shù)據(jù)可以直接獲取竞阐，也不會(huì)像cookie一樣美詞請(qǐng)求都會(huì)傳送到服務(wù)器缴饭，所以減少了客戶(hù)端和服務(wù)器端的交互，節(jié)省了網(wǎng)絡(luò)流量骆莹；
（3）對(duì)于那種只需要在用戶(hù)瀏覽一組頁(yè)面期間保存而關(guān)閉瀏覽器后就可以丟棄的數(shù)據(jù)颗搂，sessionStorage會(huì)非常方便；
（4）快速顯示：有的數(shù)據(jù)存儲(chǔ)在WebStorage上幕垦，再加上瀏覽器本身的緩存丢氢。獲取數(shù)據(jù)時(shí)可以從本地獲取會(huì)比從服務(wù)器端獲取快得多傅联，所以速度更快；
（5）安全性：WebStorage不會(huì)隨著HTTP header發(fā)送到服務(wù)器端疚察，所以安全性相對(duì)于cookie來(lái)說(shuō)比較高一些蒸走，不會(huì)擔(dān)心截獲，但是仍然存在偽造問(wèn)題貌嫡；
（6）WebStorage提供了一些方法比驻，數(shù)據(jù)操作比cookie方便；
setItem (key, value) —— 保存數(shù)據(jù)岛抄，以鍵值對(duì)的方式儲(chǔ)存信息别惦。
getItem (key) —— 獲取數(shù)據(jù)，將鍵值傳入夫椭，即可獲取到對(duì)應(yīng)的value值掸掸。
removeItem (key) —— 刪除單個(gè)數(shù)據(jù)，根據(jù)鍵值移除對(duì)應(yīng)的信息蹭秋。
clear () —— 刪除所有的數(shù)據(jù)
key (index) —— 獲取某個(gè)索引的key
另附一張cookie和WebStroage的對(duì)比表格
