Question

对于我正在处理的项目，我想存储一个存储在localstorage中的数组中的输入字段的值。通过在这里查找较旧的问题，我已经设法走了很长的路，但仍然有些事情是不对的。在我输入内容后，当我使用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（使用开发人员工具查看本地存储内容）。

Answer 2

问题是你在数组names中放入了从本地存储中获取的数据。

更改

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

到

var names = []; // always declare your variables
if (localStorage.getItem('locname')) {
    names = JSON.parse(localStorage.getItem('locname'));
}

将输入值推送到本地存储中的数组是错误的

2 个答案: