javascript - 将输入值推送到本地存储中的数组出错

Question

对于我正在从事的项目，我想将输入字段中的值存储在存储在本地存储中的数组中。通过在这里查找较旧的问题，我已经取得了很大的进展，但仍然有些事情不太顺利。当我使用 console.log 检查输入内容后数组是否已填充时，它在我的控制台中显示一堆嵌套数组，我不知道如何修复/使用它们。

我的js:

names = [];
names.push(JSON.parse(localStorage.getItem('locname')));
localStorage.setItem('locname', JSON.stringify(names));

function saveData(data) {

  names = [];
  var data = document.getElementById("locationName").value;
  names = JSON.parse(localStorage.getItem('locname'));
  names.push(data);
  alert(names);
  localStorage.setItem('locname', JSON.stringify(names));
}

console.log(names);

在我的 HTML 中，我有一个 id=locationName 的输入和一个 onclick=saveData() 的按钮。

我做错了什么？

Answer 1

您可以尝试以下代码:

// Read value from storage, or empty array.
// You were doing something different here - you were putting array
// from localStorage into your "names" array, so for every page refresh
// you would make this structure deeper by 1.
var names = JSON.parse(localStorage.getItem('locname') || "[]");

function saveData(data) {
  var data = document.getElementById("locationName").value;
  names.push(data);
  localStorage.setItem('locname', JSON.stringify(names));
}

Working example on JSFiddle (使用开发者工具查看本地存储内容)。