时间戳

首页 > 解决方案 > Localstorage 仅保存最后一个对象（香草 Javscript）

javascript - Localstorage 仅保存最后一个对象（香草 Javscript）

问题描述

我想在 OOP 中制作一个带有书单的应用程序，但是在本地存储中保存列表时遇到问题。我让该用户可以添加他的书，现在我想将其保存到本地存储中。我制作了一个数组，并将对象保存到其中，但有些东西不起作用。我只得到最新的对象，我不知道为什么。

一块js：

    var title = document.querySelector('input#title').value;
    var author = document.querySelector('input#author').value;
    var status = document.querySelector('select').value;
    var table = document.querySelectorAll('.table')[1];
    var book = new Book(title, author, status);
    obj.push(book);
    localStorage.setItem('Array',JSON.stringify(obj));

标签： javascriptlocal-storage

解决方案

做一些事情，比如从你的本地获取 Array 值，然后在那里添加项目。

const array = JSON.parse(localStorage.getItem('Array')) || [];

class Book {
  constructor(title, author, status) {
    this.title = title;
    this.author = author;
    this.status = status;
  }
}

document.getElementById("push_item").addEventListener("click", function() {
  console.log("push");
  var title = document.querySelector('input#title').value;
  var author = document.querySelector('input#author').value;
  var status = document.querySelector('select').value;
  var table = document.querySelectorAll('.table')[1];
  var book = new Book(title, author, status);
  array.push(book);

  localStorage.setItem('Array', JSON.stringify(array));
});
<input id="title"></input>
<input id="author"></input>
<select >
  <option value="1"/>1
  <option value="2"/>2
</select>

<button id="push_item">Push</button>

推荐阅读