Question

我需要什么

我需要在用户选择特定事件时显示图像。考虑添加到喜欢的功能。
当用户点击图像数据存储在数组中时。
然后用户点击特定图片，重新加载页面后，应该在该位置显示另一张图片。

js code

on dom ready

在特定点击的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 + '")');
 }
  });

用于设置和获取项目的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，我没有将其作为最喜欢的广告。
这里是json数据的快照：

enter image description here

在快照中你可以看到localstorage只存储单个json。
我需要问的是localstorage不要存储我在本地存储中点击其最新数据的整个数据。
```
   output should be
```
- 选择特定数据并以嵌套的json字符串存储在localstorage中。
- 并且在dom加载或页面刷新时特别显示其id存储在localstorage中的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上应用图像，虽然它应该适用于localstorage的特定保存。

Answer 1

听起来你正试图展示一个明星＆＃39;在用户已收藏的项目旁边＆＃39;并且您希望将这些收藏夹存储在本地存储中。

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

1）将每个收藏项目的ID保存到一个数组中并将其存储在本地存储中

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

2）在dom ready上，为所有被收藏的＆＃39;添加一个属性。项目。请注意，要执行此操作，您需要为您关注的每个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中，为items属性的所有favorite启用背景图片

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

希望这种策略能为您指明方向。

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

1 个答案: