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

我需要的

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

用户单击图像数据时

• 存储在数组中 .

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

js代码

在dom准备好了

• 在特定点击的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，我没有将marke作为收藏 .

• 这里是json数据的快照：

在快照中

• 你可以看到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的特定保存 .