关于localStorage你可能忽略掉的一些方法和属性
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
分类:
JavaScript
, 浏览器
标签:
JavaScript
, Web API
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战