如何使用输入字段将多个项目存储在本地存储中答案

【问题标题】：How to store multiple items in local storage using an input field如何使用输入字段将多个项目存储在本地存储中
【发布时间】：2014-08-18 20:43:18
【问题描述】：

我正在为 Vinyl 收藏创建一个小型数据库。 Ik 想通过在输入菜单中输入每个项目来列出我拥有的所有黑胶唱片，该菜单将数据存储在本地存储中并在同一个 html 页面上显示它们。

问题是：我最多只能在本地存储中存储 1 个项目。当我输入第二个项目时，第一个项目丢失了。所以我只能回忆我本地商店中最后存储的物品。

如何使用本地存储创建多个项目的列表？我已经尝试查找它，但我无法让它工作。

这是我的代码：

$(document).ready(function(){
$("#content").append("<tr><td>" + localStorage.Album + "</td>" + "<td>" + localStorage.Artist + "</td>" + "<td>" + localStorage.Year + "</td>" + "<td>" + localStorage.State + "</td></tr>");
$("#save").click(function() {




var album = $('#album').val();
 var artiest = $('#artiest').val();
  var jaar = $('#jaar').val();
   var staat = $('#staat :selected').text();
localStorage.Album = album;
localStorage.Artist = artiest;
localStorage.Year = jaar;
localStorage.State = staat;
$("#inhoud").append("<tr><td>" + localStorage.Album + "</td>" + "<td>"
localStorage.Artist + "</td>" + "<td>" + localStorage.Year + "</td>" + "<td>"
localStorage.State + "</td></tr>");
});
});

【问题讨论】：

标签： arrays variables input local-storage

【解决方案1】：

我不太确定 localStorage 是否真的是一个不错的选择。

您想要的是一个对象数组（可以是项目只是顺序的常规数组，也可以是具有访问项目的键的关联数组）。但是 localStorage 不支持数组，只支持字符串，因此您需要在将数组存储到 localStorage 之前对数组进行序列化（字符串化），并在取回内容时反序列化。

基本上是这样的：

var albums = localStorage.albums ? JSON.parse(localStorage.albums) : [];
albums.push({"Album":album, "Artist":artiest});
localStorage.albums = JSON.stringify(albums);

但这意味着每次更改都需要大量解析和字符串化...

【讨论】：