資訊專欄INFORMATION COLUMN
摘要：也就是說(shuō)，跨域訪問(wèn)其他站點(diǎn)的是行不通的。是以字符串的形式保存數(shù)據(jù)的。表示的是被改變的的值，是改變后最新的值，是舊的值。效果如下寫在后面在平時(shí)的業(yè)務(wù)開(kāi)發(fā)中，使用的頻率也不低，但確實(shí)是不知道還可以這么用。
寫在前面
本文首發(fā)于公眾號(hào)：符合預(yù)期的CoyPan
上周在看關(guān)于react-redux的一個(gè)在線ppt時(shí)，偶然發(fā)現(xiàn)了一個(gè)現(xiàn)象：
如果我開(kāi)兩個(gè)瀏覽器tab，同時(shí)訪問(wèn)這個(gè)頁(yè)面，我在其中一個(gè)頁(yè)面切換ppt，另外一個(gè)頁(yè)面會(huì)跟著變化。鏈接在這里：
https://blog.isquaredsoftware...
效果如下：
研究了一下，這個(gè)效果其實(shí)就是用localStorage來(lái)實(shí)現(xiàn)的。
localStorage基本知識(shí)點(diǎn)localStorage, 是一個(gè)用來(lái)做本地持久化存儲(chǔ)的Web Api。 localStorage以鍵值對(duì)的形式存儲(chǔ)數(shù)據(jù)。用法很簡(jiǎn)單：
// 設(shè)置
localStorage.setItem("myCat", "Tom");
// 獲取
let cat = localStorage.getItem("myCat");
// 移除
localStorage.removeItem("myCat");
// 移除所有
localStorage.clear();
有幾個(gè)點(diǎn)需要注意：
1、localStorage是以『源(origin)』為維度進(jìn)行存儲(chǔ)的。也就是說(shuō)，跨域訪問(wèn)其他站點(diǎn)的localStorage是行不通的。
2、localStorage是以字符串的形式保存數(shù)據(jù)的。
3、對(duì)于每一個(gè)域，localStorage最多允許存儲(chǔ)幾M數(shù)量級(jí)的數(shù)據(jù)(具體數(shù)字因?yàn)g覽器而異)。
localStorage可以用來(lái)做什么：
存儲(chǔ)登錄token，用戶信息等數(shù)據(jù)；本地持久化保存業(yè)務(wù)數(shù)據(jù)；保存代碼，以提高網(wǎng)站性能。等等等等…還有本文所要介紹的頁(yè)面同步。
監(jiān)聽(tīng)LocalStorage變化localStorage被改變時(shí)(從無(wú)到有，從有到無(wú)，值改變)，會(huì)觸發(fā)一個(gè)storage事件。我們可以在window上監(jiān)聽(tīng)到這個(gè)事件。
window.addEventListener("storage", () => {
...
});
window.onstorage = () => {
...
};
這里需要注意的是，在改變localStorage的當(dāng)前頁(yè)面，是無(wú)法監(jiān)聽(tīng)到storage事件的。如果我同時(shí)打開(kāi)了多個(gè)同源的頁(yè)面: A頁(yè)面、B頁(yè)面、C頁(yè)面，當(dāng)在A頁(yè)面中修改localstorage時(shí)，B頁(yè)面和C頁(yè)面中都可以監(jiān)聽(tīng)到storage事件，而A頁(yè)面是不會(huì)觸發(fā)storage事件的。
一個(gè)storage事件的實(shí)例如下：
其中比較關(guān)鍵的是key，newValue，oldValue這幾個(gè)值。key表示的是被改變的localStorage的key值，newValue是改變后最新的值，oldValue是舊的值。
實(shí)現(xiàn)兩個(gè)頁(yè)面同步的效果了解了上面的知識(shí)點(diǎn)，就可以解釋本文開(kāi)頭所提到的網(wǎng)頁(yè)是如何實(shí)現(xiàn)多頁(yè)面同步的了。來(lái)實(shí)現(xiàn)一個(gè)簡(jiǎn)單的。
0
效果如下：
在平時(shí)的業(yè)務(wù)開(kāi)發(fā)中，localStorage使用的頻率也不低，但確實(shí)是不知道還可以這么用。以后有遇到頁(yè)面同步的需求時(shí)，localStorage也可以作為一個(gè)選項(xiàng)了。符合預(yù)期。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/106741.html
摘要：它的大小限制為左右，是網(wǎng)景公司的前雇員在年月的發(fā)明。字符串轉(zhuǎn)義通過(guò)來(lái)設(shè)置的有效期。和的用法和屬性允許在瀏覽器中存儲(chǔ)對(duì)的數(shù)據(jù)。用于臨時(shí)保存同一窗口或標(biāo)簽頁(yè)的數(shù)據(jù)，在關(guān)閉窗口或標(biāo)簽頁(yè)之后將會(huì)刪除這些數(shù)據(jù)。是瀏覽器關(guān)閉后就立即清除。 一、localStorage、cookie、sessionStorage的區(qū)別與練習(xí) showImg(https://segmentfault.com/img/...
摘要：的區(qū)別及用法是本地存儲(chǔ)，存儲(chǔ)在客戶端，包括和。僅在當(dāng)前會(huì)話下有效，關(guān)閉頁(yè)面或?yàn)g覽器后被清除。源生接口可以接受，亦可再次封裝來(lái)對(duì)和有更好的支持。但需要程序員自己封裝，源生的接口不友好。每個(gè)最多只能有條，每個(gè)長(zhǎng)度不能超過(guò)。 localStorage、sessionStorage、Cookie的區(qū)別及用法 showImg(https://segmentfault.com/img/bVYLlH...
摘要：構(gòu)造函數(shù)在實(shí)際項(xiàng)目中，可能需要多次對(duì)進(jìn)行操作，我們可以通過(guò)一個(gè)構(gòu)造函數(shù)來(lái)更好的操作。注意在谷歌瀏覽器中，需要在不同標(biāo)簽頁(yè)中修改才會(huì)觸發(fā)該事件，即網(wǎng)頁(yè)監(jiān)聽(tīng)該事件，在網(wǎng)頁(yè)中修改，則網(wǎng)頁(yè)會(huì)觸發(fā)事件函數(shù)。 前言 HTML5 的 web Storage 存儲(chǔ)方式有兩種：localStorage 和 sessionStorage。 這兩種方式都是通過(guò)鍵值對(duì)保存數(shù)據(jù)，存取方便，不影響網(wǎng)站性能。他們的...
閱讀 3007·2023-04-26 02:29
閱讀 617·2019-08-30 15:54
閱讀 1704·2019-08-29 13:13
閱讀 631·2019-08-28 17:51
閱讀 2753·2019-08-26 13:58
閱讀 1560·2019-08-26 13:27
閱讀 2844·2019-08-26 11:39
閱讀 3475·2019-08-26 10:46
