SessionStorage跨页面失效：设置背景后第二页无法读取存储值

我尝试在第一页设置页面背景图，并将背景路径存入SessionStorage，在第二页读取该存储值来设置背景。具体代码如下：

第一页代码：

function NatureBackground() { 
  $('body').css('background-image', 'url("images/background-nature.jpg")'); 
  sessionStorage.setItem('background', 'images/background-nature.jpg') 
}

第二页代码：

$(document).ready(function() { 
  if(sessionStorage.getItem('background') === null) { 
    $('body').css('background-image', 'url("images/background-wood.jpg")'); 
  } else { 
    $('body').css('background-image', 'url(' + sessionStorage.getItem('background') + ')'); 
  } 
});

目前第一页背景设置正常，但第二页始终加载background-wood.jpg，请问我哪里操作错误？

1. 第一页的NatureBackground函数根本没被触发 #

这是最常见的问题！你只定义了函数，但如果没有通过点击事件、页面加载自动执行等方式触发它，sessionStorage.setItem就不会执行，第二页自然读不到存储的值，只能加载默认背景。

解决方法：
确保函数被调用，比如：

• 如果是通过按钮触发，给按钮绑定事件：

<button onclick="NatureBackground()">设置自然背景</button>

• 如果希望页面加载时自动设置背景，在第一页补充代码：

$(document).ready(function() {
  NatureBackground(); // 页面加载完成就执行函数
});

2. 两个页面不同源，SessionStorage无法共享 #

SessionStorage受同源策略限制，只有当两个页面的协议（http/https）、域名、端口完全一致时，才能共享SessionStorage数据。比如：

• 第一页是http://localhost:8080/page1.html，第二页是http://127.0.0.1:8080/page2.html —— 域名不同，读不到数据
• 第一页是http://example.com，第二页是https://example.com —— 协议不同，读不到数据

解决方法：
检查两个页面的访问地址，确保完全同源。

3. 浏览器环境导致SessionStorage被清空 #

如果你用了浏览器的隐私/无痕模式，或者关闭页面后重新打开，SessionStorage会被自动清空；也有可能是其他代码不小心执行了sessionStorage.clear()或者sessionStorage.removeItem('background')，删掉了存储的值。

解决方法：
用浏览器开发者工具调试确认：

1. 在第一页按F12打开开发者工具，切换到Application标签
2. 在左侧找到SessionStorage，查看是否存在background键，值是否正确
3. 打开第二页，同样查看SessionStorage，确认是否能看到这个键值对

4. CSS背景路径的语法优化（小细节，但能避免潜在问题） #

你第二页拼接的是url( + 存储值 + )，如果路径没有空格其实没问题，但用模板字符串可以让语法更清晰，也避免意外的引号问题：

$(document).ready(function() { 
  const bgPath = sessionStorage.getItem('background');
  if(bgPath === null) { 
    $('body').css('background-image', 'url("images/background-wood.jpg")'); 
  } else { 
    $('body').css('background-image', `url("${bgPath}")`); 
  } 
});

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