Question

我正在为一个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>");
});
});

Answer 1

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

你想要的是一个对象数组（一个是常规数组，其中的项只是顺序的，或者是一个关联数组，你有一个访问项的键）。但是localStorage不支持数组，只支持字符串，因此在将数组存储到localStorage之前需要序列化（字符串化）数组，并在返回数据时进行反序列化。

基本上它将是：

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

但这意味着每次更改都会进行大量的解析和字符串化......

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

1 个答案: