关于localStorage你可能忽略掉的一些方法和属性

localStorage 是我们常用的浏览器 API，用于在客户端进行持久化存储时非常方便。但你是否仅熟悉 setItem() 和 getItem() 两个基础方法？本文将介绍 localStorage 的一些不常见但非常实用的方法和属性。

方法和属性

• setItem(key, value) – 存储键值对
• getItem(key) – 通过key获取存储的值
• removeItem(key) – 删除键值对
• clear() – 清空所有键值对
• key(index) – 获取指定索引的 key
• length – 返回键值对的个数

storage 事件

localStorage 绑定在同一源（域名 + 协议 + 端口）上，只有同源的标签页才能访问相同的 localStorage。如果想要监听其他标签页对 localStorage 的更新，可以使用 storage 事件。

// 在标签页1（www.baidu.com）中注册监听事件
// 也可以使用 window.addEventListener('storage', event => {}) 进行注册
window.onstorage = event => {
	console.log(event)
};

// 在第二个标签页（www.baidu.com）中更新storage
localStorage.setItem('test', Date.now());

• key – 更新的键名。若调用 clear() 方法，key 将为 null。
• oldValue – 更新前的值
• newValue – 更新后的值
• url – 触发更新事件的页面 URL
• storageArea – 触发更新事件的存储区域对象（localStorage 或 sessionStorage）

基于这个方法，我们实际上能做很多有意思的事情，比如，封装一个基于localStorage的广播API，用于同源下不同标签页之间的通信。

点击查看代码

// 定义广播 API 的类
class BroadcastAPI {
  constructor(channelName) {
    this.channel = channelName; // 广播通道的名称
    this.listeners = []; // 存储消息监听器的数组

    // 监听 storage 事件，以便接收其他标签页的广播消息
    window.addEventListener('storage', this.handleStorageEvent.bind(this));
  }

  // 发送消息到广播通道
  send(message) {
    localStorage.setItem(this.channel, JSON.stringify(message));
  }

  // 监听广播消息
  listen(callback) {
    this.listeners.push(callback);
  }

  // 处理 storage 事件，当其他标签页发送消息时被调用
  handleStorageEvent(event) {
    if (event.key === this.channel) {
      const message = JSON.parse(event.newValue);
      this.listeners.forEach(callback => {
        callback(message);
      });
    }
  }

  // 停止监听广播消息
  stopListening(callback) {
    this.listeners = this.listeners.filter(listener => listener !== callback);
  }
}

// 示例用法
const broadcast = new BroadcastAPI('myBroadcastChannel');

// 发送消息
broadcast.send({ type: 'greeting', content: 'Hello from another tab!' });

// 监听消息
broadcast.listen(message => {
  console.log('Received message:', message);
});

// 停止监听消息（可选）
// broadcast.stopListening(callback);

其他注意事项

• 上述讨论也适用于 sessionStorage，但它对标签页有更严格的限制：当标签页关闭时，其内容将被清除。
• key 和 value 都必须是字符串
• 不同浏览器对数据存储的大小限制可能有所不同，一般来说，最多可存储约 5MB 的数据。
• 若要获取所有存储的键，可以使用 Object.keys(localStorage)
• 只有这几个方法会触发storage事件：setItem, removeItem, clear