javascript - 保存在本地存储中输入的每个输入

问题描述

每次我输入一个输入时，Localstorage 都会获取最新的输入并删除早期的输入，基本上它只存储一个项目。我如何存储我输入的任何内容。我不知道如何解决这个问题尝试了一些东西但仍然没有用。此外，当我刷新页面时，我希望本地存储详细信息仍出现在列表中。显然是localstorage的目的。

var enterButton = document.getElementById("enter");
var input = document.getElementById("userInput");
var ul = document.querySelector("ul");
var item = document.getElementsByTagName("li");


function inputLength(){
    return input.value.length;
}

function listLength(){
    return item.length;
}

function load(){

}

function createListElement() {
    var li = document.createElement("li"); // creates an element "li"
    li.appendChild(document.createTextNode(input.value)); //makes text from input field the li text
    ul.appendChild(li); //adds li to ul
    input.value = ""; //Reset text input field


    //START STRIKETHROUGH
    // because it's in the function, it only adds it for new items
    function crossOut() {
        li.classList.toggle("done");
    }

    li.addEventListener("click",crossOut);
    //END STRIKETHROUGH


    // START ADD DELETE BUTTON
    var dBtn = document.createElement("button");
    dBtn.appendChild(document.createTextNode("X"));
    li.appendChild(dBtn);
    dBtn.addEventListener("click", deleteListItem);
    // END ADD DELETE BUTTON


    //ADD CLASS DELETE (DISPLAY: NONE)
    function deleteListItem(){
        li.classList.add("delete")
    }
    //END ADD CLASS DELETE
}


function addListAfterClick(){
    var text = input.value;
    var object = [ ];

    object.push({value: text})
    localStorage.setItem("todo", JSON.stringify(object));


    if (inputLength() == 0) { //makes sure that an empty input field doesn't create a li
        alert("Please insert a word");
    }else {
        createListElement();
    }

}

function addListAfterKeypress(event) {
    if (inputLength() > 0 && event.which ===13) { //this now looks to see if you hit "enter"/"return"
        //the 13 is the enter key's keycode, this could also be display by event.keyCode === 13
        createListElement();
    }
}


enterButton.addEventListener("click",addListAfterClick);

input.addEventListener("keypress", addListAfterKeypress);


$(document).ready(function() {
    $("#list-item").sortable();
});

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>todo</title>
    <link rel="stylesheet" href="todo.css">
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">

</head>
<body>
<div class="container">
    <div>
        <div class="intro">
            <h1>Work To-Dos</h1>
        </div>
    </div>

    <div>
        <div class="helpText">
            <p id="first">Enter text into the input field to add items to your list.</p>
            <p id="second">Click the item to mark it as complete.</p>
            <p id="third">Click the "X" to remove the item from your list.</p>
        </div>
    </div>

    <div>
        <div>
            <input id="userInput" type="text" placeholder="New item...">
            <button id="enter"><i class="bi bi-pencil"></i></button>
        </div>
    </div>

    <!-- Empty List -->
    <div>
        <div class="listItems">
            <ul id="list-item">
            </ul>
        </div>
    </div>

</div>
    <script src="todo.js"></script>
</body>
</html>

标签： javascriptlocal-storage

javascript - 保存在本地存储中输入的每个输入

问题描述

解决方案

推荐阅读