Question

这是我第一次询问或做这类问题

所以我创建了这个页面http://lamp.cse.fau.edu/~mcuervo5/p4/ 并且它为您添加和删除内容做基本的应用列表操作。

显然唯一缺少的是将数据保存在当前页面上。我听说有一个代码可以将当前页面保存到已包含所有内容的本地存储中，所以当我重新打开链接时，而不是在＆＃34;完整和不完整的内容中没有任何内容。列表，它应该看起来像

谢谢，这是我唯一剩下要做的事情＆amp;我不知道它是否在HTMl或Jquery中实现。我不知道怎么做。

如果你想看到这里的代码，而不是＆＃34;检查＆＃34;从上面有链接的页面，这里是。对于html和Jquery

＆＃13;

$(document).ready(function() {
  //        $('#list').innerhtml = localStorage.getItem("List");


  //$('#incomplete-tasks').html("<P>I just replaced your stuff.</P>");
  $("#Sumbit_Button").click(function() {
    var textbox_Value = $("#textbox").val();
    $('#incomplete-tasks').append('<li><span class="text" contenteditable="false">' + textbox_Value + "</span>" +
      '<input/ style="display: none" class="new-value">' +
      "<button type='button' class='delete'>Delete</button>" +
      "<button type='button' class='edit'>Edit</button></li>");
  });
  $('#incomplete-tasks').on('click', '.delete', function() {
    console.log('i am clicked.delete');
    $(this).parent().remove();
  });

  $('#incomplete-tasks').on('click', '.edit', function() {
    console.log("complete task click.edit");
    $(this).siblings('input').show();
    $(this).siblings('.delete').hide();
    $(this).hide();
  });

  $('#incomplete-tasks').on('click', '.edit', function() {
    console.log("INcomplete task click.edit");
    $(this).siblings('input').show();
    $(this).siblings('span').hide();
    $(this).siblings('.delete').hide();
    $(this).hide();
  });

  $('#incomplete-tasks').on('keyup', '.new-value', function(e) {
    if (e.keyCode == 13) {
      console.log("Complete Task _Version 2.new_value");
      $(this).siblings('span').text($(this).val()).show();
      $(this).siblings('input').hide();
      $(this).siblings('.delete').show();
      $(this).siblings('.edit').show();
      $(this).hide();
    }
  });

  $('#incomplete-tasks').on('click', '.text', function() {
    var li = $(this).parent().remove().toggleClass("strikethrough");
    $('#complete-tasks').append(li);
  });
  $('#complete-tasks').on('click', '.delete', function() {
    console.log('i am clicked.delete');
    $(this).parent().remove();
  });

  $('#complete-tasks').on('click', '.edit', function() {
    console.log("complete task click.edit");
    $(this).siblings('input').show();
    $(this).siblings('.delete').hide();
    $(this).hide();
  });

  $('#complete-tasks').on('click', '.edit', function() {
    console.log("INcomplete task click.edit");
    $(this).siblings('input').show();
    $(this).siblings('span').hide();
    $(this).siblings('.delete').hide();
    $(this).hide();
  });

  $('#complete-tasks').on('keyup', '.new-value', function(e) {
    if (e.keyCode == 13) {
      console.log("Complete Task _Version 2.new_value");
      $(this).siblings('span').text($(this).val()).show();
      $(this).siblings('input').hide();
      $(this).siblings('.delete').show();
      $(this).siblings('.edit').show();
      $(this).hide();
    }
  });
  $('#complete-tasks').on('click', '.text', function() {
    var li = $(this).parent().remove().toggleClass("strikethrough");
    $('#incomplete-tasks').append(li);
  });



  //  var save()
  //{
  //      localStorage.setItem("List", $("#list").innerhtml());
  //    }
});

＆＃13;

<!DOCTYPE html>
<html lang="en">

<head>

  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="">
  <meta name="author" content="">

  <title>The Reminder list</title>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
  <script src="http://cdn.jsdelivr.net/jquery.validation/1.14.0/jquery.validate.js"></script>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" rel="stylesheet" />
  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" />
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>


  <!-- Custom CSS -->
  <link href="css/heroic-features.css" rel="stylesheet">

  <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  <!--[if lt IE 9]>
            <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
            <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->

</head>

<body>

  <!-- Navigation -->
  <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="container">
      <!-- Brand and toggle get grouped for better mobile display -->
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
        <a class="navbar-brand" href="#">To Do List</a>
      </div>
      <!-- Collect the nav links, forms, and other content for toggling -->
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav">
          <li>
            <a href="#">About</a>
          </li>
          <li>
            <a href="#">Services</a>
          </li>
          <li>
            <a href="#">Contact</a>
          </li>
        </ul>
      </div>
      <!-- /.navbar-collapse -->
    </div>
    <!-- /.container -->
  </nav>

  <!-- Page Content -->
  <div class="container">

    <!-- Jumbotron Header -->
    <header class="jumbotron hero-spacer">
      <h1> The Reminder Friend App </h1>
      <p>this is my to do list app. type in the list you want to add & store in the list
      </p>

      <form>

        <!-- textbox -->
        <input type="text" id="textbox">

        <!--add button -->
        <input type="button" id="Sumbit_Button" value="Add">


      </form>
    </header>




    <hr>
    <div id='lists'>
      <!-- Page Features -->
      <div class="row text-center">

        <div class="col-md-6 col-sm-6 hero-feature">
          <div class="thumbnail">
            <div class="caption">
              <h3>Incomplete</h3>
              <ul id="incomplete-tasks">

              </ul>
            </div>
          </div>
        </div>

        <div class="col-md-6 col-sm-6 hero-feature">
          <div class="thumbnail">

            <div class="caption">
              <h3>Complete</h3>
              <ul id="complete-tasks">

              </ul>
            </div>
          </div>
        </div>
      </div>


    </div>
    <!-- /.row -->

    <hr>

    <!-- Footer -->
    <footer>
      <div class="row">
        <div class="col-lg-12">
          <p>Copyright &copy; Mauricio Cuervo 2017</p>
        </div>
      </div>
    </footer>

  </div>
  <!-- /.container -->

  <!-- jQuery -->
  <script src="js/jquery.js"></script>

  <!-- Bootstrap Core JavaScript -->
  <script src="js/bootstrap.min.js"></script>

</body>


<script src="p4.js"></script>

</html>

＆＃13;

Answer 1

您好，您可以这样做：

$("#Sumbit_Button").click(function() {
    var textbox_Value = $("#textbox").val();
    var list = [];
    list.push(textbox_Value);
    localStorage.setItem("listdata", list);

    // do not manage using `append` whole html. Manage through list and display as you want
  });

页面加载调用

：

var stored = localStorage.getItem("listdata");

现在，您可以管理项目数组并迭代完整和＆amp;不完整清单。

因此，无论何时发生编辑，删除，添加操作，您都必须在每次调用时管理localstorage实例。并根据你想要的那个迭代列表。

保存本地存储中页面的数据

1 个答案: