一、前言

學(xué)習(xí)前端的可以關(guān)注網(wǎng)頁制作web前端部落哦，每天更新干貨荠割。web前端技術(shù)日新月異，對(duì)于瀏覽器的存儲(chǔ)來說旺矾，cookie存儲(chǔ)數(shù)據(jù)的功能已經(jīng)很難滿足開發(fā)所需蔑鹦，逐漸被WebStorage所取代，本文主要介紹Cookie,WebStorage和IndexDB之間差異箕宙。

二嚎朽、Cookie

1.Cookie的來源

因?yàn)?b>HTTP協(xié)議是無狀態(tài)的，HTTP 協(xié)議自身不對(duì)請(qǐng)求和響應(yīng)之間的通信狀態(tài)進(jìn)行保存柬帕，通俗來說哟忍，服務(wù)器不知道用戶上一次做了什么狡门，這嚴(yán)重阻礙了交互式Web應(yīng)用程序的實(shí)現(xiàn)。在典型的網(wǎng)上購(gòu)物場(chǎng)景中锅很，用戶瀏覽了幾個(gè)頁面其馏，買了一盒餅干和兩瓶飲料。最后結(jié)帳時(shí)爆安，由于HTTP的無狀態(tài)性叛复，不通過額外的手段，服務(wù)器并不知道用戶到底買了什么扔仓，于是就誕生了Cookie褐奥。它就是用來繞開HTTP的無狀態(tài)性的“額外手段”之一。服務(wù)器可以設(shè)置或讀取Cookies中包含信息翘簇，借此維護(hù)用戶跟服務(wù)器會(huì)話中的狀態(tài)撬码。

在剛才的購(gòu)物場(chǎng)景中，當(dāng)用戶選購(gòu)了第一項(xiàng)商品版保，服務(wù)器在向用戶發(fā)送網(wǎng)頁的同時(shí)耍群，還發(fā)送了一段Cookie，記錄著那項(xiàng)商品的信息找筝。當(dāng)用戶訪問另一個(gè)頁面，瀏覽器會(huì)把Cookie發(fā)送給服務(wù)器慷吊，于是服務(wù)器知道他之前選購(gòu)了什么袖裕。用戶繼續(xù)選購(gòu)飲料，服務(wù)器就在原來那段Cookie里追加新的商品信息溉瓶。結(jié)帳時(shí)急鳄，服務(wù)器讀取發(fā)送來的Cookie就行了。

2.什么是Cookie

Cookie指某些網(wǎng)站為了辨別用戶身份而儲(chǔ)存在用戶本地終端上的數(shù)據(jù)(通常經(jīng)過加密)堰酿。 cookie是服務(wù)端生成疾宏，客戶端進(jìn)行維護(hù)和存儲(chǔ)。通過cookie,可以讓服務(wù)器知道請(qǐng)求是來源哪個(gè)客戶端触创，就可以進(jìn)行客戶端狀態(tài)的維護(hù)坎藐，比如登陸后刷新，請(qǐng)求頭就會(huì)攜帶登陸時(shí)response header中的set-cookie,Web服務(wù)器接到請(qǐng)求時(shí)也能讀出cookie的值哼绑，根據(jù)cookie值的內(nèi)容就可以判斷和恢復(fù)一些用戶的信息狀態(tài)岩馍。

3.Cookie的特點(diǎn)

可以用于瀏覽器端和服務(wù)器端之間的交互，cookie的數(shù)據(jù)會(huì)自動(dòng)的傳遞到服務(wù)器抖韩，服務(wù)器端也可以寫cookie到客戶端蛀恩。

客戶端自身數(shù)據(jù)的存儲(chǔ)，需要設(shè)置過期時(shí)間expire茂浮。設(shè)置的cookie過期時(shí)間之前一直有效双谆，即使窗口或?yàn)g覽器關(guān)閉壳咕。若不設(shè)置過期時(shí)間，則表示這個(gè)cookie的生命期為瀏覽器會(huì)話期間顽馋，關(guān)閉瀏覽器窗口谓厘，cookie就消失。

