Question

我正在尝试使用localStorage将书签添加到我的拙劣博客中，但是当我将页面保存在数组中时，它会一遍又一遍地保存相同的条目。我需要一种方法来检查页面是否已经在数组中，如果已保存，则不要保存它。

我尝试对null和'undefined'进行检查，但似乎没有解决任何问题。


<div id="bookmarkresults"> </div>

<script>
//We will be listening for the form to be sumbited
fetchBookmarks()

document.querySelector('.bookmark__this').addEventListener('click',saveBookmark);
//save bookmarks
function saveBookmark(e){

    console.log('works');
    //prevent from subitted
    var sitename = "site name";
    var sitedescription = "desc";
    var siteurl = "url";

    var bookmark = {
        name : sitename,
        description: sitedescription,
        url : siteurl
    }

    //test if bookmarks is null
    if(localStorage.getItem('bookmarks') === null){
        //init array
        var bookmarks = [];
        //add to array
        bookmarks.push(bookmark);
        //set to Localstorage
        localStorage.setItem('bookmarks',JSON.stringify(bookmarks));
    }
    else if (localStorage.getItem('bookmarks') === 'undefined') {
        console.log("already"); 

    } else {
        //get bookmarks from localstorage
        var bookmarks = JSON.parse(localStorage.getItem('bookmarks'));
        //add bookmark to array
        bookmarks.push(bookmark);
        //reset to Localstorage
        localStorage.setItem('bookmarks',JSON.stringify(bookmarks));
    }
    //refetch bookmarks
    fetchBookmarks();
    e.preventDefault();
}
//delete bookmarks
function deleteBookmarks(url){
    //get bookmarks
    var bookmarks = JSON.parse(localStorage.getItem('bookmarks'));
    //lopp
    for(var i = 0; i < bookmarks.length;i++){
        if(bookmarks[i].url == url){
            bookmarks.splice(i, 1);
        }
    }
    localStorage.setItem('bookmarks',JSON.stringify(bookmarks));
    //refetch bookmarks
    fetchBookmarks();

    document.getElementById(url).remove();
}

//fetch bookmarks 
function fetchBookmarks(){
    var bookmarks = JSON.parse(localStorage.getItem('bookmarks'));
    //get output id
    var bookmarkresults = document.getElementById("bookmarkresults");
    //build output
    for(var i=0;i<bookmarks.length;i++){
        var name = bookmarks[i].name;
        var url = bookmarks[i].url;
        var description = bookmarks[i].description;
        bookmarkresults.innerHTML += '<div id="'+url+'" class="  col-md-2">'+
                                        '<h2>'+name+'</h2>'+
                                        '<p>'+
                                            '<a  href="'+url+'" role="button">'+name+'</a>'+
                                            '<br>'
                                            +description+
                                        '</p>'+
                                        '<p>'+
                                            '<a onClick="deleteBookmarks(\''+url+'\')" class="btn btn-danger" role="button">delete</a>'+
                                        '</p>'+
                                    '</div>';
    }
}



</script>

我能够将页面保存在localStorage上并将其从阵列中删除，但是如果我按下按钮，它将不断重复保存同一页面。

一旦按下按钮，我可以关闭按钮，但是如果用户刷新页面，那将无法解决问题。我宁愿先检查页面是否在数组中，然后基于此，不保存数据并在需要时关闭按钮。

这是我尝试检查其中的内容以及是否已存储的失败尝试。请记住，这是一个菜鸟。


//check if exists
function checkBookmarks(){
    //get bookmarks
    var bookmarks = JSON.parse(localStorage.getItem('bookmarks'));
    //lopp
    for(var i = 0; i < bookmarks.length;i++){
        console.log(bookmarks[i]);
        if(bookmarks[i].url == url){
            bookmarks.splice(i, 1);
        }
        else {
            console.log("repeated");
        }
    }
}

Answer 1

在else块中，您只需添加测试以查看本地存储中是否已具有书签。更改此：

bookmarks.push(bookmark);

收件人：

if (!bookmarks.some(item => item.url === bookmark.url)) bookmarks.push(bookmark);

第二个问题是，在扩展之前，您永远不会清除HTML。因此，您实际上永远不会替换显示器上的任何书签。您只需将本地存储中的内容追加到屏幕上已经存在的内容。

因此，请在fetchBookmarks中添加此内容，然后遍历书签：

  bookmarkresults.innerHTML = "";

fiddle

Answer 2

localStorage.getItem('bookmarks') === 'undefined'

这不好，也行不通-不要在未定义的关键字周围加上引号。

不要对null和undefined进行费力的检查，而是这样做：

if (!localStorage.getItem('bookmarks')) { ...
// will be true if the local storage does not contain that key, false if it does contain it

要删除该键的值，请执行以下操作：

localStorage.removeItem('bookmarks')

如果使用这些methods as described in the documentation，则应该易于管理。

如何检查项目是否已在LocalStorage中

2 个答案: