javascript - 如何在本地存储中存储多个数据

Question

我需要什么

• 我需要在数组中存储更多的数据，这样用户点击 div 相应的数据必须存储在数组中。

喜欢

id: 1223, city:'芝加哥',

id:12333,city:'纽约';

代码

      function favaorite(sess_id,name,city,country,event_url,pointer)
        {



        /* store imageurl in localstorage */
        var  imageUrl='/images/star1_phonehover.png';


        // Save data to the current local store//

        // Put the object into storage
        localStorage.setItem('id' ,JSON.stringify(sess_id));

        // Put the object into storage
        localStorage.setItem('name' ,JSON.stringify(name));

        // Put the object into storage
        localStorage.setItem('city',JSON.stringify(city));

        // Put the object into storage
        localStorage.setItem('country',JSON.stringify(country));

        // Put the object into storage
        localStorage.setItem('event_url',JSON.stringify(event_url));


        // Put the object into storage
        localStorage.setItem('imageUrl',JSON.stringify(imageUrl));

第 2 步。

     /* 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');
        console.log(id);
        id = JSON.parse(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(id.length)//undefined。

• 我还查看了在 localstoarge 中存储更多值的循环。

  for (var i = 0; i < localStorage.length; i++) {
   console.log(localStorage.key(i))
     };
  

Answer 1

您可以将整个对象字符串化并一次保存所有内容:

localStorage.setItem('event', JSON.stringify({
    id: sess_id,
    name: name,
    city: city,
    country: country,
    event_url: event_url,
    imageUrl: imageUrl
}));

它还会使代码更简单和更短:

function favaorite(sess_id, name, city, country, event_url, pointer) {

    /* 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('event', JSON.stringify({
                id: sess_id,
                name: name,
                city: city,
                country: country,
                event_url: event_url,
                imageUrl: 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
            }
        }
    }
}

并检索保存的事件数据，您可以简单地执行反向操作:

var eventData = JSON.parse(localStorage.getItem('event'));