快捷導(dǎo)航

JavaScript學(xué)習(xí)教程之cookie與webstorage

更新時(shí)間：2019年06月23日 15:13:26 作者：水鏡月

這篇文章主要給大家介紹了關(guān)于JavaScript學(xué)習(xí)教程之cookie與webstorage的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用JavaScript具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧

cookie

由于http是無狀態(tài)的協(xié)議，一旦客戶端和服務(wù)器的數(shù)據(jù)交換完畢，就會(huì)斷開連接，再次請(qǐng)求，會(huì)重新連接，服務(wù)器單從網(wǎng)絡(luò)連接上是沒有辦法知道用戶身份的。cookie就是為了解決此問題而產(chǎn)生的，每次新的用戶請(qǐng)求時(shí)，便給用戶頒發(fā)一個(gè)獨(dú)一無二的身份證，下次訪問，必須帶上身份證，這樣服務(wù)器就會(huì)知道是哪個(gè)用戶進(jìn)行了訪問，針對(duì)不同用戶，做出不同的響應(yīng)cookie是一個(gè)很小的純文本文件（最多為4K），是瀏覽器儲(chǔ)存在用戶的機(jī)器上的。儲(chǔ)存一些服務(wù)器需要的信息，每次請(qǐng)求站點(diǎn)，會(huì)發(fā)送相應(yīng)的cookie，這些cookie可以用來辨別用戶身份信息等作用。

cookie的屬性字段

props	intro
name	cookie的名稱
value	cookie的值
domain	可以訪問cookie的域名
path	可以訪問此cookie的頁面路徑
expires/Max-Age	cookie有效的時(shí)間
Size	cookie的大小
httpOnly	js能否讀取到cookie信息
secure	是否只能通過https來傳遞此條cookie

cookie是以純文本的方式存儲(chǔ)，即cookie的數(shù)據(jù)類型為String類型

document.cookie = 'name=userInfo'; // 設(shè)置cookie的name屬性
document.cookie = 'username=Jack'; // 在cookie中存儲(chǔ)了username信息
console.log(document.cookie); // name=userInfo; username=Jack

document.cookie = 'name=userInfo'; // 設(shè)置cookie的name屬性
document.cookie = 'username=Amy'; // 在cookie中存儲(chǔ)了username信息
console.log(document.cookie); // name=userInfo; username=Amy

通過上面的實(shí)例可以知道，給cookie賦值時(shí)是不會(huì)覆蓋cookie的原有的值，當(dāng)?shù)忍?hào)前的屬性名相同時(shí)，才會(huì)將原來相同屬性名的值覆蓋為后來設(shè)置的值。注意，cookie的兩個(gè)字段之間是通過一個(gè)分號(hào)和空格分隔，而不是只有一個(gè)分號(hào)

當(dāng)要給cookie設(shè)置非自定義的屬性字段時(shí)，需要通過字符串追加的方式

例如

let expireDate = new Date();
document.cookie += ";expires=" + expireDate.toString();

注意： ";expires="中的分號(hào)必須有，如果字段前不加分號(hào)則會(huì)認(rèn)為這是一個(gè)自定義字段

domain

非頂級(jí)域名，如二級(jí)域名或者三級(jí)域名，設(shè)置的cookie的domain只能為頂級(jí)域名或者二級(jí)域名或者三級(jí)域名本身，不能設(shè)置其他二級(jí)域名的cookie，否則cookie無法生成。

頂級(jí)域名只能設(shè)置domain為頂級(jí)域名，不能設(shè)置為二級(jí)域名或者三級(jí)域名，否則cookie無法生成。

二級(jí)域名能讀取設(shè)置了domain為頂級(jí)域名或者自身的cookie，不能讀取其他二級(jí)域名domain的cookie。所以要想cookie在多個(gè)二級(jí)域名中共享，需要設(shè)置domain為頂級(jí)域名，這樣就可以在所有二級(jí)域名里面或者到這個(gè)cookie的值了。

頂級(jí)域名只能獲取到domain設(shè)置為頂級(jí)域名的cookie，其他domain設(shè)置為二級(jí)域名的無法獲取。

