javascript - 刷新本地存储后恢复下拉选择

Question

我正在尝试将选项标签值保存到本地存储。将其值保存到本地存储后，我希望能够将选项标签设置为用户选择的选项。我尝试了以下操作，但我只能保存该值。我无法将选择标签更改为用户选择的值。

<select name="fruit" id="fruit">
    <option value="1">Apple</option>
    <option value="2">Guava</option>
    <option value="3">Mango</option>
    <option value="4">Grapes</option>
</select>

document.getElementById("fruit").onchange = function() {
 localStorage.setItem('fruit', document.getElementById("fruit").value);
}

if (localStorage.getItem('fruit') === "Guava") {
 document.getElementById("fruit").setAttribute('Selected', 'Guava');
}

Answer 1

这是因为您选择的选项的值和文本不同。尝试:

 <select name="fruit" id="fruit">
    <option value="Apple">Apple</option>
    <option value="Guava">Guava</option>
    <option value="Mango">Mango</option>
    <option value="Grapes">Grapes</option>
</select>

    document.getElementById("fruit").onchange = function() {
     localStorage['fruit'] = document.getElementById("fruit").value;
    }
    window.onload= function(){
        if(localStorage['fruit'])
            document.getElementById("fruit").value = localStorage['fruit'];
    }