javascript - 将项目存储到本地存储似乎不起作用

Question

我正在为自己制作待办事项应用程序。并尝试将数据保存在本地存储中。如果我做错了什么，我只想问问我的代码。

my html :

    <div id="todo1">
        <center><h1>All Tasks</h1></center>
        <div id="todo"></div>
        <form class="add-items">
            <center><input type="text" name="item" placeholder="eg. Buy bread" class="add_task" required></center>
        <center><input type="submit" class="add" value="add task"/></center>
        </form>

    </div>

my javascript:

    const addItems = document.querySelector('.add-items'); 
    const items = JSON.parse(localStorage.getItem('items')) || [];

    function addItem(e) {
        e.preventDefault();
        let todo = document.querySelector('#todo');
        let input = (this.querySelector('[name=item]').value);
        let text = document.createTextNode(input);
        let markup = `<center><div class="task">${input}<i class="far fa-check-circle"></i><i class="far fa-trash-alt" id="trash"></i></div></center>`;
        todo.insertAdjacentHTML('beforeend', markup);
        const item = {
            task:input
        };
        items.push(item);
        localStorage.setItem('items', JSON.stringify(items));
        this.reset();
    }

    addItems.addEventListener('submit', addItem);

Answer 1

实际上，您存储到 localStorage 中的项目最初并未绑定(bind)到 html dom，这就是为什么您无法在 View 中看到来自 localStorage 的项目。

[http://jsfiddle.net/r76xots2/9/]

这里是您的代码的工作链接，其中我创建了一个通用函数，该函数将从 localStorage 更新您的 dom，每次您想要更新时都可以使用它。

我还创建了一个支票，因此不能将同一项目插入两次。如果您不需要它，您可以将其删除或发表评论。