how to remember appended item after page refresh

Question

I have a Page1 with form with several elements. When i click on one of the element, it takes me to Page2(select an item in Page2) and pass that selected item as a query string back to Page1. I would then append that item in the last clicked element. It works up to this point.

Now, the issue is when i repeat the same thing i.e. click on another element, go to another page, and append that item to Page1, i can't get the previous appended items on those elements.

So, i thought of using localStorage to save the jquery objects, then use that localStorage to retrieve back those selected items with every refresh (after coming from another page).

<form>
  <div class="items" id="a">A</div>
  <div class="items" id="b">B</div>
  <div class="items" id="c">C</div>
</form>


//return querystring parameter
function GetURLParameter(sParam)
{    
    var fullQueryString = window.location.search.substring(1);    
    var sURLVariables = fullQueryString.split('&');    
    for (var i = 0; i < sURLVariables.length; i++)
    {
        var sParameterName = sURLVariables[i].split('=');
        if (sParameterName[0] == sParam)
        {
            return sParameterName[1];
        }
    }          
}

$(function(){

  arrImg = [];    
  var clickId = // function that returns the div element that is selected
  var id = GetURLParameter('id');

  if (id === 'item1') {
        var img1 = $("<img id='item1' src='' />");
        $('#' + clickId).append(img1);
        var obj = $('#' + clickId).html();
        arrImg.push(obj);
    }    
    else if (id === 'item2') {
        var img2 = $("<img id='item2' src='' />");
        $('#' + clickId).append(img2);
        var obj = $('#' + clickId).html();
        arrImg.push(obj);

    }    
    else if (id === 'item3') {
        var img3 = $("<img id='item3' src='' />")   
        $('#' + clickId).append(img3);
        var obj = $('#' + clickId).html();
        arrImg.push(obj);

    }

    localStorage.setItem("ImgCookie", JSON.stringify(arrImg));
});

I get ImgCookie: "Item1" only. Can't see other Item objects getting pushed.

score 0 · Answer 1 · edited May 23 '17 at 12:21

0

You have to know that setItem() is try to convert the second value to a string. So you have to use Json.stringify() to convert the object to a json string firstly. So that all data can be stored. To extract data. use json.parse()

Here is a relative post. Try to check it out. Storing Objects in HTML5 localStorage

edited May 23 '17 at 12:21

Community

1
1

answered Jul 29 '15 at 18:03

Jose Mar

634
6
8

jose: did added JSON.stringify, still can't see items being pushed. – user3399326 Jul 29 '15 at 18:06
use key value pair to store them when using localstorage and when u get value use JSON.parse() – Deep Mehta Jul 29 '15 at 18:15

score 0 · Answer 2 · answered Jul 30 '15 at 02:07

JSON.stringify is a function that cannot convert object with circular reference. for example:

var i = {}, i.m = i; 
var k = JSON.stringify(i);//k=="{}"

And in dom, there are a lot of circular reference. That's why you can't see. But for your purpose, you can just make up a new object, and store the essential values.

Here is a alternative solution, with this, you can eliminate those circular reference.

var ele = $("selector");
var obj = ele.clone(true);
console.log(JSON.stringify(obj));

how to remember appended item after page refresh

2 Answers2