總的來說就是，上級(jí)域名不能訪問下級(jí)域名的cookie，下級(jí)域名可以讀取自身及上級(jí)域名的cookie，同級(jí)域名的cookie不共享，即同級(jí)域名之間不能互相訪問對(duì)方的cookie，只能訪問自身的cookie。

path

path字段為可以訪問此cookie的頁面路徑。比如domain是abc.com,path是/test，那么只有/test路徑下的頁面可以讀取此cookie。

expires/Max-Age

expires/Max-Age 字段為此cookie超時(shí)時(shí)間。若設(shè)置其值為一個(gè)時(shí)間，那么當(dāng)?shù)竭_(dá)此時(shí)間后，此cookie失效。不設(shè)置此字段時(shí)，默認(rèn)值是Session，即當(dāng)瀏覽器關(guān)閉(注意：不是瀏覽器標(biāo)簽頁，而是整個(gè)瀏覽器) 后，此cookie失效。

let expireDate = new Date("2019-5-26T09:00:00");
document.cookie += ";expires=" + expireDate.toString();

若要?jiǎng)h除某條cookie則設(shè)置此條cookie的expires為當(dāng)前時(shí)間之前的時(shí)間的即可

let expireDate = new Date("1970-01-01T00:00:00");
document.cookie += ";expires=" + expireDate.toString();

size

Size字段此cookie大小。

httpOnly

若此屬性為true，則只有在http請(qǐng)求頭中會(huì)帶有此cookie的信息，而不能通過document.cookie來訪問此cookie，設(shè)置為true可以減少受到Xss攻擊的風(fēng)險(xiǎn)

secure

secure 字段設(shè)置是否只能通過https來傳遞此條cookie

localstorage/sessionstorage

webstorage并不是要替代cookie，而是為了彌補(bǔ)隨著web的發(fā)展，cookie在存儲(chǔ)限制（存儲(chǔ)容量最多為4k），安全性（在http協(xié)議中明文傳輸）存在的缺點(diǎn)而提出的

兩者的API是相同的

function	intro
setItem(key, value)	以鍵值對(duì)的形式保存一條數(shù)據(jù)
getItem(key)	根據(jù)鍵來獲得值
removeItem(key)	根據(jù)鍵來刪除一條數(shù)據(jù)
key(index)	根據(jù)索引獲得鍵的名稱
clear()	刪除全部數(shù)據(jù)

兩者都有l(wèi)ength屬性

sessionStorage.setItem("name", "Jack");
sessionStorage.setItem("phone", "18856894523");
console.log(sessionStorage.getItem('name')); // Jack
console.log(sessionStorage.key(0)); // name
console.log(sessionStorage.length); // 2
sessionStorage.removeItem('phone');
console.log(sessionStorage.length); // 1
sessionStorage.clear();    
console.log(sessionStorage.length); // 0

兩者的比較

localStorage和sessionStorage都是用來存儲(chǔ)客戶端臨時(shí)信息的對(duì)象。均只能存儲(chǔ)字符串類型的對(duì)象，雖然規(guī)范中可以存儲(chǔ)其他原生類型的對(duì)象，但是目前為止沒有瀏覽器對(duì)其進(jìn)行實(shí)現(xiàn)。
localStorage生命周期是永久，除非用戶顯示在瀏覽器提供的UI上清除localStorage信息，否則這些信息將永遠(yuǎn)存在。
sessionStorage生命周期為當(dāng)前窗口或標(biāo)簽頁，一旦窗口或標(biāo)簽頁被永久關(guān)閉了，sessionStorage存儲(chǔ)的數(shù)據(jù)就被清空了。
不同瀏覽器無法共享localStorage或sessionStorage中的信息。
相同瀏覽器的不同頁面（頁面屬于相同域名和端口）間可以共享相同的localStorage
不同頁面或標(biāo)簽頁間無法共享sessionStorage的信息。注意，頁面及標(biāo)簽頁僅指頂級(jí)窗口，如果一個(gè)標(biāo)簽頁包含多個(gè)iframe標(biāo)簽且屬于同源頁面，那么他們之間是可以共享sessionStorage的。
使用window.open打開頁面和改變localtion.href方式都可以獲取到sessionStorage內(nèi)部的數(shù)據(jù)

cookie 與 webstorage的區(qū)別

存儲(chǔ)限制