本地环境下sessionStorage数据无法存入JSON对象问题求助

问题概述 #

代码在Heroku平台运行时，可正常从sessionStorage提取rateDataU并作为属性存入transferData对象；迁移至本地环境后，sessionStorage能获取到rateDataU的数据，但存入transferData后该属性值显示为null，即使按照ChatGPT的修改方案调整代码，问题依旧存在。

原始代码 #

async function GenerateExcel() {
    let transferData = {}
    let qtyData = await propertiesData().then(qData => {return qData});
    transferData['qtyData'] = qtyData

    let checkerRateDataB = document.querySelector('#checkRateDataB')
    console.log("checkerRateDataB value:", checkerRateDataB.value);
    if(checkerRateDataB.value == 'on') {
        rateDataB = JSON.parse(sessionStorage.getItem("rateB"));
        console.log(rateDataB)
        transferData['rateDataB'] = rateDataB
    } else{
        transferData['rateDataB'] = null
    };

    let checkerRateDataU = document.querySelector('#checkRateDataU')
    console.log("checkerRateDataU value:", checkerRateDataU.value);
    if(checkerRateDataU.value == 'on') {
        rateDataU = JSON.parse(sessionStorage.getItem("rateU"));
        console.log(rateDataU);
        transferData['rateDataU'] = rateDataU
        console.log(transferData)
    } else{
        transferData['rateDataU'] = null
    };
}

本地控制台输出 #

Promise.then (async)
UserLogin @ (index):496
onclick @ (index):115
(index):744 checkerRateDataB value: on
(index):747 {G30: 332.09413969373963, Half Brick: 85.33031153804188}
(index):754 checkerRateDataU value: on
(index):757 {G30: 380.65825214182524, Half Brick: 53.84233534844155}
(index):759 {qtyData: {…}, rateDataB: {…}, rateDataU: {…}}qtyData: {Wall: {…}, Slab Conc: {…}, Beam Conc: {…}, Column Conc: {…}, Floor: {…}}rateDataB: {G30: 332.09413969373963, Half Brick: 85.33031153804188}rateDataU: null[[Prototype]]: Object

修改后的代码（ChatGPT方案） #

async function GenerateExcel() {
    let transferData = {}
    let rateDataB = {}
    let rateDataU = {}

    let qtyData = await propertiesData().then(qData => { return qData });
    transferData['qtyData'] = qtyData;

    let checkerRateDataB = document.querySelector('#checkRateDataB');
    console.log("checkerRateDataB value:", checkerRateDataB.value);
    if (checkerRateDataB.value == 'on') {
        rateDataB = JSON.parse(sessionStorage.getItem("rateB"));
        console.log("rateDataB:", rateDataB);
        transferData['rateDataB'] = rateDataB;
    } else {
        transferData['rateDataB'] = null;
    }

    let checkerRateDataU = document.querySelector('#checkRateDataU');
    console.log("checkerRateDataU value:", checkerRateDataU.value);

    if (checkerRateDataU.value == 'on') {
        rateDataU = await retrieveRateU(); // Await the asynchronous retrieval of rateU
        console.log("rateDataU:", rateDataU);
        transferData['rateDataU'] = rateDataU;
    } else {
        transferData['rateDataU'] = null;
    }
    console.log(transferData);

    // ... rest of your code
}

// Define an asynchronous function to retrieve rateU from sessionStorage
async function retrieveRateU() {
    return JSON.parse(sessionStorage.getItem("rateU"));
}

潜在问题排查方向 #

• 变量声明问题：原始代码中rateDataU未用let/const声明，会成为全局变量。若本地环境存在同名全局变量，可能覆盖当前值。建议所有变量都显式声明：let rateDataU = JSON.parse(sessionStorage.getItem("rateU"));。
• 控制台输出的误导性：浏览器控制台打印对象时，显示的是实时引用状态，而非打印时的快照。尝试用console.log(JSON.stringify(transferData))打印序列化后的字符串，确认rateDataU的真实值。
• sessionStorage数据完整性：打印sessionStorage.getItem("rateU")的原始字符串，确认数据格式是否正确，有无序列化/反序列化异常（比如特殊字符、截断）。
• 浏览器缓存问题：本地开发时浏览器可能缓存旧代码或数据，尝试硬刷新页面（Ctrl+Shift+R），或在开发者工具中开启“禁用缓存”（Network面板→Disable cache）。
• Checkbox状态判断错误：Checkbox的状态更可靠的判断方式是checked属性，而非value。将checkerRateDataU.value == 'on'改为checkerRateDataU.checked，避免因value值不一致导致逻辑错误。
• 异步代码冗余：sessionStorage是同步API，无需用async函数包裹获取逻辑，去掉不必要的await retrieveRateU()，直接同步获取即可减少潜在问题。

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