(精華)2020年8月17日 瀏覽器本地存儲

瀏覽器存儲

Cookie, SessionStorage, LocalStorage這三者都可以被用來在瀏覽器端存儲數(shù)據(jù)，而且都是字符串類型的鍵值對！ (另外還有一種存儲模式叫：session;這種級別的存儲屬于服務(wù)端會話級別的存儲,后期Node課程中會講)

1

2

cookie

cookie 是什么? cookie翻譯過來是小甜餅的意思，是網(wǎng)景公司的前雇員 Lou Montulli 在1993年3月的發(fā)明的。 cookie是純文本格式，不包含任何可執(zhí)行的代碼信息，伴隨著用戶請求在 Web 服務(wù)器和瀏覽器之間傳遞。 cookie本質(zhì)上屬于http的范疇，因為http協(xié)議本身是無狀態(tài)的，服務(wù)端是沒有辦法區(qū)分請求來自于哪個 客戶端，即便是來自于同一個客戶端的多次請求 我們的服務(wù)端也是沒有能力來區(qū)分的。 就是因為http協(xié)議是無狀態(tài)的，所以才需要cookie去維持客戶端的狀態(tài)。 cookie的生成方式: 1.客戶端生成: 在 JavaScript 中通過 document.cookie 屬性，你可以創(chuàng)建、維護和刪除 cookie 設(shè)置 document.cookie 屬性的值并不會刪除存儲在頁面中的所有 cookie。它只簡單的創(chuàng)建或修改字符串中指定的 cookie 要使用 JavaScript 提取 cookie 的值，只需要從 document.cookie 中讀取即可 2.服務(wù)端生成: Web 服務(wù)器通過發(fā)送一個稱為 Set-Cookie 的 HTTP消息頭來創(chuàng)建一個 cookie HttpOnly 為避免跨域腳本 (XSS) 攻擊，通過JavaScript的 Document.cookie API無法訪問有HttpOnly 標記的Cookie， cookie的缺點 安全性 ：由于cookie在HTTP中是明文傳遞的，其中包含的數(shù)據(jù)都可以被他人訪問，可能會被篡改、盜用。 大小限制： cookie的大小限制在4KB左右，若要做大量存儲顯然不是理想的選擇。 增加流量： cookie每次請求都會被自動添加到Request Header中，無形中增加了流量。 cookie信息越大，對服務(wù)器請求的時間也越長。因此要慎用cookie，不要在cookie中存儲重要和敏感的數(shù)據(jù)。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

Web Storage

SessionStorage和LocalStorage都是本地存儲,同時空間比Cookie大很多，一般支持5-10M 瀏覽器端通過 Window.sessionStorage 和 Window.localStorage 屬性來實現(xiàn)本地存儲機制。 var data = xxxxxStorage.getItem('person'); 該方法接受一個鍵名作為參數(shù)，返回鍵名對應(yīng)的值。 xxxxxStorage.setItem('key', 'value'); 該方法接受一個鍵名和值作為參數(shù)，將會把鍵值對添加到存儲中，如果鍵名存在，則更新其對應(yīng)的值。 xxxxxStorage.removeItem('key'); 該方法接受一個鍵名作為參數(shù)，并把該鍵名從存儲中刪除。 xxxxxStorage.clear() 調(diào)用該方法會清空存儲中的所有鍵名 storage事件： Storage 對象發(fā)生變化時（即創(chuàng)建/更新/刪除數(shù)據(jù)項時，Storage.clear() 方法至多觸發(fā)一次該事件）會觸發(fā) 在同一個頁面內(nèi)發(fā)生的改變不會起作用 在相同域名下的其他頁面發(fā)生的改變才會起作用。(修改的頁面不會觸發(fā)事件，與它共享的頁面會觸發(fā)事件) key : 修改或刪除的key值，如果調(diào)用clear(),為null newValue : 新設(shè)置的值，如果調(diào)用clear(),為null oldValue : 調(diào)用改變前的value值,如果調(diào)用clear(),為null url : 觸發(fā)該腳本變化的文檔的url storageArea : 當(dāng)前的storage對象

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

備注：

1.靜態(tài)資源是不會攜帶cookie的 2.cookie一般都是后臺種的，很少讓前端來直接寫 3.cookie分:持久級別、session級別 4.cookie一般用于和session通信

1

2

3

4

瀏覽器儲存量的支持

http://dev-test.nemikor.com/web-storage/support-test/

1

HTTP

版權(quán)聲明：本文內(nèi)容由網(wǎng)絡(luò)用戶投稿，版權(quán)歸原作者所有，本站不擁有其著作權(quán)，亦不承擔(dān)相應(yīng)法律責(zé)任。如果您發(fā)現(xiàn)本站中有涉嫌抄襲或描述失實的內(nèi)容，請聯(lián)系我們jiasou666@gmail.com 處理，核實后本網(wǎng)站將在24小時內(nèi)刪除侵權(quán)內(nèi)容。

版權(quán)聲明：本文內(nèi)容由網(wǎng)絡(luò)用戶投稿，版權(quán)歸原作者所有，本站不擁有其著作權(quán)，亦不承擔(dān)相應(yīng)法律責(zé)任。如果您發(fā)現(xiàn)本站中有涉嫌抄襲或描述失實的內(nèi)容，請聯(lián)系我們jiasou666@gmail.com 處理，核實后本網(wǎng)站將在24小時內(nèi)刪除侵權(quán)內(nèi)容。