三種本地儲存策略的區別

2021-09-10 22:15:08 字數 1550 閱讀 6878

前端常用的三種本地儲存策略是什麼呢?

cookie

sessionstorage

localstorage

在 h5 之前,本地儲存的主要方式就是 cookie ,cookie可以實現少量資料的儲存。為什麼是少量?因為 cookie 有 4k 的限制,沒辦法儲存資料量較大的資料

cookie 的使用

獲取 cookie 可以直接使用document.cookie,但是獲取到的 cookie 是乙個字串,它包含了 cookie 中儲存的所有資料,形式如"key1=value1; key2=value2",這樣的字串無法通過json.parse()轉換為 json 格式的資料,需要通過正規表示式的方式將所需要的值匹配出來,直接使用比較複雜

cookie 的缺點

除了上面說的只能儲存 4k 的資料以外,瀏覽器在發起請求時,也會將其帶在請求頭上,汙染主domain的同時又增加了使用者使用的流量(雖然很少)

那麼為了解決 cookie 上面的兩個問題,h5 引入了兩個新的方式來進行本地儲存

向sessionstorage中新增一條資料

sessionstorage.setitem( key, value )
從sessionstorage中獲取一條資料

sessionstorage.getitem( key)
在sessionstorage中移除一條資料

sessionstorage.removeitem( key )
清除所有sessionstorage

sessionstorage.clear()
sessionstorage 的缺點

sessionstorage 中儲存的資料不會被自動隨著請求被傳送到服務端,可儲存的資料大小相比 cookie 來說大了很多,但是只存在於乙個會話週期內,當瀏覽器關閉或標籤頁關閉時,資料即會被刪除(前進和後退並不會影響到資料,因為還在當前的會話中),這就導致了即便是同乙個**,但在不同的標籤頁和視窗內,也無法共享其中儲存的資料

localstorage 可以說是相對完美的解決了上面兩種儲存方式的缺點

資料儲存量大

不會被傳送到服務端

持久化本地儲存,除非手動刪除,否則一直存在

在同乙個域下,所有視窗共享其中儲存的資料

localstorage 的使用方式和特點與 sessionstorage 幾乎一樣,在此就不贅述

看到這裡你一定會發現,上文中的三中儲存方式都只能儲存字串型別或者可轉為字串的簡單資料,並不適合用來儲存複雜的關係型資料,但是 h5 為我們提供了乙個新的 api —— web sql database

但是本文並不會對web sql database進行講解,因為大部分前端工程師對於 sql 語句並不熟悉,使用起來有一定的難度,而上文中的三種方式也已經基本能夠滿足我們本地儲存的需求

三種本地儲存

前端常用的三種本地儲存策略是什麼呢?cookie sessionstorage localstorage cookie 在 h5 之前,本地儲存的主要方式就是 cookie cookie可以實現少量資料的儲存。為什麼是少量?因為 cookie 有 4k 的限制,沒辦法儲存資料量較大的資料 cooki...

三種本地儲存方式

當網頁要發http請求時,瀏覽器會先檢查是否有相應的cookie,有則自動新增在request header中的cookie欄位中。這些是瀏覽器自動幫我們做的,而且每一次http請求瀏覽器都會自動幫我們做。這個特點很重要,因為這關係到 什麼樣的資料適合儲存在cookie中 儲存在cookie中的資料...

vuex儲存和本地儲存的區別

vuex存的是狀態,儲存在記憶體,localstorage是瀏覽器提供的介面,讓你存的是檔案,以檔案的形式儲存在本地 vuex用於元件之間的傳值,localstorage則主要用於頁面之間的傳值 當重新整理頁面時,vuex儲存的值會丟失,localstorage不會 個人在使用的時候,覺得用loca...