如何使用本地存储在 javascript 中制作待办事项列表

Question

JS 代码

var response = document.querySelector('#name').value;
localStorage.getItem('li')
localStorage.setItem('li', response)

document.addEventListener("DOMContentLoaded", () => {

  document.querySelector('#submit').disabled = true;  
  document.querySelector('#name').onkeyup = () => {
    // checking whether the input bar is empty or not
    if (document.querySelector('#name').value.length > 0)
      document.querySelector('#submit').disabled = false;
    else document.querySelector('#submit').disabled = true;
  };

  window.onload = () => {
    document.querySelector('form').onsubmit = () => {
      //Crearting a list item
      const li = document.createElement('li');
      li.innerHTML = localStorage.getItem('id')

      //Appending it to the unordered list
      document.querySelector('.unordered').append(li);

      //Clear input feild
      document.querySelector('#name').value = "";
      document.querySelector('#submit').disabled = true;

      //Stop form from submitting
      return false;
    };
  };
});

HTML 代码

{% extends "base.html" %}

{% block head %}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
    integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<title>Creating new channel</title>
<link rel="stylesheet" href="{{url_for('static', filename = 'css/main.css')}}" />
<script src="{{url_for('static', filename = 'js/button.js')}}"></script>
{% endblock %}

{% block body %}
<img src="{{url_for('static', filename = 'images/Logo.png')}}">
<div class="form-div">
    <form class="form-group">
        <input type="text" id="name" class="form-control" placeholder="Create Channel" autocomplete="off" /><br />
        <button type="submit" class="btn btn-success" id="submit">Create Channel</button>
    </form>
    <ol class="unordered"></ol>
</div>
{% endblock %}

</html>

我正在尝试创建一个待办事项列表，因此，为了永久存储数据，即使浏览器关闭，我也使用本地存储。但是当我在其中使用本地存储时它不起作用（当我刷新页面时，所有内容都被删除）。在控制台中，当我运行查询 localstorage.getItem('li') 然后 localstorage.setItem( 'li', response) 则显示用户输入的值，但无法永久存储。我的代码是错误的还是有任何逻辑错误。

Answer 1

您在document.querySelector('form').onsubmit 中写入li.innerHTML = localStorage.getItem('id')。所以这只会在表单提交时执行。要正常显示，您必须将其从该函数中取出并放入window.load。

类似这样的：

    window.onload = () => {


      const li = document.createElement('li');
        li.innerHTML = localStorage.getItem('id') ? 

localStorage.getItem('id') : "";
document.querySelector('.unordered').append(li);

    document.querySelector('form').onsubmit = () => {
      //Crearting a list item
      const li = document.createElement('li');
      li.innerHTML = localStorage.getItem('id');
      ...
    };
  };