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

Question

I'm working on an app, and one section of this app is like a to-do list. The user can add and delete list-items. I've been trying to apply local storage to this list, but I can't do it.

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

here is a working example of the list save in local storage so even if you closed the page and opened it again the to-do list still exists http://codepen.io/mozzi/pen/mEwqzE

this is the code you have to change :

$('#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"));
})();