Question

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

2014-06-04

2801

javascript arrays json local-storage

对于我正在开展的项目，我想将输入字段的值存储在本地存储中存储的数组中。通过查找此处的旧问题，我已经取得了很大进展，但仍然有些不对劲。当我使用 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));
}

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