Question

我将值从我的下拉框保存到localStorage。但是，我不希望下次用户从下拉菜单中选择时使用新信息覆盖数据。我只想在没有覆盖的情况下继续为我的localStorage增加价值。任何帮助将不胜感激。

JavaScript代码：

function reason(){
        var dropd = document.getElementById("savedrop").value;
        var drophistory = JSON.parse(localStorage.getItem("savedrop"));
        localStorage.setItem("reason", JSON.stringify(dropd));
    }

HTML code：

<select id="savedrop">
                    <option value="" disabled="disabled" selected="selected">Please choose one</option>
                    <option value="one">1</option>
                    <option value="two">2</option>
                    <option value="three">3</option>
                </select>
<input id="btnbutton" class="btn" type="button" onClick="reason()" value="Submit">

Answer 1

在localStorage中，数据保存在字符串的键值对中。每次拨打setItem()时，它都会添加或覆盖现有值。并且getItem()只获取存储在localStorage中的值，这是一个字符串值。要解决这个问题，你必须使用一个数组stringify，然后存储它。以下是正确的代码：

function reason(){
    var dropd = document.getElementById("savedrop").value;
    var drophistory = JSON.parse(localStorage.getItem("reason")) || [];
    drophistory.push(dropd);
    localStorage.setItem("reason", JSON.stringify(drophistory));
}

Answer 2

首先获取数据，然后推送新值，然后覆盖它：

function reason(){
        var dropd = document.getElementById("savedrop").value;
        var drophistory = JSON.parse(localStorage.getItem("savedrop"));
        drophistory.push(droph);
        localStorage.setItem("reason", JSON.stringify(drophistory));
    }

localStorage继续覆盖我的数据

2 个答案: