Javascript 如何防止每次单击按钮时程序覆盖本地存储？ document.getElementById（“提交”）.addEventListener（“单击”，getElements） 函数getElements（）{ var a=document.getElementById（“示例”）.value； var x=新的obj（a）； 函数存储（）{ localStorage.setItem（'todays-values'，Object.values（x））； } store（）； }

在一个单独的js文件中，我调用

localStorage.getItem('todays-values');

我得到这些值，但是如果我将新的输入放入html文件并单击submit按钮，以前的值将被覆盖并替换为新的值。如何存储提交的所有值并防止旧值被替换

---

我对Javascript非常陌生，因此如果可能的话，我更愿意在不使用任何附加库的情况下解决这个问题

您需要了解更多有关localStorage的信息，这是HTML5引入的一项新功能，您可以查看并查看所有功能

localStorage像JSON对象一样存储数据，如果您不知道什么是JSON，则需要查找信息。在javascript中，以这种方式考虑对象：

var myData = {
  myName: 'Kalamarico',
  myAge: undefined
};

这是一个Javascript对象，JSON非常类似，它是对象的表示。 当您执行以下操作时，localStorage API以这种方式存储数据：

localStorage.setItem('todays-values', Object.values(x))

localStorage保存一个新条目，一个键“todays values”，其值是一个对象，因此，您的localStorage似乎：

{
  "todays-values": { ... }
}

---

每次设置“todays values”时，都会覆盖该键，正如您所看到的，因此，如果可以保留旧值，则需要执行此管理，首先可以在localstorage中获取项（如果有），然后可以“合并”旧值和新值。或者，您可以设置一个新密钥，例如：“todays-values1”取决于您的需要。

如果您每天只需要存储一个键值对，则可以在密钥字符串中添加日期

否则，如何对键进行编号（“code>yourKey\u 0”、“

yourKey\u 1

”、…）并将当前（最大）索引（“code>currentIndex”）存储在本地存储器中：

function store(value) {
    newIndex = localStorage.getItem("currentIndex") + 1;
    localStorage.setItem("yourKey_" + newIndex, value);
    localStorage.setItem("currentIndex", newIndex);
}

---

如果在存储整数值时遇到问题，请先转换为字符串。

首先：您似乎将JavaScript类与函数混合在一起（下面是一个示例：）

例如，这是JavaScript中的等效类：

你不应该把一个函数包装在一个函数中，除非它有意义（因为它会让其他人感到困惑），但是在给出的例子中，你不需要它。我也看不出创建新对象的原因-如果在保存对象之前创建对象，您可以只保存值，因为对象将只包含来自

示例的值，因此您可以编写如下内容：

document.getElementById("submit").addEventListener("click", getElements);

function storeElements() {
  var sampleValue = document.getElementById("sample").value;
  localStorage.setItem('todays-values', sampleValue);      
}

回到你的问题：

如前所述：如果您将新值写入
todays values
中，您将覆盖旧值，您只需从localStorage加载所有旧值并附加新值，然后将它们写回localStorage即可

您还应该注意，localStorage只接受字符串，因此您应该将对象字符串化（请参阅）

该函数将允许您为键添加一些值，您甚至可以再次包装此函数，以便在单击函数中使用它：

function onSubmitClick() {
  appendValueToStorage('todays-values', document.getElementById("sample").value);
}

document.getElementById("submit").addEventListener("click", onSubmitClick);

使用
console.log
命令，您可以查看本地存储的当前内容（您也可以使用开发人员工具进行检查-我发现chrome的工具效果最好，在应用程序->本地存储选项卡下，您可以检查页面的本地存储）。
而不是覆盖本地存储项，您应该将用户值存储在数组中。每次单击submit按钮时，您的脚本都应该获取本地存储项（它是一个数组），附加到它，然后重写它。但是，如果你能发布一个非常有用的示例，它将无法正常工作。我添加了一个如何读取和写入localStorage的示例：我认为这是一个非常“黑客”的解决方案，你可以把一个数组字符串化，然后把它放到
localStorage
中，而不是把数组分成几段，给每个值一个不同的
key+index
命名，然后把它放到
localStorage
@TobiasHelbich中。我同意在大多数情况下（可能是这种情况下）您的解决方案将更适合。然而，在某些情况下，类似于我的解决方案的方法可能是这样做的。很好的解释。非常感谢@阿洛尼什卡，如果这是你要找的，请注明答案；）
function appendValueToStorage(key, value) {
  var values = JSON.parse(localStorage.getItem(key));
  if (values === null) {
    values = [];
  }

  values.push(value);
  localStorage.setItem(key, JSON.stringify(values));
  console.log(localStorage.getItem(key));
}

appendValueToStorage('todays-values', document.getElementById("sample").value);

function onSubmitClick() {
  appendValueToStorage('todays-values', document.getElementById("sample").value);
}

document.getElementById("submit").addEventListener("click", onSubmitClick);