javascript - 如何使用本地存储在 javascript 中制作待办事项列表
问题描述
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) 那么它会显示用户输入的值,但无法永久存储。我的代码是错误的还是有任何逻辑错误。
解决方案
你在li.innerHTML = localStorage.getItem('id')
里面写document.querySelector('form').onsubmit
。所以这只会在表单提交时执行。要正常显示它,您必须将其从该功能中取出并放入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');
...
};
};
推荐阅读
- apache-spark - spark中处理重复值较多的列时尽量减少存储空间
- firebase - 使用自定义令牌登录匿名用户会删除匿名状态
- c++ - 理解 PGM 数据并将 PGM 数据加载到向量/数组中
- java - 使用在 Java 中调用三参数构造函数的重载默认构造函数?
- javascript - Fluid-Framework 和 Signal-R 的区别
- javascript - 一个 3 字节宽的 UTF-8 字符如何只使用一个 UTF-16 代码单元?
- php - php get_meta_tags 没有得到结果(帮助)
- javascript - 我找不到小错误:Invalid shorthand property initializer 等
- python - 如何在由 pandas DataFrame 制作的 matplotlib pyplot 中显示精确值?
- javascript - 在网格布局中单击时突出显示图像并将其置于前面