Javascript 如何在本地存储中保存所有更改？

我正在尝试创建一个可编辑的listview。可以添加和删除列表中的元素。每个元素都有一组元素

如何将列表的所有更改保存在本地存储中

我需要保存listview（添加/删除项）的更改以及列表中所有输入文本的数据

这是我的密码：

  $(document).on("click", ".fila", function () {
    $(this).next().next(".cuadro").slideToggle();
  });

$(document).on("click", ".borrar", function () {
    $( this ).parent( "li" ).remove();
    $( "#list1" ).listview( "refresh" );
  });
 $(document).on("click", "#btn2", function () {
  var content =
              "<li>" +
              "<a href='#' class='fila'>elemento1</a><a href='#' data-icon='delete' class='borrar'>Favorita</a><div class='cuadro'><label>label:</label><input type='text' value='' maxlength='3'/><label >label2:</label><select data-role='slider'><option value='off'>Off</option><option value='on'>On</option></select></div>" +
              "</li>";

  $( content ).appendTo( "#list1" ).enhanceWithin();
  $( "#list1" ).listview( "refresh" );

});

$（document）.on（“click”，“.fila”，函数（）{
$（this.next（）.next（“.cuadro”）.slideToggle（）；
});
$（document）.on（“click”，“.borrar”，函数（）{
$（this.parent（“li”）.remove（）；
$（“#列表1”）.listview（“刷新”）；
});
$（文档）。在（“单击”上，“#btn2”，函数（）{
var含量=
“
”+
“标签：标签2：关闭”+
“
”；
$（content）.appendTo（“#list1”）.enhanceWithin（）；
$（“#列表1”）.listview（“刷新”）；
});

---

这里有一个JSIDLE:

获取您想要保存的数据

JSON.stringify

it 然后使用

localStorage使用字符串-键-值对，这就是为什么要使用JSON.stringify您的数据，然后给它一个名称并在localStorage中设置它，您就成功了

使用

//Append preivously stored elements.
$("#list1").html(localStorage.getItem('content'))

$(document).on("click", ".fila", function () {
    $(this).next().next(".cuadro").slideToggle();
});

$(document).on("click", ".borrar", function () {
    $(this).parent("li").remove();
    localStorage.setItem('content', $("#list1").html());
    $("#list1").listview("refresh");
});
$(document).on("click", "#btn2", function () {
    var content =
        "<li>" +
        "<a href='#' class='fila'>elemento1</a><a href='#' data-icon='delete' class='borrar'>Favorita</a><div class='cuadro'><label>label:</label><input type='text' value='' maxlength='3'/><label >label2:</label><select data-role='slider'><option value='off'>Off</option><option value='on'>On</option></select></div>" +
        "</li>";

    //store elements
    $(content).appendTo("#list1").enhanceWithin();
    localStorage.setItem('content', $("#list1").html());
    $("#list1").listview("refresh");

});

//追加预先存储的元素。
$（“#list1”）.html（localStorage.getItem（'content'））
$（document）.on（“click”，“.fila”，函数（）{
$（this.next（）.next（“.cuadro”）.slideToggle（）；
});
$（document）.on（“click”，“.borrar”，函数（）{
$（this.parent（“li”）.remove（）；
localStorage.setItem（'content'，$（“#list1”）.html（）；
$（“#列表1”）.listview（“刷新”）；
});
$（文档）。在（“单击”上，“#btn2”，函数（）{
var含量=
“
”+
“标签：标签2：关闭”+
“
”；
//存储元素
$（content）.appendTo（“#list1”）.enhanceWithin（）；
localStorage.setItem（'content'，$（“#list1”）.html（）；
$（“#列表1”）.listview（“刷新”）；
});

$（form）.serialize（）可能会给您一个开头。当您向列表中添加一些元素时，此代码非常适合保存。但是当我删除列表中的一个元素时，它就不起作用了。如何保存列表的所有输入文本？更新代码。请检查。只需添加本地存储集即可删除（）代码。谢谢：）每个列表项都包含一些元素。当我添加其中一个时，如果你点击它，你会看到它的内部。但是当我更新页面时，它正确地保存了项目，但是在它里面有些错误，因为你看到每个元素里面都有一个重复的项目。有什么问题吗？？谢谢你的帮助：）这是更新的代码，我正在测试代码，但我发现了一些有线的东西。当我从本地存储加载列表时，项目可以工作，但是里面的元素（当你点击它时）不工作（开/关滑块是错误的）。