Firefox中localStorage跨页面取值为null的问题求助

我在JavaScript作业里需要用localStorage在页面间保存作业参考号（Job Reference Number）。存值页面能正确获取到值CAD12，Chrome里运行正常，但在作业要求使用的Firefox中，切换页面后取值返回null（用alert测试）。

最小可复现示例 #

页面1（mre.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">
    <script src="mre.js"> </script>
    <title>mre</title>
</head>
<body>
    <h1> Mre test </h1>
    <p id = "jrn" >JRN CAD12</p>
    <p id="butt"> next page </p>
</body>
</html>

页面2（mrenew.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">
    <script src="mre.js"> </script>
    <title>mrenew</title>
</head>
<body>
    <h1> MRE test page 2 </h1>
        <p id="clickme"> click here to open alert </p>
</body>
</html>

JS文件（mre.js） #

function retrieveJRN(){
    var strJRN = document.getElementById("jrn").textContent;
    var JRN= strJRN.substring(4);
    localStorage.setItem('clJRN', JRN);
    alert (JRN);
}
function changewb(){
    window.location.href ="mrenew.html";
}
function clicktochange(){
   var button = document.getElementById("butt");
   button.onclick= changewb;
}
function pasteCloud (){
    alert (localStorage.getItem('clJRN'));
}
function init(){
    if (window.location.href.indexOf('mre.html') > -1) {
    var jrn = document.getElementById("jrn");
    jrn.onclick=retrieveJRN;
    clicktochange();
    }
    if (window.location.href.indexOf('mrenew.html') > -1){
    var clickme = document.getElementById("clickme");
    clickme.onclick = pasteCloud;
    }
}
window.onload=init;

解决方案 #

1. 检查操作流程 #

当前代码要求必须先点击显示"JRN CAD12"的文本触发存储，再点击"next page"跳转。如果直接跳转，localStorage中没有存储数据，自然返回null。

2. 解决Firefox本地文件的localStorage限制 #

Firefox对file://协议下的本地文件有严格的localStorage隔离策略，不同本地页面可能无法共享存储数据。解决方法是：

• 使用本地服务器运行页面，比如用Python的python -m http.server命令启动服务器，或者用VS Code的Live Server插件，通过http://localhost访问页面，而非直接打开本地文件。

3. 优化存储与跳转的时序 #

将存储逻辑和跳转逻辑合并，确保存储完成后再跳转，避免页面跳转时存储未生效的问题。修改changewb函数如下：

function changewb(){
    // 先执行存储操作
    retrieveJRN();
    // 确保存储完成后跳转
    setTimeout(() => {
        window.location.href = "mrenew.html";
    }, 0);
}

同时可以去掉原有的jrn.onclick=retrieveJRN绑定，用户只需点击一次按钮就能完成存储和跳转，简化操作流程。

内容的提问来源于stack exchange，提问作者Omar Al angurli