Question

我有API调用的个人项目。当我正在进行HTTP请求（搜索）项目显示在页面上的按键上时，项目可以被加入书签，这意味着我可以单击单个项目并将其保存到本地存储。当输入为空时，我向用户显示已添加书签的项目。现在我想向用户显示当他再次开始搜索时是否通过添加类“书签”来保存一些结果，这会使结果变暗。所以我的问题是如何以有效的方式循环搜索结果和本地存储项目。

我试过这个，但似乎并不是很好。

$('.bookmakrk').click(function(){
  localStorage.setItem(this.id, this.item);
})

    $('.bookmakrk').click(function(){
  localStorage.setItem(this.id, this.item);
})

http.done(function(data){
  var x = data.data;
  for(var key in x){
    if(localStorage.key(key)){
     $( "body" ).appen("<div class='bookmarked'>");
    }
  }
})

Answer 1

我不会将每个书签保存在单独的localStorage项目中。我将创建一个数组，您使用JSON.stringify写入localStorage。这样，您可以在页面加载时从本地存储中读取它，使用javascript数组进行比较并添加新书签 - 每次更改都会将整个数组写回本地存储。

像这样：

var bookmarks = [];
window.addEventListener('load', function(){
    if(localStorage.getItem("bookmarks") !== null){
       bookmarks = JSON.parse(localStorage.getItem('bookmarks'));
    }
});

http.done(function(data){
  var x = data.data;
  for(var i = 0; i < x.length; i++){
    if(bookmarks.indexOf(x[i]) >= 0){
     // do stuff
    }
  }
})

function addBoomark(item){
    // push item to bookmarks array
    bookmarks.push(item);
    // save bookmarks array to localStorage
    localStorage.setItem('bookmarks', JSON.stringify(bookmarks));
}

function removeBookmark(itemId){
    // use filter to get all items which don't match to the itemId you want to remove
    bookmarks = bookmarks.filter(function(item){return item.id !== itemId});
    // save bookmarks array to localStorage
    localStorage.setItem('bookmarks', JSON.stringify(bookmarks));
}

循环并通过localStorage进行比较

1 个答案: