Javascript 如何在localstorage中显示页面刷新图像

我需要什么

• 我需要在用户选择特定事件时显示图像。考虑添加到喜爱的功能。

• 当用户单击图像时，数据存储在数组中

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

js代码

关于dom ready

在特定单击的分区上显示图像

 $(document).ready(function() {

  console.log(localStorage);
  if (localStorage.id!='')
  {

var  image_url='/images/star1_phonehover.png';

  $('.favourate_dextop').css('background-image', 'url("' + image_url + '")');
 }
  });

用于设置和获取项目的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，而我尚未将marke列为收藏夹的div

• 以下是json数据的快照：

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

• 我需要问的是，localstorage是否不在localstorage中存储我单击过的所有数据及其最近的数据

     output should be
  

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

  • 在dom加载或页面刷新时，在id存储在localstorage中的div上显示特定的

       output should be
    

    我试过一个解决办法

            $(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上应用image，尽管它应该应用于本地存储的特定保存的it

     output should be
  

---

听起来好像您试图在用户“喜爱”的项目旁边显示一个“星”，并且您希望将这些收藏夹存储在本地存储器中

忽略现有代码，我会使用如下策略：

1） 将每个收藏项的id保存到数组中，并将其存储在本地存储器中

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

2） 在dom就绪时，为所有“favorited”项添加一个属性。注意，要做到这一点，您需要为您关心的每个dom节点添加一些标识属性。我假设您有类似于

：

3） 最后，在css中，使用

收藏夹

属性为所有

项目

启用背景图像

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

---

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

我也尝试了同样的逻辑，检查if-if（localStorage.id==30301），但是角色问题是在所有div上显示star，尽管它应该只在div.$（'.favorate\u dextop'）.css（'background-image'，'url（'+image\u-url+'）的特定id上）就像这个问题一样，当dom就绪映像应用于所有div时，我只想应用该div的特定id，该id存储在localstoarge中。听起来像是将所有元素标记为“favorited”，而不仅仅是其中的一个子集。如果没有JSFIDLE，我就无能为力了。我只想在快照中应用localstorage存储data在单个json中..我在控制台中进行了交叉检查。通过localstorage，它只显示单个字符串..json