在Chrome以外的任何浏览器中，localStorage都不会清除

I'm having an issue when it comes to the localStorage clearing in any browser environment outside of Chrome. I have a captcha using shapes that the user must draw to submit a form. There is a span the user can click to generate a new shape. In order to keep the information inputted into the previous fields, I store the data in localStorage every time a new shape is requested. However, if the page is refreshed, I'd like the localStorage to be completely wiped out.

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

Here is the code for the span that the user clicks on:

以下是用户点击的范围的代码:

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

And here is the JS for the localStorage:

这里是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();
}

This code works flawlessly in Chrome, but the page refresh in IE and Firefox fails to clear the localStorage. Am I doing something wrong for the localStorage to clear across multiple browsers?

此代码在Chrome中完美运行,但IE和Firefox中的页面刷新无法清除localStorage。我是否因为localStorage在多个浏览器中清除而做错了什么?

Edit

I have tried using window.location.clear(), and for good measure, localSession.clear().

我尝试过使用window.location.clear(),并且很好地测量了localSession.clear()。

1 个解决方案

#1

I managed to finally get it to work. Part of the problem was the call of:

我设法最终让它工作。部分问题是:

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

FireFox and IE11 both were having trouble with this anonymous function call. I had to change my on.click event to:

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);
});

And my window.onload anonymous function call had to be slightly reconfigured to:

并且我的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();
}

Some hacky workarounds, but the results are now working as desired.

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

#1