你可能不知道的LocalStorage用法

hlcfan 發布于2019-08-26 10:46 / 3452人閱讀

摘要：也就是說，跨域訪問其他站點的是行不通的。是以字符串的形式保存數據的。表示的是被改變的的值，是改變后最新的值，是舊的值。效果如下寫在后面在平時的業務開發中，使用的頻率也不低，但確實是不知道還可以這么用。

寫在前面

本文首發于公眾號：符合預期的CoyPan

上周在看關于react-redux的一個在線ppt時，偶然發現了一個現象：

如果我開兩個瀏覽器tab，同時訪問這個頁面，我在其中一個頁面切換ppt，另外一個頁面會跟著變化。鏈接在這里：

https://blog.isquaredsoftware...

效果如下：

研究了一下，這個效果其實就是用localStorage來實現的。

localStorage基本知識點

localStorage, 是一個用來做本地持久化存儲的Web Api。 localStorage以鍵值對的形式存儲數據。用法很簡單：

// 設置
localStorage.setItem("myCat", "Tom");

// 獲取
let cat = localStorage.getItem("myCat");

// 移除
localStorage.removeItem("myCat");

// 移除所有
localStorage.clear();

有幾個點需要注意：

1、localStorage是以『源(origin)』為維度進行存儲的。也就是說，跨域訪問其他站點的localStorage是行不通的。

2、localStorage是以字符串的形式保存數據的。

3、對于每一個域，localStorage最多允許存儲幾M數量級的數據(具體數字因瀏覽器而異)。

localStorage可以用來做什么：

存儲登錄token，用戶信息等數據；本地持久化保存業務數據；保存代碼，以提高網站性能。等等等等…還有本文所要介紹的頁面同步。

監聽LocalStorage變化

localStorage被改變時(從無到有，從有到無，值改變)，會觸發一個storage事件。我們可以在window上監聽到這個事件。

window.addEventListener("storage", () => {
  ...
});

window.onstorage = () => {
  ...
};

這里需要注意的是，在改變localStorage的當前頁面，是無法監聽到storage事件的。如果我同時打開了多個同源的頁面: A頁面、B頁面、C頁面，當在A頁面中修改localstorage時，B頁面和C頁面中都可以監聽到storage事件，而A頁面是不會觸發storage事件的。

一個storage事件的實例如下：

其中比較關鍵的是key，newValue，oldValue這幾個值。key表示的是被改變的localStorage的key值，newValue是改變后最新的值，oldValue是舊的值。

實現兩個頁面同步的效果

了解了上面的知識點，就可以解釋本文開頭所提到的網頁是如何實現多頁面同步的了。來實現一個簡單的。

效果如下：

寫在后面

在平時的業務開發中，localStorage使用的頻率也不低，但確實是不知道還可以這么用。以后有遇到頁面同步的需求時，localStorage也可以作為一個選項了。符合預期。

GPU云服務器云服務器可能不知道地方你知道你應該知道你不知道的

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/106741.html

cookie和localStorage那些事

摘要：它的大小限制為左右，是網景公司的前雇員在年月的發明。字符串轉義通過來設置的有效期。和的用法和屬性允許在瀏覽器中存儲對的數據。用于臨時保存同一窗口或標簽頁的數據，在關閉窗口或標簽頁之后將會刪除這些數據。是瀏覽器關閉后就立即清除。一、localStorage、cookie、sessionStorage的區別與練習 showImg(https://segmentfault.com/img/...

Jeffrrey 2019-08-26 14:04 評論0 收藏0
localStorage、sessionStorage、Cookie的區別及用法

摘要：的區別及用法是本地存儲，存儲在客戶端，包括和。僅在當前會話下有效，關閉頁面或瀏覽器后被清除。源生接口可以接受，亦可再次封裝來對和有更好的支持。但需要程序員自己封裝，源生的接口不友好。每個最多只能有條，每個長度不能超過。 localStorage、sessionStorage、Cookie的區別及用法 showImg(https://segmentfault.com/img/bVYLlH...

sf_wangchong 2019-08-21 17:41 評論0 收藏0
HTML5 進階系列：web Storage

摘要：構造函數在實際項目中，可能需要多次對進行操作，我們可以通過一個構造函數來更好的操作。注意在谷歌瀏覽器中，需要在不同標簽頁中修改才會觸發該事件，即網頁監聽該事件，在網頁中修改，則網頁會觸發事件函數。前言 HTML5 的 web Storage 存儲方式有兩種：localStorage 和 sessionStorage。這兩種方式都是通過鍵值對保存數據，存取方便，不影響網站性能。他們的...

iflove 2019-08-20 16:04 評論0 收藏0