localStorage Not Clearing in Any Browser Outside of Chrome

Question

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.

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:

$('#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?

Edit

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

I don't see any outstanding errors in the syntax, do you have a fiddle? Or any console errors? — id.ot, May 13 '15 at 19:26
There are no console errors in any browser. I'll try to create a dumbed down fiddle. — Drew Kennedy, May 13 '15 at 19:26
@Donal That may explain the IE11, but what about FireFox? If it's happening across multiple browsers, I'm led to believe this is possibly a coding issue rather than a required IE11 patch (though I will look into that). — Drew Kennedy, May 13 '15 at 19:28
@DrewKennedy Have you tried calling: window.localStorage.clear() — Donal, May 13 '15 at 19:29
@Donal Yes. I will update my title and OP to reflect this. My mistake. — Drew Kennedy, May 13 '15 at 19:30
Why are you using localStorage if you don't want the data to be stored across page loads? seems a little counter-intuitive, or, wrong tool for the job, to me. — Kevin B, May 13 '15 at 19:31
What do you think is the difference between the `location.reload()` that your span click does, and a refresh?! — Bergi, May 13 '15 at 19:31
@Bergi I'm guessing very little if any. I will admit ignorance to a resolution if this is the case. Is there an alternative? — Drew Kennedy, May 13 '15 at 19:35

score 0 · Accepted Answer · answered May 21 '15 at 13:14

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:

$('#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 = 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.

localStorage Not Clearing in Any Browser Outside of Chrome

Edit

1 Answers1