localStorage 不断覆盖我的数据

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代码：

<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 不断覆盖我的数据

localStorage Keeps Overwriting My Data

html

javascript

json

overwrite

local-storage