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

cookie

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

cookie的屬性字段

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

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

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

通過上面的實例可以知道，給cookie賦值時是不會覆蓋cookie的原有的值，當(dāng)?shù)忍柷暗膶傩悦嗤瑫r，才會將原來相同屬性名的值覆蓋為后來設(shè)置的值。注意，cookie的兩個字段之間是通過一個分號和空格分隔，而不是只有一個分號

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

例如

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

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

domain

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

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

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

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

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

path

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

expires/Max-Age

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

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

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

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

size

Size字段 此cookie大小。

httpOnly

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

secure

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

localstorage/sessionstorage

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

兩者的API是相同的

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

cookie 與 webstorage的區(qū)別

存儲限制

• 每個domain中只能存儲最多20條cookie，cookie數(shù)據(jù)不能超過4K
• webStorage也有存儲大小的限制，但是比cookie大得多，可以達(dá)到5M或更大

數(shù)據(jù)的有效期

• sessionStorage：僅在當(dāng)前的瀏覽器窗口關(guān)閉有效；
• localStorage：始終有效，除非用戶手動刪除
• cookie：cookie過期時間之前一直有效，即使窗口和瀏覽器關(guān)閉

作用域

• sessionStorage：不在不同的瀏覽器窗口中共享，即使是同一個頁面；
• localStorage：同源窗口共享
• cookie：同源窗口共享

總結(jié)

以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，謝謝大家對億速云的支持。