Question

我已经建立了一个待办事项清单，希望能找到一些帮助，以弄清为什么我的提交内容会覆盖本地存储区中现有的待办事项。

我也无法设置本地存储，因此它会恢复上次会话保存的信息

链接到JS Fiddle中的完整程序： https://jsfiddle.net/rogueathletic/ak0tj3xe/3/

var complete;
var accomplished;
var count = 0;
var value;
var items;




$("#add-to-do").on("click", function (event) {
value = $('#to-do').val().trim(),
localStorage.setItem("value", JSON.stringify(value));
$("#to-do").text(JSON.parse(localStorage.getItem("value")));


 
    event.preventDefault();
    value = $('#to-do').val()
    oneClick = items 
        items = $("<p>");
        items.attr("id", "item" + count);
        items.html(value);
    complete = $("<button>");
    complete.attr("data-to-do", count);
    complete.addClass("checkbox");
    complete.append( " √ " );
    items = items.prepend(complete);

    $("#to-dos").prepend(items);
    $("#to-do").val("");

    count++;

    if (event.list) {
        localStorage.setItem('to-do-list', JSON.stringify(event));

        if (localStorage.getItem('to-do-list')) {

            list = localStorage.getItem('to-do-list');
            x = JSON.parse(list);
            console.log('event', event.list);
        } else {
            alert('you may want a better computer');
        }
    }
    $('#to-do-item').text(event.list)
    $(document.body).on('click', '.checkbox', function () {
        $(this).closest("p").remove();
        localStorage.removeItem('value');
    });

});

#add-to-do {
    border-radius: 20px;
    padding: 2px;
    padding-left: 15px;
    padding-right: 15px;
    color: white;
    background-color: darkslategray;
    box-shadow: inset 3px 3px 5px RGBa(255, 255, 255, .5), 3px 3px 5px RGBa(0, 0, 0.1);
}

#add-to-do:hover {
    border-radius: 20px;
    padding: 2px;
    padding-left: 15px;
    padding-right: 15px;
    color: rgb(206, 205, 205);
    background-color: darkslategray;
    box-shadow: inset 3px 3px 5px RGBa(255, 255, 255, .5);
}

.jumbotron {
    position: absolute;
    min-width: 400px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 20px;
    z-index: 55;
    box-shadow: inset 9px 9px 14px RGB(0, 0, 0);
    border: 7px solid darkslategray;

    
}

#to-do:hover {
    border: 2px solid rgba(0, 0, 0, .2);
}

.text-center {
    color: darkslategray;
    font-weight: 200;
    font-size: 8pt;
}

.display-4 {
    text-align:center;
    font-weight: 500;
    background-color: #565656;
    color: transparent;
    text-shadow: 2px 2px 3px rgba(255, 255, 255, 0.5);
    -webkit-background-clip: text;
    -moz-background-clip: text;
    background-clip: text;
    margin-top: -10%;
}

.display-4:hover {
   
    font-weight: 500;
    background-color: #565656;
    color: transparent;
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.5);
    -webkit-background-clip: text;
    -moz-background-clip: text;
    background-clip: text;
    margin-top: -10%;
    
}

#to-do {
    border-radius: 15px;

}
#body{
    background-color: radial-gradient(white, silver, grey);
}

<!doctype html>
<html lang="en">

<head>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
    crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <title>Title</title>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" type="text/css" href="./assetts/style.css">
</head>

<body id="body">

  <div class="jumbotron jumbotron-fluid">
    
    <div class="container">
      <h1 class="display-4">To Do List</h1>
      <p class="lead">
        <form>
          <!-- form field for the to do list app -->
          <span id="todo-item">Items:
            <input id="to-do" placeholder="  your to-do's..." type="text">
            <!-- button to add listed items to DOM when clicked -->
            <input id="add-to-do" value="Add Item" type="submit">
          </span>
          <div id="completed"></div>
        </form>
        <hr>
        <!-- To-Do List -->
        <div id="to-dos"></div>

        <!-- jQuery -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

        <!-- Script -->
        <script src="./assetts/app.js"></script>
        <!-- Optional JavaScript -->
        <!-- jQuery first, then Popper.js, then Bootstrap JS -->
        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
          crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
          crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
          crossorigin="anonymous"></script>
    </div>
  </div>

  <nav class="navbar-center fixed-bottom navbar-light bg-light">
    <a class="navbar-center" href="mailto:jason@rogueathletic.com" target="_blank">
      <p class="text-center"><br>© 2019 | Jason Schutz</p>
    </a>
  </nav>
</body>

</html>

Answer 1

每次都会覆盖值。将值设为数组，然后尝试。

var value = []; var个项目；

$("#add-to-do").on("click", function (event) {
value.push($('#to-do').val().trim()),
localStorage.setItem("value", JSON.stringify(value));
$("#to-do").text(JSON.parse(localStorage.getItem("value"))); //Here the full array will be received. Take the index and then add it to the element



    event.preventDefault();
    value.push($('#to-do').val())

删除

 var a=localStorage.getItem(value);
 a.pop(item)
 localStorage.setItem('a');

在本地存储中设置多个键，并在重新加载时返回值

1 个答案: