Question

我正在开发一个应用程序，这个应用程序的一部分就像一个待办事项列表。用户可以添加和删除列表项。我一直在尝试将本地存储应用到此列表中，但我不能这样做。

HTML：

<input type="text" id="entrada" placeholder="" />
<a href="#" data-role="button" id="agregar">Add</a>
<ul id="list" data-role="listview">
</ul>

JS：

$('#agregar').on('click', function()
{
$('#agregar').on('click', function(event) { $('#entrada').val("")})

var entrada = $('#entrada').val();
if($("#entrada").val() == '')
{ return false; }
$('#list').append( '<li><a hreft="#">'+entrada+<'</a></li>' );
$('#list').listview( 'refresh' );
}
)

Answer 1

这是列表保存在本地存储中的工作示例，因此即使您关闭页面并再次打开它，待办事项列表仍然存在 http://codepen.io/mozzi/pen/mEwqzE

这是您需要更改的代码：

$('#agregar').on('click', function() {
  $('#agregar').on('click', function(event) {
    $('#entrada').val("")
  })

  var entrada = $('#entrada').val();
  if ($("#entrada").val() == '') {
    return false;
  }

  $('#list').append('<li><a hreft="#">' + entrada + '</a></li>');
  localStorage.setItem("todolist", $('#list').html());
  $('#entrada').val("");
  $('#list').listview('refresh');
})

$(function(){
  $('#list').html(localStorage.getItem("todolist"));
})();

如何将本地存储应用于待办事项列表

1 个答案: