查看浏览器localStorage内容的代码运行异常问题咨询

问题根因 #

localStorage受浏览器同源策略限制，仅允许同协议、同域名、同端口的页面读写对应域下的存储数据。你当前脚本运行的页面和window.open打开的https://www.cms.gov属于完全不同的源，现有代码里的showlocal方法读取的是当前脚本所在页面的localStorage，而非新打开的cms.gov页面的存储内容，所以大概率会出现alert输出为0、控制台无内容打印的情况。

排查步骤 #

• 先确认当前运行脚本的页面是否有存储localStorage数据：打开浏览器开发者工具（F12），切换到「应用/Application」标签，找到当前域名下的LocalStorage面板，手动核对存储的键值对数量和内容，和脚本输出结果做对比，如果确实一致说明脚本本身读取逻辑没问题，只是读的不是目标页面的存储。
• 检查浏览器控制台是否有报错：如果有key is not defined报错，是因为代码里的key变量没有加声明关键字，属于隐式全局变量，部分严格模式下会触发报错打断执行。
• 检查浏览器是否禁用了本地存储：部分浏览器隐私模式会限制localStorage的读写，可在设置里确认存储权限是否正常开启。

解决方法 #

如果你需要读取当前页面的localStorage #

修正变量声明问题即可，修改后的代码如下：

<script>
    window.open("https://www.cms.gov/medicare-coverage-database/search-results.aspx?keyword=memo&keywordType=starts&areaId=all&docType=NCA,NCD,F&contractOption=all&sortBy=relevance", "wf");

    showlocal();
    
    function showlocal()
    {
        alert(window.localStorage.length);
        
        for (var i = 0; i < window.localStorage.length; i++)
        {
            // 加var声明变量，避免严格模式报错
            var key=window.localStorage.key(i);
            console.log(key+' => '+window.localStorage.getItem(key));
        }
    }
</script>

如果你需要读取新打开的cms.gov页面的localStorage #

受同源策略限制，跨源页面的存储数据无法直接通过父页面的JS读取，你可以将读取逻辑放到cms.gov域下的页面脚本中运行，如果你有cms.gov站点的代码部署权限，直接把showlocal逻辑加到对应页面的脚本里即可。

注：如果没有目标站点的代码权限，没有合规方案可以跨源读取其他站点的localStorage，这是浏览器的安全限制，避免用户隐私数据泄露。

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