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与一个函数混合使用（以下是一个示例：What techniques can be used to define a class in JavaScript, and what are their trade-offs?）

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

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

  function privateFunction() {}

  this.publicFunction = function() {};
}

你不应该在一个函数中包含一个函数，除非它有意义（否则它会让其他人感到困惑），但在给出的例子中你并不需要它。此外，我无法看到您创建新对象x的原因 - 如果在保存之前创建对象，则可以保存该值，因为该对象仅包含{{{ 1}}，所以你可以这样写：

sample

回到你的问题：

提到Kalamarico：如果你将新值写入document.getElementById("submit").addEventListener("click", getElements); function storeElements() { var sampleValue = document.getElementById("sample").value; localStorage.setItem('todays-values', sampleValue); }，你将覆盖你的旧值，你可以简单地从localStorage加载所有旧值并附加新值并将它们写回localStorage

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

todays-values

该函数可以让你为一个键附加一些值，你甚至可以再次包装这个函数，以便能够在你的点击功能中使用它：

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);命令，您可以看到localStorage的当前内容（您还可以查看开发人员工具 - 我发现Chrome的工作效果最好，在应用程序 - >本地存储选项卡下可以查看你网页的localStorage。）

Answer 2

您需要详细了解localStorage，这是HTML5引入的新功能，您可以查看here并查看所有功能。

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": { ... }
}

每次设置“今日价值”时，您都会覆盖密钥，如您所见，所以，如果您可以保留旧值，则需要进行此管理，首先您可以获取localstorage中的项目（如果有的话）是，并且你可以“合并”旧的价值和新的价值。或者您可以设置一个新密钥，例如：“todays-values1”取决于您的需要。

Answer 3

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

否则如何为键编号（＆＃34; yourKey_0＆＃34;，＆＃34; yourKey_1＆＃34;，...）以及存储当前（最大）索引（＆＃34; currentIndex＆＃34;）在本地存储中：

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

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

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

3 个答案: