javascript - 如何保存本地存储中的所有更改？

Question

我正在尝试创建一个可编辑的 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" );

});

这是一个 JSFiddle:http://jsfiddle.net/juank_romero/hA8Ps/11/

Answer 1

Updated Fiddle

使用HTML 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");

});