如何在页面刷新后记住追加的项目

how to remember appended item after page refresh

本文关键字：追加 项目 后记 刷新      更新时间：2023-09-26

我有一个Page1与几个元素的形式。当我单击其中一个元素时，它将带我到Page2(在Page2中选择一个项目)，并将选中的项目作为查询字符串传递回Page1。然后将该项附加到最后单击的元素中。它工作到这一点。

现在，问题是当我重复同样的事情，即单击另一个元素，转到另一个页面，并将该项目追加到Page1，我不能得到这些元素上先前追加的项目。

所以，我想到使用localStorage来保存jquery对象，然后使用localStorage来检索那些选择的项目与每次刷新(从另一个页面后)。

<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));
});

我得到ImgCookie: "Item1"只有。

您必须知道setItem()正在尝试将第二个值转换为字符串。因此，您必须首先使用json .stringify()将对象转换为json字符串。这样所有的数据都可以存储。提取数据。使用json.parse ()

这是一篇相关的文章。试着去看看。在HTML5中存储对象localStorage

JSON.stringify是一个不能用循环引用转换对象的函数。例如:

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

在dom中，有很多循环引用。这就是你看不见的原因。但是对于您的目的，您可以只创建一个新对象，并存储基本值。

这里有一个替代的解决方案，有了这个，你可以消除那些循环引用。

var ele = $("selector");
var obj = ele.clone(true);
console.log(JSON.stringify(obj));
相关文章：