將數據保存到本地存儲

這是我第一次問，或做這種類型的問題將數據保存到本地存儲

所以我創造了這個頁面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 &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>

來源

2017-03-08 Mark1247

可以使用localStorage的像：'//設置localStorage的項目 localStorage.setItem（ 'dataObject時'，數據）;'和retreive：'//從localStorage的 VAR retrievedObject = localStorage.getItem檢索對象（ 'dataObject時' ）;'文檔：[localstorage]（https://developer.mozilla.org/en/docs/Web/API/Window/localStorage） –

讓我試試，但如果你能像下面的格式顯示它，那會有幫助謝謝 – Mark1247

你好，你可以做這樣的事情：

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

現在，在這裏你可以管理陣列的項目並迭代完成&不完整的列表。

因此，無論何時發生編輯，刪除，添加操作，您都必須在每次調用時管理本地存儲實例。並基於那個只是你想要的迭代列表。

來源

2017-03-08 06:59:41

所以我看到你的來自。告訴我，如果我說這是正確的 *所以回到我的js當我編輯它，每次我點擊提交框上的按鈕，這將保存數據。並且你希望我刪除追加。* 我唯一不知道的是如何在刪除追加時顯示按鈕。導致一旦我刪除追加，跨所有按鈕將消失。我知道你說使用顯示和列表，但你如何使用它在我的情況？試圖想象它 PS：我在哪裏把var stored = localStorage.getItem（「listdata」）;？因爲我試圖理解你寫的最後一部分。謝謝 – Mark1247

將數據保存到本地存儲

回答

相關問題