在 Chrome 之外的任何浏览器中，localStorage 均未清除答案

【问题标题】：localStorage Not Clearing in Any Browser Outside of Chrome在 Chrome 之外的任何浏览器中，localStorage 均未清除
【发布时间】：2015-07-25 06:10:10
【问题描述】：

在 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()。

【问题讨论】：

我没有在语法中看到任何突出的错误，你有什么问题吗？或者任何控制台错误？
stackoverflow.com/a/21156133/379855
任何浏览器都没有控制台错误。我会尝试创建一个愚蠢的小提琴。
@Donal 这可以解释 IE11，但 FireFox 呢？如果它发生在多个浏览器上，我相信这可能是一个编码问题，而不是一个必需的 IE11 补丁（尽管我会调查）。
如果您不希望跨页面加载存储数据，为什么还要使用 localStorage？对我来说，这似乎有点违反直觉，或者是错误的工作工具。

标签： javascript jquery local-storage

【解决方案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 变通办法，但结果现在按预期工作。

【讨论】：