localStorage.clear()正确用法及同域存储数据互访问题咨询

1. localStorage.clear() 的作用范围 #

localStorage.clear() 严格遵循浏览器同源策略，作用范围明确：

• 不会清空当前浏览器所有站点的 localStorage 数据，仅作用于当前页面协议、域名、端口三者完全一致的站点存储空间，不同浏览器、不同站点的 localStorage 完全隔离，不会删除其他程序或站点的存储配置。
• 同一域名下的所有页面、脚本共享同一个 localStorage 存储空间，只要在同域环境下调用 localStorage.clear()，会清空该域名下所有存储的键值对，与写入数据的脚本/页面无关。你提到的同域名下 script1、script2 的场景中，任意脚本调用 localStorage.clear() 都会删除两个脚本的所有存储数据，确实存在误删风险。

2. 误删风险的防护方案 #

随意使用 localStorage.clear() 风险很高，推荐通过以下方式规避：

• 业务侧统一为自己程序的存储键添加专属前缀，例如程序A的所有存储键都加 myApp_ 前缀，删除时仅筛选带此前缀的键单独删除，你提到的先筛选自有键再删除的操作是必要的，参考实现：

// 仅删除当前程序的存储数据
const APP_PREFIX = 'myApp_'
Object.keys(localStorage).forEach(key => {
  if (key.startsWith(APP_PREFIX)) {
    localStorage.removeItem(key)
  }
})

3. 测试用例跨页面无法读取存储的问题原因 #

你的测试代码逻辑没有问题，出现跨页面无法读取存储、仅能看到当前页面键的原因是你直接通过 file:// 协议打开本地 HTML 文件：浏览器对本地文件协议有特殊安全限制，即使是同目录下的文件，也会被判定为不同源，localStorage 自然无法共享。
你可以在本地启动任意静态文件服务，通过 http://localhost:端口 地址访问两个页面，此时二者属于同源，就能正常共享 localStorage 数据。

内容的提问来源于stack exchange，提问作者jmrker