开发者问题收集

将页面数据保存在本地存储中

2017-03-08
714
javascript jquery html

这是我第一次问或做这种类型的问题

所以我创建了这个页面 http://lamp.cse.fau.edu/~mcuervo5/p4/ 它可以完成应用程序列表中添加和删除内容的基本操作。

显然唯一缺少的就是保存当前页面上的数据。我听说有一个代码可以将当前页面保存到本地存储中，其中已经包含所有内容，因此当我重新打开链接时，“完整和不完整”列表中不再有任何内容，而应该看起来像这样 Screenshot

谢谢，这是我唯一剩下要做的部分，我不知道它是在 HTMl 还是 Jquery 中实现的。我不知道怎么做。

如果您想在此处查看代码，而不是从上面带有链接的页面“检查”，请点击此处。适用于 html 和 Jquery 

$(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());
  //    }
});
<!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>
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");

现在，您可以在这里管理项目数组并在完整和不完整列表上进行迭代。

因此，无论何时发生编辑、删除、添加的任何操作，您只需在每次调用时管理本地存储实例。并在此基础上迭代您想要的列表。

user3145373 ツ
2017-03-08