將頁面中的數據保存到本地存儲中
[英]Saving data from a page in the local storage
問題描述
這是我第一次問或做這類問題
因此，我創建了此頁面http://lamp.cse.fau.edu/~mcuervo5/p4/ ，它基本完成了應用列表中添加和刪除內容的操作。
顯然唯一缺少的是將數據保存在當前頁面上。 我聽說有一個代碼可以將當前頁面保存到已包含所有內容的本地存儲中，因此當我重新打開鏈接時，而不是在“完整和不完整”列表中什么都沒有的代碼應該看起來像這樣
謝謝，這是我唯一要做的部分，我不知道它是否在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 © 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 個解決方案
解決方案1
2 2017-03-08 06:59:41
您好，您可以執行以下操作：
$("#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");
現在，您可以在此處管理項目數組，並在完整和不完整列表上進行迭代。
因此，無論何時發生任何編輯，刪除，添加操作，您都只需要管理每個調用上的localstorage實例。 並根據您想要的位置迭代列表。
使用JavaScript保存后從瀏覽器本地存儲中檢索數據
[英]Retrieving data from browser local storage after saving it using javascript
將多個頁面中的數據保存到本地存儲中，而不會覆蓋其他頁面的本地存儲
[英]Saving data from multiple pages in local storage without overwriting the local storage for the other pages
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.