防止本地存储中出现重复值

问题描述

我正在创建一个图书馆存档站点，其中包含我最喜欢的读物的集合。我在书籍上有一个单击事件侦听器，将它们添加到本地存储密钥“书籍”中。我想要这样，如果我两次单击同一本书，则不会在我的ls中将其作为重复值添加。我已经尝试过在这里找到的东西，例如“ if”语句，用于检查新“书”的索引，并将其与其他书进行比较，以及进行过滤，但无济于事。

 document.querySelectorAll('.card').forEach(function(uibook){
  let arr = []
  for(i=0;i < uibook.length; i++){
    
    arr.push(uibook[i])
    console.log(arr)
    return arr
  }
  uibook.addEventListener('click',function(){
    window.document.location = './details.html'

    const title = uibook.innerText
    const summary = uibook.querySelector('.card-summary').innerText
    const genre = uibook.querySelector('.card-genre').innerText
    const author = uibook.querySelector('.card-author').innerText
    const page = uibook.querySelector('.card-page').innerText
    const img = uibook.querySelector('img.card-img-top').getAttribute('src');
  
    // Instantiate book
    const Nbook = new book(title,genre,author,page,summary,img);
    console.log(Nbook)

    if (localStorage.getItem('books') === null){
            books = [];
          }
          else{
            books = JSON.parse(localStorage.getItem('books'));
          }
          books.push(Nbook)
          localStorage.setItem('books',JSON.stringify(books));
          // localStorage.clear();

          add('lastKey',Nbook)
    
  })
})
  var lastKey;
  
function add(key,value) {
  lastKey = key;      
  console.log(value)              
  localStorage.setItem(lastKey,JSON.stringify(value));
}

////////////////DETAILS PAGE/////////////////////////

function getBooks(){
  // let lastKey;
  if(localStorage.getItem('lastKey') === null){
    lastKey = [];
  } else {
    lastKey = JSON.parse(localStorage.getItem('lastKey'));
  }
  console.log(lastKey)

//details info UI
  document.querySelector('.details-title').innerText = `${lastKey.title}`

  var imgTest = document.querySelector('.details-img').src = `${lastKey.img}`
 
  console.log(imgTest)

  document.querySelector('.summary-text').innerText = `${lastKey.summary}`
  document.querySelector('.genre-text').innerText = `${lastKey.genre}`
  console.log(document.querySelector('.author-text').innerText = `${lastKey.author}`)
  
  document.querySelector('.pageNum-text').innerText = `${lastKey.page}`
}
getBooks()

编辑：更新了代码我还应该补充一点，我的ls中有2个密钥。一个是“ lastkey”，正如您可能已经猜到的那样，它仅具有被单击的最后一本书的价值。这是为了在下一页上输出该书的详细信息。 “书”键是让我单击的所有书都没有重复。目的是b / c我在页面底部有一个轮播，我想按其流派输出建议的书，并且我不想重复这些书。知道吗？

解决方法

为使比较容易，您可以将books数组作为可与===或.includes进行比较的JSON字符串数组：

if (localStorage.getItem('books') === null) {
  books = [];
} else {
  books = JSON.parse(localStorage.getItem('books'));
}
const stringified = JSON.stringify(Nbook);
if (!books.includes(stringified)) {
  books.push(stringified);
}
localStorage.setItem('books',JSON.stringify(books));

然后，在其他地方解析书籍时，请对数组项调用JSON.parse以到达基础对象，例如

const books = JSON.parse(localStorage.getItem('books')).map(JSON.parse);
// console.log(book[0].title)

,

在books数组中搜索另一本标题相同的书。

uibook.addEventListener('click',function() {
  window.document.location = './details.html'

  const title = uibook.innerText

  if (localStorage.getItem('books') === null) {
    books = [];
  } else {
    books = JSON.parse(localStorage.getItem('books'));
  }
  const foundBook = books.find(book => book.title == title);
  if (!foundBook) {
    // Instantiate book
    const summary = uibook.querySelector('.card-summary').innerText
    const genre = uibook.querySelector('.card-genre').innerText
    const author = uibook.querySelector('.card-author').innerText
    const page = uibook.querySelector('.card-page').innerText
    const img = uibook.querySelector('img.card-img-top').getAttribute('src');
    const Nbook = new book(title,genre,author,page,summary,img);
    books.push(Nbook);
    console.log(Nbook)
    localStorage.setItem('books',JSON.stringify(books));
    add('lastKey',Nbook)
  } else {
    add('lastKey',foundBook);
  }

})