localStorage使用&注意事项&监听变量

一、使用

// 存储数据
localStorage.setItem('key', 'value');

// 检索数据
const value = localStorage.getItem('key');

// 删除数据
localStorage.removeItem('key');

// 清空所有数据
localStorage.clear();

二、注意事项

1.localStorage只能存储字符串类型的数据。如果存储其他类型的数据，需要转换为字符串类型。

2.localStorage的存储容量是有限的。每个浏览器都有自己的存储限制，通常为5-10MB。如果存储超过存储限制的数据，会抛出异常。

3.localStorage的数据仅限于当前域名和协议。如果需要在多个域名之间共享数据，可以考虑使用sessionStorage、Cookie或服务器端存储。

4.localStorage存储的数据是永久的，浏览器关闭或计算机重启存储的数据也会一直存在。需要小心使用localStorage，确保不会意外泄露敏感信息或占用过多的存储空间。

三、与sessionStorage区别

        生命周期：

localStorage中存储的数据是永久性的。

sessionStorage中存储的数据只在当前会话中存在。用户关闭浏览器窗口或标签页时，sessionStorage中的数据将被清除。

        可访问性：

localStorage中存储的数据可以在同一域名下的任何页面中访问，包括在不同的窗口或标签页中。

sessionStorage中存储的数据只能在同一窗口或标签页中访问。在不同的窗口或标签页中打开同一页面的话，每个窗口或标签页都有自己的sessionStorage实例，之间的数据是不共享的。

四、监听变量

localStorage提供了storage事件，用于监听localStorage中的数据变化。

当存储在localStorage中的数据发生变化时会触发storage。

例如：

// 添加事件监听器
window.addEventListener('storage', function(event) {
  if (event.key === 'myKey') {
    console.log('myKey的值已经被修改为：' + event.newValue);
  }
});

storage事件只会在其他窗口或标签页对localStorage进行更改时才会触发。如果当前窗口或标签页更改了localStorage中的数据，storage事件将不会触发。

因此，如果要监听localStorage当前页面的数据：

使用一个变量来存储需要在localStorage中存储和检索的数据。更改此变量的时候同步更新localStorage中的对应键值对。

或者

添加一个定时器，定期检查localStorage中存储的数据是否变化。

例如：

// 存储数据
localStorage.setItem('myKey', 'myValue');

// 检查localStorage中的数据变化
const checkLocalStorage = () => {
  const value = localStorage.getItem('myKey');
  if (value !== myVariable) {
    console.log('myVariable的值已经被修改为：' + value);
    myVariable = value;
  }
  setTimeout(checkLocalStorage, 1000);
};

// 初始化变量
let myVariable = localStorage.getItem('myKey');

// 启动定时器
checkLocalStorage();