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