?微信公眾號： [大前端驛站]
關注大前端驛站，問題或建議，歡迎公眾號留言，
與特定用戶相關的資訊應該保存在用戶的機器上，無論是登錄資訊、個人偏好，還是其他資料， Web 應用程式提供者都需要有辦法把它們保存在客戶端，本篇旨在淺談客戶端存盤的解決方案
cookie
HTTP cookie規范要求服務器在回應 HTTP 請求時，通過發送 Set-Cookie HTTP 頭部包含會話資訊，
cookie是與特定域系結的，設定 cookie 后，它會與請求一起發送到創建它的域，這個限制能保證 cookie 中存盤的資訊只對被認可的接收者開放，不被其他域訪問
HTTP/1.1 200 OK
Content-type: text/html
Set-Cookie: name=value; domain=.wrox.com; path=/; secure
Other-header: other-header-value
這個頭部設定一個名為"name"的 cookie，這個 cookie 在 2007 年 1 月 22 日 7:10:24 過期，對www.wrox.com及其他 wrox.com 的子域（如 p2p.wrox.com）有效
這里創建的 cookie 對所有 wrox.com 的子域及該域中的所有頁面有效（通過 path=/指定），不過， 這個 cookie 只能在 SSL 連接上發送，因為設定了 secure 標志
javascript處理cookie的方法
讀：document.cookie(回傳"name=value"的字串)寫：document.cookie = ‘love=web’刪：設定過期時間為過去的時間
HTTP-only的cookie只能在服務器上讀取，JavaScript 無法取得這種 cookie的值
Web Storage
Web Storage包含localStorage 和 sessionStorage，這兩種瀏覽器存盤 API 提供了在瀏覽器中***不受頁面重繪影響***而存盤資料的兩種方式
localStorage 是 永久存盤機制，sessionStorage 是跨會話的存盤機制.
javascript處理storage的方法
讀
- getItem(name)：取得給定 name 的值
- key(index)：取得給定數值位置的名稱
- length：獲取長度
寫- setItem(name, value)：設定給定 name 的值
刪- removeItem(name)：洗掉給定 name 的名/值對
- clear()：洗掉所有值
存盤事件
每當 Storage 物件發生變化時，都會在檔案上觸發 storage 事件
window.addEventListener('storage', event => {
console.log(event.domain) // 存盤變化對應的域
console.log(event.key) // 被設定或洗掉的鍵
console.log(event.newValue) // 鍵被設定的新值，若鍵被洗掉則為 null
console.log(event.oldValue) // 鍵變化之前的值
})
對于 sessionStorage 和 localStorage 上的任何更改都會觸發 storage 事件，但 storage 事 件不會區分這兩者
注意Storage 型別只能存盤字串，非字串資料在存盤之前會自動轉換
為字串， 注意，這種轉換不能在獲取資料時撤銷，
IndexedDB
IndexedDB 是類似于SQL 資料庫的結構化資料存盤機制，但IndexedDB 存盤的是物件，而不是資料表，物件存盤是通過定義鍵然后添加資料來創建的，游標用于查詢物件存盤中的特定資料，而 索引可以針對特定屬性實作更快的查詢…
上述客戶端存盤方式都有容量的限制,最重要的是，因為這些資料沒有加密， 所以要注意不能使用它們存盤敏感資訊
【分享、點贊、在看】三連吧，讓更多的人加入我們~~
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/290288.html
標籤：其他
上一篇：633. 平方數之和 -力扣（leetCode）Javascript雙指標
下一篇：2021-07-25 暑假學習1