如何在本地存储中的页面刷新上显示图像

Question

我需要什么

• 当用户选择特定事件时，我需要显示图像。考虑添加到收藏功能。

• 当用户点击图片时，数据存储在数组中。

• 然后用户单击特定图像，重新加载页面后，应在该位置显示另一张图像。

js代码

dom 准备就绪

1. 在特定点击的 div 上显示图像。

    $(document).ready(function() {
   
     console.log(localStorage);
     if (localStorage.id!='')
     {
   
   var  image_url='/images/star1_phonehover.png';
   
     $('.favourate_dextop').css('background-image', 'url("' + image_url + '")');
    }
     });
   

2. 设置和获取项目的js代码

       function favaorite(sess_id,name,city,country,event_url,pointer)
       {
   
       /* clear storage  code*/
       //window.localStorage.clear();
   
       /* store imageurl in localstorage */
       var  imageUrl='/images/star1_phonehover.png';
   
   
       // Save data to the current local store//
       if (typeof(localStorage) == 'undefined' ) {
       console.log('Your browser does not support HTML5 localStorage. Try upgrading.');
       }
       else
       {
       try {
       // Put the object into storage
       localStorage.setItem('id' ,JSON.stringify(sess_id));
       }
       catch (e)
       {
       if (e == QUOTA_EXCEEDED_ERR)
       {
            console.log('Quota exceeded!');//data wasn't successfully saved due to quota exceed so throw an error
       }
       }
       try {
       // Put the object into storage
       localStorage.setItem('name' ,JSON.stringify(name));
       }
       catch (e)
       {
       if (e == QUOTA_EXCEEDED_ERR)
       {
            console.log('Quota exceeded!');//data wasn't successfully saved due to quota exceed so throw an error
       }
       }
       try {
       // Put the object into storage
       localStorage.setItem('city',JSON.stringify(city));
       }
       catch (e)
       {
       if (e == QUOTA_EXCEEDED_ERR)
       {
           console.log('Quota exceeded!'); //data wasn't successfully saved due to quota exceed so throw an error
       }
       }
       try
       {
       // Put the object into storage
       localStorage.setItem('country',JSON.stringify(country));
       }
       catch (e)
       {
       if (e == QUOTA_EXCEEDED_ERR)
       {
           console.log('Quota exceeded!'); //data wasn't successfully saved due to quota exceed so throw an error
       }
       }
       try
       {
       // Put the object into storage
       localStorage.setItem('event_url',JSON.stringify(event_url));
       }
       catch (e)
       {
       if (e == QUOTA_EXCEEDED_ERR)
       {
              console.log('Quota exceeded!'); //data wasn't successfully saved due to quota exceed so throw an error
       }
       }
       try
       {
       // Put the object into storage
       localStorage.setItem('imageUrl',JSON.stringify(imageUrl));
       }
       catch (e)
       {
       if (e == QUOTA_EXCEEDED_ERR)
       {
              console.log('Quota exceeded!'); //data wasn't successfully saved due to quota exceed so throw an error
       }
       }
   
       }
   
   
       /* fetch the data using from localstorage */
       var id= [];
       var name= [];
       var city = [];
       var country =[];
       var event_url= [];
   
       // Retrieve the object from storage
       //var id, city, country,event_url; 
       var id = localStorage.getItem('id');
       id = JSON.parse(id);
       console.log(id);
   
       var name = localStorage.getItem('name');
       name = JSON.parse(name);
       console.log(name);
   
       var name = localStorage.getItem('name');
       name = JSON.parse(name);
   
       var city = localStorage.getItem('city');
       city = JSON.parse(city);
       console.log(city);
   
       var country = localStorage.getItem('country');
       country = JSON.parse(country);
       console.log(country);
   
       var event_url = localStorage.getItem('event_url');
       event_url = JSON.parse(event_url);
       ///console.log(event_url);
   
       var image_url = localStorage.getItem('imageUrl');
       //event_url = JSON.parse(event_url);
       alert(image_url);
       //console.log(image_url);
   
       //console.log($(pointer).closest('.evt_date').find('.star'));
       if (id!='' )
       {
       $(pointer).closest('.evt_date').find('.favourate_dextop').css('background-image', 'url("' + imageUrl + '")');
       $('.favourate_dextop').css('background-image', 'url("' + image_url + '")');
   
       }
   
   
   
   
       }
   

问题

• 我已将图像存储在 localstorage 中并尝试在页面刷新时加载图像，因此我将应用到所有 div 上，其中 div 我没有将标记标记为收藏夹。

• 这是 json 数据的快照：

• 在快照中，您可以看到 localstorage 仅存储单个 json。

• 我需要问一下，localstorage 是否不会将我点击过的全部数据存储在 localstorage 中。

     output should be
  

  • 选择特定数据并以嵌套的 json 字符串存储在本地存储中。

  • 并在 dom 加载或页面刷新时显示特定于 id 存储在本地存储中的 div。

    我已经尝试过解决方案

            $(document).ready(function() {
           console.log(localStorage.id);
        if (localStorage.id==30301)
         {
    
        var  image_url='/images/star1_phonehover.png';
      $('.favourate_dextop').css('background-image', 'url("' + image_url + '")');
        }
    
    });
    

  • 然后它也将图像应用于所有 div，尽管它应该应用于特定保存的本地存储。

Answer 1

听起来您正试图在用户“收藏”的项目旁边显示“星号”，并且您想将这些收藏夹存储在本地存储中。

忽略您现有的代码，我会使用这样的策略：

1) 将每个收藏项的 id 保存到一个数组中并存储在本地存储中

localStorage.setItem('favorites' ,JSON.stringify(arrayOfFavorites));

2) 在 dom 准备就绪时，为所有“收藏”项目添加一个属性。请注意，要做到这一点，您需要为您关心的每个 dom 节点添加一些标识属性。我假设你有类似<div class='item' data-id='your-id'></div>:

var list = getArrayFromLocalStorage('favorites');
list.forEach(function(id) {
  $('.item[data-id="' + id + '"').attr('favorite', '');
}

3) 最后，在您的 css 中，使用 favorite 属性为所有 items 启用背景图像

item[favorite] {
   background-image: '/images/star1_phonehover.png'
}

希望这个策略能够为您指明正确的方向。