Problems with localStorage with different browsers

Question

I'm getting a really hard time with this:

HTML

<body onload="load();">
...
<input id="group1first" class="group1first" type="radio" name="group1" value="Group-1 - First"><label for="group1first">Group-1 - First</label>
<input id="group1second" class="group1second" type="radio" name="group1" value="Group-1 - Second"><label for="group1second">Group-1 - Second</label><br>
<button type="button" onclick="applychanges()">Apply New Options</button>

I simply want to save the checked radio button by the user after he revisit the page with applied effect for this button, of course.

JavaScript

function load() {
    if (typeof(Storage) !== "undefined") {
        if(document.getElementById('group1first').checked){
            document.body.style.backgroundColor = "red"; //just for test
            localStorage.setItem('group1', 'true');
        }
        else if(document.getElementById('group1second').checked){
            document.body.style.backgroundColor = "green";  //just for test
            localStorage.setItem('group1', 'false');
        }
        if(localStorage.getItem('group1') == 'true'){
            document.body.style.backgroundColor = "red"; //just for test
            document.getElementById('group1first').checked = true;
        }
        else {
            document.body.style.backgroundColor = "green"; //just for test
            document.getElementById('group1second').checked = true;
        }
    } else {
        alert('Sorry! No Web Storage support.');
    }
}
function applychanges(){
window.location.reload(false); 
}

This is not working with chrome, partly with IE (the 'apply new options' buttons does not work, but if I select and hit F5 it takes effect), in Firefox it works the best out of them all, but yet not as planned(on the first load the group1second is checked by default, I don't understand, why?

Answer 1

You need to separate the reading and the writing from/to local storage. The reading should happen on page load, the writing when you submit the changes.

So here is how it could look:

function load() {
    if (typeof Storage !== "undefined") {
        if(localStorage.getItem('group1') == 'true'){
            document.body.style.backgroundColor = "red"; //just for test
            document.getElementById('group1first').checked = true;
        }
        else {
            document.body.style.backgroundColor = "green"; //just for test
            document.getElementById('group1second').checked = true;
        }
    } else {
        alert('Sorry! No Web Storage support.');
    }
}

function applychanges(){
    if (typeof Storage !== "undefined") {
        if(document.getElementById('group1first').checked){
            document.body.style.backgroundColor = "red"; //just for test
            localStorage.setItem('group1', 'true');
        }
        else if(document.getElementById('group1second').checked){
            document.body.style.backgroundColor = "green";  //just for test
            localStorage.setItem('group1', 'false');
        }
        window.location.reload(false); 
    } else {
        alert('Sorry! No Web Storage support.');
    }
}

The reason the second option is selected upon the first page load, is that localStorage has no group1first data yet, and so the first if condition in the load function is false. The else block selects the second option.

Problems with localStorage with different browsers

Question

1 answers

solution1
0 ACCPTED 2016-07-29 17:48:11

Problems with localStorage with different browsers

Question

1 answers

solution1 0 ACCPTED 2016-07-29 17:48:11

solution1
0 ACCPTED 2016-07-29 17:48:11