时间戳

首页 > 解决方案 > 如何在前端显示保存在localStorage中的对象的数据？目标：展示未注册用户添加到收藏夹的产品

javascript - 如何在前端显示保存在localStorage中的对象的数据？目标：展示未注册用户添加到收藏夹的产品

问题描述

大家好，我需要一些关于 javascript 的帮助。第二天，我一直在尝试制作一个功能：为未注册用户选择模型的页面。详情：有一个型号（产品）的页面，用户点击“加入收藏”按钮，产品显示在未注册用户的收藏页面。我尝试以多种方式实现这一点，但最终选择了本地存储。这是我到目前为止所得到的：

/*** Add to Favorite non-register ***/

 const nonRegister = document.querySelectorAll('.non-register');
   nonRegister.forEach(item=>{

  item.addEventListener('click', function(){
    let modelId = item.getAttribute('model-id');
    let modelTitle = item.getAttribute('model-title');
    let modelPicture = item.getAttribute('model-image');
    let modelLink = item.getAttribute('model-link');

    /*** I use this part to check that there are no duplicates ***/

    let myFavoriteArray = JSON.parse(localStorage.getItem("favoriteItems") || "[]");
    let retrievedData = localStorage.getItem("favoriteItems");
    let retrievedDataArray = JSON.parse(retrievedData);

    alert(modelId)
    if(retrievedDataArray !== null && retrievedDataArray.includes(modelId)){
        alert('This model has already been added to favorites')
    }else{
        /*** for checking ***/
        myFavoriteArray.push(modelId);
        localStorage.setItem("favoriteItems", JSON.stringify(myFavoriteArray));

        /*** Function creates an array with objects the user has added to favorites. ***/

        let modelObject = {
            'modelId':  modelId,
            'modelTitle':  modelTitle,
            'modelPicture': modelPicture,
            'modelLink': modelLink,
        }

        let oldItems = JSON.parse(localStorage.getItem('itemsArray')) || [];
        oldItems.push(modelObject);
        localStorage.setItem('itemsArray', JSON.stringify(oldItems));
    }
   });
});

/*** Add to Favorite non-register END ***/

到目前为止，一切都很好。但是后来我的知识还不够。如果我将一些项目添加到收藏夹并执行此代码：

let itemsArray = JSON.parse(localStorage.getItem('itemsArray'));
itemsArray.forEach(item => console.log(item));

控制台将显示一个不错的答案：

[![这是控制台中显示的内容][1]][1]

但是我怎样才能把它带到前端呢？如示例中所示显示它：

[！[这是我需要在前端显示的][2]][2]

我更多地使用 PHP，所以我很困惑。因为在 PHP 的情况下对我来说显而易见的事情（当我为注册用户执行相同的功能时）现在并不明显。如何将数据从本地存储循环到前端？请帮我解决这个问题。[1]：https ://i.stack.imgur.com/sA0GV.png [2]：https ://i.stack.imgur.com/e6vId.png

标签： javascriptlocal-storage

解决方案

终于，我想通了这个问题！

结果如下：

let itemsArray = JSON.parse(localStorage.getItem('itemsArray'));
let finalHtml = "";
let modLink;
let modTitle;
let modImage;

for (var item in itemsArray) {
     modImage +=
    '<div class="single-project__model-wrapper">  <div id="favorite__loop-unregister" 
     class="single-project__model">  <div class="single-project__model-item">'
    +'<a class="single-project__model-item_favorite" href="#"><img src="/wp- 
      content/themes/aleyra/images/remove.svg" alt="add_to_favorite"></a>'
    +'<a class="single-project__model-item_content" href="#">'
    +'<div class="single-project__model-item_content-img">'
    +'<img src="'+ itemsArray[item].modelPicture +'" alt="collection-img">'+
    '</div>'+
    '</a>'+
    '</div> </div> </div>';
     document.getElementById("favorite__loop-unregister").innerHTML = modImage;
 }

也许这不是真正优雅的解决方案。但我不是 JavaScript 的 nija，我只是一个不起眼的 WordPress/PHP 开发人员。如果有人想重构代码，我将不胜感激。但到目前为止，这个选项对我有用。

推荐阅读