使用SessionStorage时出现Chrome InvalidStateError

Chrome InvalidStateError while using SessionStorage

本文关键字：Chrome InvalidStateError SessionStorage 使用      更新时间：2023-09-26

我在创建的项目中有几个可扩展的div，并在页面之间保存它们的状态。我的代码如下，在Firefox和IE中运行良好。

在页面加载时，获取现有的已保存的仪表板状态，并打开以前保存的div：

$(function () {
    //Load the saved dashboard state
    var dashState;
    if (!sessionStorage.getItem("dashState")) {
        dashState = new Object({
            saved: []
        });
        sessionStorage.setItem("dashState", JSON.stringify(dashState));
    } else {
        dashState = JSON.parse(sessionStorage.getItem("dashState"));
    }
    for (var i = 0; i < dashState.saved.length; i++) {
        var currClient = $(dashState.saved[i]);
        $(currClient.selector).css("display", "block");
        var parent = $(currClient.selector).parent();
        $(parent[0].children[0]).attr("src", "/Content/minus.ico");
        $(parent[0].children[0]).attr("alt", "minus");
    }
});

当用户单击展开按钮时，保存哪个div被展开（或最小化），并将其从当前保存的会话中添加/删除。

function expandClick(clicked, target) {
    var dashState = JSON.parse(sessionStorage.getItem("dashState"));
    if (clicked.attr("src") == "/Content/minus.ico") {
        target.css("display", "none");
        clicked.attr("src", "/Content/plus.ico");
        clicked.attr("alt", "plus");
        //Remove from dashboard saved state
        dashState.saved.pop(target);
    } else {
        target.css("display", "block");
        clicked.attr("src", "/Content/minus.ico");
        clicked.attr("alt", "minus");
        //Add to dashboard saved state
        dashState.saved.push(target);
    }
    sessionStorage.setItem("dashState", JSON.stringify(dashState));
}

就像我说的，在Firefox和IE中效果很好。我的问题是Chrome。当最后一行代码执行时，sessionStorage.setItem("dashState", JSON.stringify(dashState));我得到错误"Uncaught InvalidStateError:试图使用一个不可用或不再可用的对象。"我很困惑，因为在调试器中，dashState已经启动。这是我遗漏的范围问题吗？

将jQuery对象推送到列表并尝试字符串化时，很可能会出现问题。浏览器可能会清理对象的某些部分，因为一旦对它们进行字符串化，它们就会超出范围（尽管通常对DOM元素进行字符串化会导致循环引用异常）。我建议尝试为每个元素分配一个唯一的ID，并将其存储在您保存的列表中：

dashState.saved.pop(target[0].id);
dashState.saved.push(target[0].id);
相关文章：