介绍

localStorage 为我们提供在浏览器中以键值对的方式保存数据的功能，存储在 localStorage 中的数据会一直保存，除非手动清理。

另外需要注意的是，localStorage 的键值对都是以字符串的形式存储的，如果 value 不是字符串类型，则会隐式转换为字符串。

使用

  1. localStorage.setItem("foo", "123456");
  2. localStorage.getItem("foo"); // "123456"
  4. localStorage.setItem("foo", 1);
  5. localStorage.getItem("foo"); // "1"
  7. localStorage.setItem("foo", true);
  8. localStorage.getItem("foo"); // "true"
  10. localStorage.setItem("foo", {a:1});
  11. localStorage.getItem("foo"); // "[object Object]"
  13. // 删除某一项
  14. localStorage.removeItem('foo');
  16. // 移除所有
  17. localStorage.clear();

window.onstorage

🚀 参考

监听其他页面的 localStorage 更新

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8. </head>
  10. <body>
  11.     <input type="text" id="input" onchange="onChangeHandler(event)">
  12.     <script>
  13.         const inputEl = document.getElementById("input");
  14.         window.onstorage = function (e) {
  15.             inputEl.value = e.newValue;
  16.         }
  17.         function onChangeHandler(e) {
  18.             localStorage.setItem("value", e.target.value);
  19.         }
  20.     </script>
  21. </body>
  23. </html>

⚠️ 修改 localStorage 的页面不会触发该事件。