本地儲存和離線快取的作用和區別

前端的儲存方式有：localstorage、sessionstorage、cookie、userdata、websql、indexeddb、html5離線儲存等。各個儲存方式有各自的優缺點，本文我們來**一下不同儲存的功能及區別。

在h5之前，儲存主要用的是cookie。cookie會隨著每次http請求頭資訊一起傳送，無形中增加了網路流量，另外，cookie能儲存的資料容量有限，根據瀏覽器型別不同而不同，ie6大約只能儲存2k。

1）cookie的訪問方法

document.cookie =
"鍵=值"
;//一次只能存乙個鍵值對

var v=document.cookie;
//取出字串
常用操作：
var arr1 = v.
split
("; ");
//分割
json
.stringify
(obj)
;//物件轉換為字串存入
json
.parse
(str)
;//json字串轉換為物件取出

var date =
newdate()
;date.
setdate
(date.
getdate()
+"設定時長");
document.cookie =
"key=value;expires="
+date.
toutcstring()
;

2）cookie的優缺點

3）cookie的應用場景

主要應用：購物車、客戶端登入

localstorage（本地儲存）,可以長期儲存資料，沒有時間限制，一天，一年，兩年甚至更長，資料都可以使用。

localstorage中一般瀏覽器支援的是5m大小，這個在不同的瀏覽器中localstorage會有所不同

localstorage.
setitem
("key"
,"value");
//儲存
localstorage.
getitems
(key)
;//按key進行取值
localstorage.
removeitems
(key)
;//按key單個刪除
localstorage.
clear()
;//刪除全部資料
localstorage.length;
//獲得資料的數量
localstorage.
valueof()
;//獲取全部值

sessionstorage（會話儲存），只有在瀏覽器被關閉之前使用，建立另乙個頁面時同意可以使用，關閉瀏覽器之後資料就會消失

sessionstorage.
setitem
("key"
,"value");
//儲存
sessionstorage.
getitems
(key)
;//按key進行取值
sessionstorage.
removeitems
(key)
;//按key單個刪除
sessionstorage.
clear()
;//刪除全部資料
sessionstorage.length;
//獲得資料的數量
sessionstorage.
valueof()
;//獲取全部值

sessionstorage 非常適合單頁應用程式，可以方便在各業務模組進行傳值。

是不敢看完上面兩個感覺有點懵，好像一樣的？他們還是有所區別的，讓我們看看他們的相同點和不同點：

web storage包括localstorange與sessionstorage。它的概念和cookie相似，區別是它是為了更大容量儲存設計的。cookie的大小是受限的，並且每次請求乙個新的頁面的時候cookie都會被傳送過去，這樣無形中浪費了頻寬，另外cookie還需要指定作用域，不可以跨域呼叫。

除此之外，web storage擁有setitem,getitem,removeitem,clear等方法，不像cookie需要前端開發者自己封裝setcookie，getcookie。

但是cookie也是不可以或缺的：cookie的作用是與伺服器進行互動，作為http規範的一部分而存在，而web storage僅僅是為了在本地「儲存」資料而生。

html5 引入了應用程式快取，這意味著 web 應用可在沒有網際網路連線時進行訪問

應用程式快取為應用帶來的優勢：

1）使用方法：

1. 在html標籤新增manifest屬性

在頁面的html標籤中新增manifest屬性，屬性值為manifest檔案的路徑。如：


doctype
html
>
manifest
="../js/demo.manifest"
>
...html
>

2. 編寫manifest檔案2> 編寫manifest檔案

manifest檔案是簡單的文字檔案，它會告知瀏覽器需要快取的內容以及不需要快取的內容。

簡單示例:

cache manifest #version 1.1 /*版本號*/ cache : html/index.html /*需要快取的檔案*/ network : js/jquery.js /*不需要快取的檔案*/ fallback

: html/index.html /*當頁面無法訪問時的回退頁面*/

2）注意事項：

瀏覽器對快取資料的容量限制可能不太一樣

引用的manifest檔案必須和html檔案同源，同域

瀏覽器的自動快取會導致更改了的html檔案必須更新版本才能更新頁面

更新版本後，必須重新整理一次才會啟動新版本

當manifest檔案發生改變時，資源請求本身也會觸發更新

3)離線快取與傳統瀏覽器快取區別：

瀏覽器快取（browser caching）是為了節約網路的資源加速瀏覽，瀏覽器在使用者磁碟上對最近請求過的文件進行儲存，當訪問者再次請求這個頁面時，瀏覽器就可以從本地磁碟顯示文件，這樣就可以加速頁面的閱覽

區別：

離線快取是針對整個應用，瀏覽器快取是單個檔案

離線快取斷網了還是可以開啟頁面，瀏覽器快取不行

離線快取可以主動通知瀏覽器更新資源

相同：

本地儲存與離線快取都是為了方便網頁的載入，提高使用者體驗等。

不同：

本地儲存一般儲存的都是資料，而離線快取一般儲存的是網頁等。

本地儲存和離線快取的作用和區別

HTML本地儲存和離線儲存

vuex儲存和本地儲存的區別

Web 本地儲存和Vue本地儲存例項

本地儲存和離線快取的作用和區別

HTML本地儲存和離線儲存

vuex儲存和本地儲存的區別

Web 本地儲存和Vue本地儲存例項

相關推薦