你可能不知道的LocalStorage用法

時間 2019-11-06

標籤可能不知道 localstorage 用法简体版

原文原文鏈接

寫在前面

本文首發於公衆號：符合預期的CoyPanjavascript

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

若是我開兩個瀏覽器tab，同時訪問這個頁面，我在其中一個頁面切換ppt，另一個頁面會跟着變化。連接在這裏：html

blog.isquaredsoftware.com/presentatio…java

效果以下：react

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

localStorage基本知識點

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

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

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

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

// 移除全部
localStorage.clear();
複製代碼

有幾個點須要注意：瀏覽器

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

二、localStorage是以字符串的形式保存數據的。性能

三、對於每個域，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是舊的值。

實現兩個頁面同步的效果

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

<html>
<head>
    <style> .count { font-size: 20px; color: red; } </style>
</head>
<body>
    <div class="count">0</div>
    <button>click</button>
    <script> window.onload = function () { var btnEl = document.querySelector('button'); var countEl = document.querySelector('.count'); btnEl.addEventListener('click', function () { var curCount = Number(localStorage.getItem('count')); var newCount = curCount + 1; countEl.innerHTML = newCount; localStorage.setItem('count', newCount); }); window.addEventListener('storage', function (e) { var newValue = e.newValue; countEl.innerHTML = newValue; }); } </script>
</body>

</html>
複製代碼