Question

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

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

我需要保存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");

});

Answer 2

获取您想要保存的数据。

JSON.stringify它然后使用localStorage API

localStorage使用字符串键值对，这就是为什么你JSON.stringify你的数据，然后给它一个名字，并在localStorage中设置它，你是黄金。

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

2 个答案:

Updated Fiddle