Chrome 以外的任何浏览器中的 localStorage 均未清除

Question

我在 Chrome 以外的任何浏览器环境中遇到 localStorage 清除问题。我有一个使用形状的验证码，用户必须绘制这些形状才能提交表单。有一个 span 用户可以单击以生成新形状。为了保留输入到先前字段中的信息，每次请求新形状时，我都会将数据存储在 localStorage 中。但是，如果刷新页面，我希望 localStorage 被完全清除。

这是用户点击的 span 的代码：

<span style="color:#0000EE;cursor:pointer;" id="new-shape" onclick="window.location.reload()" title="Click for a new shape">new shape</span>

这里是 localStorage 的 JS：

$('#new-shape').on('click', function () {
    var stickies = $('.sticky');
    var dropdowns = $('select');

    window.onbeforeunload = function () {
        localStorage.setItem("branch", $('#00NL0000003INTJ').val());
        localStorage.setItem("department", $('#00NL0000003I0Ux').val());
        localStorage.setItem("contact", $('#00NL0000003INUC').val());

        localStorage.setItem("company", stickies[0].value);
        localStorage.setItem("firstName", stickies[1].value);
        localStorage.setItem("lastName", stickies[2].value);
        localStorage.setItem("phone", stickies[3].value);
        localStorage.setItem("ext", stickies[4].value);
        localStorage.setItem("email", stickies[5].value);
        localStorage.setItem("help", stickies[6].value);
    }
});

window.onload = function () {
    var stickies = $('.sticky');
    var dropdowns = $('select');

    var selects = [localStorage.getItem("branch"), localStorage.getItem("department"), localStorage.getItem("contact")];

    var company = localStorage.getItem("company");
    var first = localStorage.getItem("firstName");
    var last = localStorage.getItem("lastName");
    var phone = localStorage.getItem("phone");
    var ext = localStorage.getItem("ext");
    var email = localStorage.getItem("email");
    var help = localStorage.getItem("help");

    var stickiesArr = [company, first, last, phone, ext, email, help];

    for (var i = 0; i < stickiesArr.length; i++) {
        if (stickiesArr[i] != null) {
            stickies[i].value = stickiesArr[i];
        }
    }

    for (var i = 0; i < selects.length; i++) {
        if (selects[i] != null) {
            dropdowns[i].value = selects[i];
        }
    }
    //this allows the wipe out of all data on a page refresh,
    //but clicking on "new shape" will maintain the data
    localStorage.clear();
}

此代码在 Chrome 中完美运行，但在 IE 和 Firefox 中刷新页面无法清除 localStorage。我是不是做错了什么让 localStorage 跨多个浏览器清除？

编辑

我已经尝试使用 window.location.clear()，并且为了更好地衡量，localSession.clear()。

Answer 1

我终于让它开始工作了。部分问题是调用：

window.onbeforeunload = function () { (...) }

FireFox 和 IE11 都遇到了这个匿名函数调用的问题。我不得不将 on.click 事件更改为：

$('#new-shape').on('click', function () {
    var stickies = $('.sticky');

    localStorage.setItem("branch", $('#00NL0000003INTJ').val());
    localStorage.setItem("department", $('#00NL0000003I0Ux').val());
    localStorage.setItem("contact", $('#00NL0000003INUC').val());

    localStorage.setItem("company", stickies[0].value);
    localStorage.setItem("firstName", stickies[1].value);
    localStorage.setItem("lastName", stickies[2].value);
    localStorage.setItem("phone", stickies[3].value);
    localStorage.setItem("ext", stickies[4].value);
    localStorage.setItem("email", stickies[5].value);
    localStorage.setItem("help", stickies[6].value);
});

我的 window.onload 匿名函数调用必须稍微重新配置为：

window.onload = function () {
    var stickies = $('.sticky');
    var dropdowns = $('select');
    var selects = [localStorage.getItem("branch"), localStorage.getItem("department"), localStorage.getItem("contact")];

    var company = localStorage.getItem("company");
    var first = localStorage.getItem("firstName");
    var last = localStorage.getItem("lastName");
    var phone = localStorage.getItem("phone");
    var ext = localStorage.getItem("ext");
    var email = localStorage.getItem("email");
    var help = localStorage.getItem("help");

    var localStorageArr = [company, first, last, phone, ext, email, help];

    //input fields sticky
    for (var i = 0; i < localStorageArr.length; i++) {
        stickies[i].value = localStorageArr[i];
    }

    //dropdown fields sticky
    for (var i = 0; i < selects.length; i++) {
        if (selects[i] != null) {
            dropdowns[i].value = selects[i];
        } else {
            dropdowns[i].selectedIndex = 0;
        }
    }

    //fixing textarea
    if (help === null) {
        stickies[6].value = "";
    }
    localStorage.clear();
}

一些 hacky 解决方法，但结果现在按预期工作。

Chrome 以外的任何浏览器中的 localStorage 均未清除

localStorage Not Clearing in Any Browser Outside of Chrome

javascript

jquery

local-storage

编辑