不同浏览器的localStorage问题

Question

I'm getting a really hard time with this: 我为此感到非常困难：

HTML 的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 的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? 这不适用于chrome，部分不适用于IE（“应用新选项”按钮不起作用，但是如果我选择并按F5键 ，它将生效），在Firefox中，这是所有方法中效果最好的，但并非按计划进行（默认情况下，第一次加载时group1second被默认选中，我不明白，为什么？

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. 第一个页面加载时选择第二个选项的原因是localStorage尚没有group1first数据，因此load功能中的第一个if条件为false。 The else block selects the second option. else块选择第二个选项。

不同浏览器的localStorage问题

问题描述

1 个解决方案

解决方案1
0 已采纳 2016-07-29 17:48:11

不同浏览器的localStorage问题

问题描述

1 个解决方案

解决方案1 0 已采纳 2016-07-29 17:48:11

解决方案1
0 已采纳 2016-07-29 17:48:11