4.Cookie的生成方式

生成方式一：http response header中的set-cookie

生成方式二：js中可以通過document.cookie可以讀寫cookie//以鍵值對(duì)的形式展示

例如我們?cè)诤?jiǎn)書控制臺(tái)輸入趣避，以下兩句代碼庞呕，便可以在"Application"查看生成的cookie

document.cookie="userName=hello"document.cookie="gender=male"

5.Cookie的缺陷

cookie會(huì)被附加在每個(gè)HTTP請(qǐng)求中，在HttpRequest 和HttpResponse的header中都是要被傳輸?shù)某膛粒詿o形中增加了一些不必要的流量損失住练。

cookie是用來維護(hù)用戶信息的，而域名(domain)下所有請(qǐng)求都會(huì)攜帶cookie愁拭，但對(duì)于靜態(tài)文件的請(qǐng)求讲逛，攜帶cookie信息根本沒有用，此時(shí)可以通過cdn（存儲(chǔ)靜態(tài)文件的）的域名和主站的域名分開來解決岭埠。

由于在HTTP請(qǐng)求中的Cookie是明文傳遞的盏混，所以安全性成問題，除非用HTTPS惜论。

可以使用HttpOnly提升Cookie安全性许赃。httponly 不支持讀寫，瀏覽器不允許腳本操作document.cookie去更改cookie馆类，一般情況下都應(yīng)該設(shè)置這個(gè)為true混聊，這樣可以避免被XSS攻擊拿到cookie。

Cookie的大小限制在4KB左右乾巧，對(duì)于復(fù)雜的存儲(chǔ)需求來說是不夠用的句喜。很多瀏覽器都限制一個(gè)站點(diǎn)的cookie個(gè)數(shù)也是有限制的。

這里需注意：各瀏覽器的cookie每一個(gè)name=value的value值大概在4k沟于，所以4k并不是一個(gè)域名下所有的cookie共享的,而是一個(gè)name的大小咳胃。

基于Cookie存儲(chǔ)數(shù)據(jù)功能有所欠缺，HTML5中新增了本地存儲(chǔ)的解決方案----WebStorage旷太，它分成兩類：sessionStorage和localStorage展懈。這樣有了WebStorage后，cookie能只做它應(yīng)該做的事情了——作為客戶端與服務(wù)器交互的通道供璧，保持客戶端狀態(tài)标沪。

三、LocalStorage

1.LocalStorage的特點(diǎn)

保存的數(shù)據(jù)長(zhǎng)期存在嗜傅，下一次訪問該網(wǎng)站的時(shí)候金句，網(wǎng)頁可以直接讀取以前保存的數(shù)據(jù)。

大小為5M左右

僅在客戶端使用吕嘀，不和服務(wù)端進(jìn)行通信

接口封裝較好

基于上面的特點(diǎn)违寞，LocalStorage可以作為瀏覽器本地緩存方案贞瞒，用來提升網(wǎng)頁首屏渲染速度(根據(jù)第一請(qǐng)求返回時(shí)，將一些不變信息直接存儲(chǔ)在本地)趁曼。

2.存入/讀取數(shù)據(jù)

localStorage保存的數(shù)據(jù)军浆，以“鍵值對(duì)”的形式存在。也就是說挡闰，每一項(xiàng)數(shù)據(jù)都有一個(gè)鍵名和對(duì)應(yīng)的值乒融。所有的數(shù)據(jù)都是以文本格式保存。

存入數(shù)據(jù)使用setItem方法摄悯。它接受兩個(gè)參數(shù)赞季，第一個(gè)是鍵名，第二個(gè)是保存的數(shù)據(jù)奢驯。

localStorage.setItem("key","value");

