Question

我正在创建的项目中有几个可扩展的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已经启动。这是我缺少的范围问题吗？

Answer 1

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

dashState.saved.pop(target[0].id);
dashState.saved.push(target[0].id);

使用SessionStorage时Chrome InvalidStateError

1 个答案: