前端常用的三種本地儲存策略是什麼呢?
cookie
sessionstorage
localstorage
cookie
在 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中新增一條資料
sessionstorage.setitem( key, value )
從sessionstorage中獲取一條資料
sessionstorage.getitem( key)
在sessionstorage中移除一條資料
sessionstorage.removeitem( key )
清除所有sessionstorage
sessionstorage.clear()
sessionstorage 的缺點
sessionstorage 中儲存的資料不會被自動隨著請求被傳送到服務端,可儲存的資料大小相比 cookie 來說大了很多,但是只存在於乙個會話週期內,當瀏覽器關閉或標籤頁關閉時,資料即會被刪除(前進和後退並不會影響到資料,因為還在當前的會話中),這就導致了即便是同乙個**,但在不同的標籤頁和視窗內,也無法共享其中儲存的資料
localstorage
localstorage 可以說是相對完美的解決了上面兩種儲存方式的缺點
資料儲存量大
不會被傳送到服務端
持久化本地儲存,除非手動刪除,否則一直存在
在同乙個域下,所有視窗共享其中儲存的資料
localstorage 的使用方式和特點與 sessionstorage 幾乎一樣,在此就不贅述
三種儲存方式共同的缺點
看到這裡你一定會發現,上文中的三中儲存方式都只能儲存字串型別或者可轉為字串的簡單資料,並不適合用來儲存複雜的關係型資料,但是 h5 為我們提供了乙個新的 api —— web sql database
三種本地儲存方式
當網頁要發http請求時,瀏覽器會先檢查是否有相應的cookie,有則自動新增在request header中的cookie欄位中。這些是瀏覽器自動幫我們做的,而且每一次http請求瀏覽器都會自動幫我們做。這個特點很重要,因為這關係到 什麼樣的資料適合儲存在cookie中 儲存在cookie中的資料...
三種本地儲存策略的區別
前端常用的三種本地儲存策略是什麼呢?cookie sessionstorage localstorage 在 h5 之前,本地儲存的主要方式就是 cookie cookie可以實現少量資料的儲存。為什麼是少量?因為 cookie 有 4k 的限制,沒辦法儲存資料量較大的資料 cookie 的使用 獲...
Web 本地儲存和Vue本地儲存例項
資料的設定和讀取比較方便。容量較大,sessionstorage大約為5mb,localstorage大約為20mb。只能儲存字串,若想要儲存json物件,則可以使用window.json.stringify 或者parse 進行序列化和反序列化編碼 sessionstorage的儲存週期只有一次會...