讀取數(shù)據(jù)使用getItem方法申钩。它只有一個(gè)參數(shù)，就是鍵名瘪阁。

var valueLocal = localStorage.getItem("key");

具體步驟撒遣，請(qǐng)看下面的例子：

四、SessionStorage

sessionStorage保存的數(shù)據(jù)用于瀏覽器的一次會(huì)話管跺，當(dāng)會(huì)話結(jié)束（通常是該窗口關(guān)閉）义黎，數(shù)據(jù)被清空；sessionStorage不在不同的瀏覽器窗口中共享豁跑，即使是同一個(gè)頁面轩缤；localStorage 在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的贩绕。除了保存期限的長(zhǎng)短不同，SessionStorage的屬性和方法與LocalStorage完全一樣壶愤。

1.SessionStorage的特點(diǎn)

會(huì)話級(jí)別的瀏覽器存儲(chǔ)

大小為5M左右

僅在客戶端使用淑倾，不和服務(wù)端進(jìn)行通信

接口封裝較好

基于上面的特點(diǎn)，SessionStorage 可以有效對(duì)表單信息進(jìn)行維護(hù)征椒，比如刷新時(shí)娇哆，表單信息不丟失。

2.sessionStorage 勃救、localStorage 和 cookie 之間的區(qū)別

共同點(diǎn)：都是保存在瀏覽器端碍讨，且同源的。

不同點(diǎn)如下：

五蒙秒、IndexedDB

Web Storage使用簡(jiǎn)單字符串鍵值對(duì)在本地存儲(chǔ)數(shù)據(jù)勃黍，方便靈活，但是對(duì)于大量結(jié)構(gòu)化數(shù)據(jù)存儲(chǔ)力不從心晕讲，IndexedDB是為了能夠在客戶端存儲(chǔ)大量的結(jié)構(gòu)化數(shù)據(jù)覆获，并且使用索引高效檢索的API马澈。

1.IndexedDB的特點(diǎn)

IndexedDB是一種低級(jí)API，用于客戶端存儲(chǔ)大量結(jié)構(gòu)化數(shù)據(jù)弄息。該API使用索引來實(shí)現(xiàn)對(duì)該數(shù)據(jù)的高性能搜索痊班。

為應(yīng)用創(chuàng)建離線版本

2.IndexedDB的常見操作

在IndexedDB大部分操作并不是我們常用的調(diào)用方法，返回結(jié)果的模式摹量，而是請(qǐng)求——響應(yīng)的模式

①建立打開indexdb----window.indexedDB.open("testDB")

這條指令并不會(huì)返回一個(gè)DB對(duì)象的句柄涤伐，我們得到的是一個(gè)IDBOpenDBRequest對(duì)象，而我們希望得到的DB對(duì)象在其result屬性中

除了result缨称，IDBOpenDBRequest接口定義了幾個(gè)重要屬性

onerror: 請(qǐng)求失敗的回調(diào)函數(shù)句柄

onsuccess:請(qǐng)求成功的回調(diào)函數(shù)句柄

onupgradeneeded:請(qǐng)求數(shù)據(jù)庫(kù)版本變化句柄

控制臺(tái)得到一個(gè) IDBDatabase對(duì)象凝果，這就是IndexedDB對(duì)象

②關(guān)閉indexdb----indexdb.close()

③刪除indexdb----window.indexedDB.deleteDatabase(indexdb)

最后：如果覺得文章對(duì)你有幫助記得關(guān)注哦！

“相信有很多想學(xué)前端的小伙伴具钥，今年年初我花了一個(gè)月整理了一份最適合2018年學(xué)習(xí)的web前端干貨豆村，從最基礎(chǔ)的HTML+CSS+JS到移動(dòng)端HTML5等都有整理，送給每一位前端小伙伴骂删，53763掌动，1707這里是小白聚集地，歡迎初學(xué)和進(jìn)階中的小伙伴宁玫〈只郑”