localStorage 是我们常用的浏览器 API，用于在客户端进行持久化存储时非常方便。但你是否仅熟悉 setItem() 和 getItem() 两个基础方法？本文将介绍 localStorage 的一些不常见但非常实用的方法和属性。
方法和属性
setItem(key, value)– 存储键值对getItem(key)– 通过key获取存储的值removeItem(key)– 删除键值对clear()– 清空所有键值对key(index)– 获取指定索引的 keylength– 返回键值对的个数
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– 触发更新事件的页面 URLstorageArea– 触发更新事件的存储区域对象（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