How to remember added element after page refresh
I have a page with a form with multiple elements. When I click on one of the elements, it takes me to Page2 (selects the element in Page2) and passes that selected element as a query string back to Page1. Then I will add this item to the last item. It works up to this point.
Now the problem is that I am repeating the same, i.e. clicking on another element, navigating to another page and adding this element to page1, I cannot get the previous added elements of these elements.
So I thought about using localStorage to store jquery objects and then using that localStorage to retrieve those selected items on every refresh (after navigating 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. It is impossible to see other objects of the items that will be pressed.
source to share
You should know what is setItem()
trying to convert the second value to a string. So you have to use Json.stringify () to convert the object to json string first. So all data can be saved. To retrieve data. use json.parse ()
Here is a relative post. Try to check it out. Saving objects to HTML5 local storage
source to share
JSON.stringify
is a function that cannot convert an object with a circular reference. eg:
var i = {}, i.m = i;
var k = JSON.stringify(i);//k=="{}"
And in the dom, there are many circular links. This is why you cannot see. But for your purpose, you can just create a new object and keep the basic values.
Here is an alternative solution with which you can exclude this circular reference.
var ele = $("selector");
var obj = ele.clone(true);
console.log(JSON.stringify(obj));
source to share