Question

我正在努力解决这个问题：

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>

当然，我只想在用户重新访问此页面时保存已选中的单选按钮。

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

这不适用于chrome，部分使用IE（'应用新选项'按钮不起作用，但如果我选择并点击 F5 它会生效），在Firefox中效果最好所有这些，但尚未按计划进行（在第一次加载时，默认情况下检查group1second，我不明白，为什么？

Answer 1

您需要将读取和写入与本地存储分开。读取应该在页面加载时发生，在提交更改时写入。

以下是它的外观：

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

第一页加载时选择第二个选项的原因是localStorage还没有group1first数据，因此if中的第一个load条件功能是假的。 else块选择第二个选项。

使用不同浏览器的localStorage出现问题

1 个答案: