前端緩存分爲網絡(HTTP)緩存和瀏覽器本地儲存。html
請移步:網絡協議-HTTP-緩存緩存機制前端
咱們先來經過表格學習下這幾種存儲方式的區別vue
特性 | Cookie | localStorage | sessionStorage | indexedDB |
---|---|---|---|---|
數據聲明週期 | 通常由服務器生成,能夠設置過時時間 | 除非被清理,否在一直存在 | 頁面關閉就清理 | 除非被清理,否在一直存在 |
數據儲存大小 | 4k | 5M 左右 | 5M 左右 | 理論無限 |
與服務端通訊 | 請求時會攜帶在 Http 的 header 中,對於請求性能稍有影響 | 不參與 | 不參與 | 不參與 |
<!-- | 用途 | 權限驗證等 -->web
主要用於存儲一下用戶相關的信息,如登陸、權限、token 等,可是不宜過大,由於每次 http 請求都會帶上,因此會稍微影響性能。
對於 cookie 來講,還須要注意一些安全性。數據庫
| 屬性 | 做用 |
| value | 如何用於保護用戶登陸態,應該將值加密 |
| http-only | 不能經過 JS 訪問 Cookie,減小 XSS 攻擊 |
| secure | 只能在協議爲 HTTPS 的請求中攜帶 |
| same-site | 規定瀏覽器不能再跨域請求中攜帶 Cookie,減小 CSRF 攻擊 |小程序
Cookie 的本職工做並不是是本地存儲,而是「維持狀態」。
由於 HTTP 是一種無狀態的協議,也就是說,客戶端請求一次,服務端就響應一次,中間沒有留下任何信息。
就像一個常常和你聊天的朋友,天南地北的都什麼都聊,可每次你都不知道大家上一次聊得是什麼,以及他叫什麼名字。
那怎麼辦才能讓他知道我是我呢?
這時候就須要 Cookie 了,Cookie 說白了就是一個存儲在瀏覽器裏的一個小小的文本文件,它附着在 HTTP 請求上,在瀏覽器和服務器之間「飛來飛去」。
它能夠攜帶用戶信息,當服務器檢查 Cookie 的時候,即可以獲取到客戶端的狀態,也就能夠證實我是誰了。
Cookie 是以鍵值對的形式存儲的。後端
須要注意的是localStorage和sessionStorage都是遵循同源策略的:微信小程序
localStorage只要在相同的協議、相同的主機名(二級域名也不行)、相同的端口下,就能讀取/修改到同一份localStorage數據。跨域
localStorage.setItem('user_name', 'xiuyan')
localStorage.getItem('user_name')
localStorage.removeItem('user_name')
localStorage.clear()
IndexedDB 是一個運行在瀏覽器上的非關係型數據庫。既然是數據庫了,那就不是 5M、10M 這樣小打小鬧級別了。瀏覽器
理論上來講,IndexedDB 是沒有存儲上限的(通常來講不會小於 250M)。它不只能夠存儲字符串,還能夠存儲二進制數據。
本人用的也不是不少,具體用法能夠參考:瀏覽器數據庫 IndexedDB 入門教程
PWA(Progressive web apps,漸進式 Web 應用)運用現代的 Web API 以及傳統的漸進式加強策略來建立跨平臺 Web 應用程序。
這些應用無處不在、功能豐富,使其具備與原生應用相同的用戶體驗優點。 這組文檔和指南告訴您有關 PWA 的全部信息。
其實個人理解,就是在瀏覽器或者其餘客戶端應用緩存一個 webapp,一次使用,就將代碼都緩存到本地,再次打開無需重複加載。
是否是以爲很熟悉,這不就是微信小程序嗎?
其實如今的微信小程序、快應用都算是一種 PWA 的實現。
好比:vuePress 就支持轉 PWA 應用
參考:MDN-PWA