每次单击按钮时，如何防止我的程序覆盖 localStorage？

Question

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

function getElements() {

  var a = document.getElementById("sample").value;
  var x = new obj(a);

  function store() {
    localStorage.setItem('todays-values', Object.values(x));
  }

  store();
}

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

localStorage.getItem('todays-values');

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

我对 Javascript 很陌生，所以如果可能的话，我更愿意在不使用任何其他库的情况下解决这个问题。

Answer 1

第一：似乎您将 JavaScript 与一个类混合在一起（这里有一个例子：可以使用哪些技术在 JavaScript 中定义一个类，它们的权衡是什么？ ）

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

function ClassName() {
  var privateVar;
  this.publicVar;

  function privateFunction() {}

  this.publicFunction = function() {};
}

您不应该将函数包装在函数中，除非它具有含义（因为否则会对其他人造成混淆），但在给出的示例中，您不需要这样做。 此外，我看不出您创建新对象x的原因 - 如果您在保存对象之前创建该对象，您可以只保存该值，因为该对象将仅包含来自sample的值，因此您可以编写类似的内容这个：

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

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

回到你的问题：

正如Kalamarico提到的：如果您将新值写入todays-values您将覆盖旧值，您可以简单地从 localStorage 加载所有旧值，附加新值并将它们写回 localStorage。

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

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);

使用console.log命令，您可以查看 localStorage 的当前内容（您也可以使用开发人员工具进行检查 - 我发现 chrome 的效果最好，在 Application -> Local Storage 选项卡下，您可以检查您的 localStorage页）。

Answer 2

您需要阅读有关 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”取决于您的需要。

Answer 3

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

否则如何给键编号（“ yourKey_0 ”，“ yourKey_1 ”，...）并将当前（最大）索引（“ currentIndex ”）存储在本地存储中：

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

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