SessionStorage.setItem 不更新问题排查求助

1. 核心错误：混淆了sessionStorage和localStorage #

你代码里的测试逻辑完全搞错了存储对象：

• 你要更新的是sessionStorage，但测试时却用localStorage.getItem("socialnumbers")去读取值，这两个是浏览器完全独立的存储容器，互相不共享数据。
• 正确的测试验证应该用sessionStorage.getItem("socialnumbers")来查看更新结果。

2. onbeforeunload事件的潜在限制 #

浏览器对window.onbeforeunload事件中的异步操作有严格限制，如果DataTable的rows({ filter: "applied" }).data()涉及异步处理（比如服务器端渲染、延迟加载的数据），可能会因为浏览器提前终止事件流程，导致数据获取不完整，最终存储失败。

修复建议 #

步骤1：修正存储对象的混淆问题 #

把测试代码里的localStorage全部替换为sessionStorage：

window.onbeforeunload = () => {
    const ssnLs = $("#members-list-table")
        .DataTable()
        .rows({ filter: "applied" })
        .data()
        .map((item) => item.socialSecurityNumber)
        .toArray();
    
    // 测试：读取更新前的sessionStorage值
    var sessionStorageBefore = JSON.parse(sessionStorage.getItem("socialnumbers"));
   
    sessionStorage.setItem("socialnumbers", JSON.stringify(ssnLs));
    
    // 测试：读取更新后的sessionStorage值
    var sessionStorageAfter = JSON.parse(sessionStorage.getItem("socialnumbers"));
};

步骤2：提前缓存数据避免异步问题 #

如果DataTable使用了服务器端渲染或动态加载，rows().data()可能无法在unload事件中同步获取到最新数据。可以提前在数据变更时缓存社保号码，在unload事件中直接使用缓存值：

// 全局变量缓存社保号码
let cachedSSNs = [];

// 在DataTable数据更新时同步更新缓存（比如表格筛选、数据加载完成后）
$("#members-list-table").on("draw.dt", function() {
    cachedSSNs = $(this).DataTable()
        .rows({ filter: "applied" })
        .data()
        .map(item => item.socialSecurityNumber)
        .toArray();
});

// unload事件中直接使用缓存的数据
window.onbeforeunload = () => {
    sessionStorage.setItem("socialnumbers", JSON.stringify(cachedSSNs));
};

步骤3：注意sessionStorage的会话特性 #

sessionStorage是会话级存储，关闭标签页或浏览器后数据会被清除。验证时要确保在同一个会话中操作（比如刷新当前标签页，而非新开标签页查看）。

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