无法将对象保存到本地存储

Question

我正在构建一个书柜来存储有关某人正在阅读的书籍的信息。我希望能够存储输入的任何信息，以便它在页面刷新后不会消失。我正在尝试使用本地存储，但到目前为止我无法让它在页面加载后打印信息。

我确实已经尝试了很多选择，这就是我现在正在研究的。

请注意，代码已被最小化，以便于处理。

我很感谢您的帮助。

编辑：如果我尝试 console.log 或警报，我会收到一条空消息。

let retrieveBookShelf = localStorage.getItem("storedbookShelf");

let bookShelf = JSON.parse(retrieveBookShelf);


const
  shelf = document.getElementById('shelf')
, addBookBtn = document.getElementById('add-book')
, myForm = document.getElementById('form')
, formDiv = document.getElementById('formcontainer')
, submitFormBtn = document.getElementById('submitform')
, booksElms = [];


class BookDetails {
    constructor(title){
        this.title = title
    }
}

addBookBtn.addEventListener('click', () => 
  {
 
  let book = document.createElement('div');
  book.classList.add('book');
  shelf.appendChild(book);
  booksElms.push(book);
  });


myForm.addEventListener('submit', e =>
  {
  e.preventDefault();
  booksElms.forEach( book =>
    {
    if ( book.textContent == '' )  // set value if empty
      book.textContent = myForm.booktitle.value; 
    });

    var title = document.getElementById("booktitle").value;

newBookAdd = new BookDetails(title);
bookShelf.push(newBookAdd);
var storeBooks = JSON.stringify(bookShelf);
  
localStorage.setItem("storedbookShelf", (storeBooks));
  
  });



  console.log(bookShelf);

#shelf {
    height: 150px;
    border-bottom: 5px solid #000;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(25px,40px));
    align-items: end;
  margin-bottom: 15px;
}

.book {
    border: 1px solid #000;
    height: 100px;
    width:25px;
    display: inline-block;
  padding-top: 5px;
    writing-mode: vertical-rl;
    font-family: 'Roboto', sans-serif;
}

#add-book {
  margin-bottom: 15px;
}

<div id="bookshelf">

                    <div id="shelf"></div>
                    
                </div>

<button id="add-book">+</button>

<form id="form" >

                        <label for="booktitle">Book Title</label><br>
                        <input type="text" id="booktitle" name="booktitle"><br>

                        <input type="submit" id="submitform" value="Submit">
                        

                    </form>

Answer 1

以下是如何保存和打印书柜的示例：

const
    localStorageKey = 'storedbookShelf',
  shelf = document.getElementById('shelf'),
  addBookBtn = document.getElementById('add-book'),
  clearBooksBtn = document.getElementById('clear-books'),
  myForm = document.getElementById('form'),
  formDiv = document.getElementById('formcontainer'),
  submitFormBtn = document.getElementById('submitform'),
  booksElms = [];

const retrieveBookShelf = localStorage.getItem(localStorageKey);
let bookShelf = retrieveBookShelf ? JSON.parse(retrieveBookShelf) : [];

class BookDetails {
  constructor(title) {
    this.title = title
  }
}

function addBookFnc(title) {
  let book = document.createElement('div');
  book.classList.add('book');
  if (title) {
    book.textContent = title;
  }
  shelf.appendChild(book);
  booksElms.push(book);
}

addBookBtn.addEventListener('click', () => {
  addBookFnc();
});

if (bookShelf) {
  bookShelf.forEach(book => {
    addBookFnc(book?.title);
  });
}

clearBooksBtn.addEventListener('click', () => {
    localStorage.removeItem(localStorageKey);
});

myForm.addEventListener('submit', e => {
  e.preventDefault();

  let hasEmptyBook = false;

  booksElms.forEach(book => {
   // set value if empty
    if (book.textContent == ''){
      book.textContent = myForm.booktitle.value;
        hasEmptyBook = true;
    }
  });

  if (hasEmptyBook === false) return '';

  let title = document.getElementById("booktitle").value;

  newBookAdd = new BookDetails(title);
  bookShelf.push(newBookAdd);
  const storeBooks = JSON.stringify(bookShelf);

  localStorage.setItem(localStorageKey, (storeBooks));

});

console.log(bookShelf);

#shelf {
  height: 150px;
  border-bottom: 5px solid #000;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(25px, 40px));
  align-items: end;
  margin-bottom: 15px;
}

.book {
  border: 1px solid #000;
  height: 100px;
  width: 25px;
  display: inline-block;
  padding-top: 5px;
  writing-mode: vertical-rl;
  font-family: 'Roboto', sans-serif;
}

#add-book {
  margin-bottom: 15px;
}

<div id="bookshelf">
  <div id="shelf"></div>
</div>
<button id="add-book">+</button>
<form id="form">
  <label for="booktitle">Book Title</label><br>
  <input type="text" id="booktitle" name="booktitle"><br>
  <input type="submit" id="submitform" value="Submit">
</form>

<button id="clear-books">Clear-books</button>