使用window.location.replace时Local Storage失效？求助排查问题

核心原因 #

直接通过file://协议打开本地HTML文件时，多数现代浏览器会限制LocalStorage的跨页面访问权限，导致不同页面无法共享存储的数据，因此在index2.html中读取到的status值为null。另外，原代码每次加载index.html都会强制重置status为unused，逻辑上不够严谨。

解决方案 #

1. 改用HTTP协议运行页面 #

不要直接双击打开HTML文件，通过本地服务器运行页面，确保两个页面处于同源环境下：

• Python 3：在文件目录下执行命令

  python -m http.server 8000
  

• Node.js：先安装http-server，再执行命令

  npm install -g http-server
  http-server
  

• VSCode插件：安装Live Server插件，右键点击index.html选择「Open with Live Server」

之后在浏览器访问http://localhost:8000/index.html，LocalStorage即可正常跨页面共享数据。

2. 优化代码逻辑（增强严谨性） #

修改index.html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>index.html</title>
    <script>
        // 仅在status未初始化时设置默认值
        if (!localStorage.getItem('status')) {
            localStorage.setItem('status', 'unused');
        }
        console.log(localStorage.getItem('status'));
        
        let usedButton = () => {
            localStorage.setItem('status', 'used');
            console.log(localStorage.getItem('status'));
            window.location.href = 'index2.html';
        }
    </script>
</head>
<body>
    <button onclick="usedButton()">Use me</button>
</body>
</html>

修改index2.html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>index2.html</title>
    <script>
        // 页面加载完成后自动检查状态并控制按钮
        window.addEventListener('DOMContentLoaded', () => {
            const status = localStorage.getItem('status');
            console.log('当前status:', status);
            const checkButton = document.querySelector('button');
            
            if (status === 'used') {
                console.log('按钮已被使用');
                checkButton.disabled = true; // 直接禁用按钮，符合需求
            }
        });

        let isButtonUsed = () => {
            const status = localStorage.getItem('status');
            if (status === 'used') {
                console.log('I was already used');
            } else {
                console.log('按钮还未被使用');
            }
        }
    </script>
</head>
<body>
    <button onclick="isButtonUsed()">Am I used?</button>
</body>
</html>

原理说明 #

LocalStorage遵循同源策略，只有当两个页面的协议、域名、端口完全一致时，才能共享存储数据。file://协议下的页面不满足同源条件，而通过本地服务器运行的页面都属于http://localhost:xxxx同源环境，因此可以正常读写共享的LocalStorage数据。

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