跨HTML页面数据访问问题求助：尝试JSON及方案未解决

我查了很多跨HTML页面数据访问的文档和视频方案，都没法实现数据互通，之前试JSON也没用。怎么才能实现跨页面数据访问？以下是我写的代码：

add.html #

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
    <form action="" id="myForm">
        <input type="text" name="input" id="input" placeholder="input">
        <button type="submit">add</button>
    </form>
    
    <script>
       const form = document.getElementById('myForm')
       const input = document.getElementById('input')
       form.addEventListener('submit' , function(e) {
            e.preventDefault()
            const inputValue = input.value;
            localStorage.setItem('myInput' , inputValue)
        
       })
    </script>
</body>

show.html #

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p id="showInput"></p>
    <script>
        const input = localStorage.getItem('myInput')
        document.getElementById('showInput').textContent = input;
    </script>
</body>

问题排查与修复方案 #

你的代码逻辑本身没问题，但可能因为以下原因导致失效：

• 本地文件协议限制：直接双击打开html文件（file://协议）时，部分浏览器会限制localStorage的跨页面访问，建议用本地服务器（比如Node.js的http-server、Python的SimpleHTTPServer）打开页面，确保页面在同一域名下。
• 未实时监听数据变化：当前show.html仅在页面加载时获取一次localStorage值，如果add.html修改数据时show.html已经打开，不会自动更新内容。
• 未处理空值情况：如果localStorage中没有myInput键，会显示null，影响体验。

修改后的show.html代码：

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p id="showInput"></p>
    <script>
        const showElement = document.getElementById('showInput');
        
        // 初始化显示数据
        function updateDisplay() {
            const inputValue = localStorage.getItem('myInput');
            showElement.textContent = inputValue || '暂无数据';
        }
        
        // 页面加载时初始化
        updateDisplay();
        
        // 监听其他页面修改localStorage的事件
        window.addEventListener('storage', function(e) {
            if (e.key === 'myInput') {
                updateDisplay();
            }
        });
    </script>
</body>

其他可选跨页面数据方案 #

如果localStorage不满足需求，还可以用这些方法：

• sessionStorage：和localStorage类似，但数据仅在当前会话有效，关闭浏览器就清除。
• URL参数传递：在跳转时把数据拼到URL上，比如window.location.href = 'show.html?data=' + encodeURIComponent(inputValue)，然后在show.html中用new URLSearchParams(window.location.search).get('data')获取。
• Cookie：适合存储少量数据，可设置过期时间，跨页面访问需要注意Cookie的domain和path配置。

内容的提问来源于stack exchange，提问作者Berkant ünal