localStorage 不断覆盖我的数据答案

【问题标题】：localStorage Keeps Overwriting My DatalocalStorage 不断覆盖我的数据
【发布时间】：2017-04-12 03:27:30
【问题描述】：

我正在将下拉框中的值保存到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">

【问题讨论】：

添加而不覆盖是什么意思？它是一个数组，你想向它推送新值，还是它是一个数字，你想把新值加到它上面？你能试着解释清楚一点吗？
它是一个数组，我只想将值（“一、二或三”）添加到本地存储中而不覆盖。就像用户在会话中选择“一”，然后在另一个会话中用户选择“三”，我希望本地存储中的数据显示“[一三]”等

标签： javascript html json local-storage overwrite

【解决方案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));
}

【讨论】：

【解决方案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));
    }

【讨论】：