原生js实现 Todolist（待办事项）本地保存

本文主要是介绍原生js实现 Todolist（待办事项）本地保存，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

文章目录

需求
代码
部分解释
- 本地储存
- 添加
- 数组方法
- bug

在这里插入图片描述

需求

首先明确需要实现的功能

输入内容，点击添加按钮或回车，添加待办事项
点击删除按钮可以删除
内容保存到本地，刷新重启后list还在

代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;border: 0;outline: none;list-style: none;box-sizing: border-box;}body{background-color: #F48C78;overflow-x: hidden;transform: scale(1.2);}#container{width: 300px;margin: 80px auto 0 auto;padding: 10px;min-height: 450px;background-color: #2F3D4A;box-shadow: 0px 3px 10px #8F5246,3px 0px 10px #8F5246;border-radius: 10px;}#container h1{color: #FCFFFF;width: 85px;margin: 30px auto;}#input {font-size: 0;   position: relative;}#input input{width: 80%;height: 30px;margin-left: 9%;border-radius: 15px;padding: 5px 10px;}#input input::-webkit-input-placeholder{ /* chrome safari*/color: #AFB2B9;text-align: center;}#input input::-moz-placeholder{ /* 火狐获取placeholder*/color: #AFB2B9;text-align: center;}#input button{width: 45px;height: 30px;border-radius: 0 15px 15px 0;background-color: #F48C78;position: absolute;right: 30px;cursor: pointer;opacity: 0;transition: all 0.5s 0.1s;visibility: hidden;color: #fff;}#input input:focus + button, #input button:hover{opacity: 1;visibility: visible;}#input button:hover{background-color: #CD4F35;}ul{margin: 30px 0;}ul li{width: 224px;margin:  10px 0 0 9%;color: #FCFFFF;background-color: #283140;font-weight: 600;padding: 5px 10px;border-radius: 10px;}ul li:hover{background-color: #455878;transition: all 0.4s ;}.removebtnContainer{margin: 4px 5px 0 0;float: right;border-radius: 50%;width: 13px;height: 13px;border: solid #FD8263;position: relative;top: 50%;transition: all 0.2s ;cursor: pointer;}.removebtnContainer:hover{background-color: #FD8263;}</style>
</head>
<body><!-- html部分属实简单 --><div id="container"><h1>Todos</h1><div id="input"><input type="text" id="content" placeholder="别玩了懒狗" onfocus="this.placeholder = ''" onblur="this.placeholder = '别玩了懒狗'"><!-- placeholder 内容自己改 --><button>add</button></div><ul id="ul"></ul></div><script>let todoList = document.getElementsByTagName('ul')[0]; let inputElement = document.getElementById('content');let buttonElement = document.getElementsByTagName('button')[0];let todos = JSON.parse(localStorage.getItem('todos')) || [];  // todos数组保存待办项 function addNew(content){let item = document.createElement('li');item.innerText = content; addNewButton(item); todoList.appendChild(item);todos.push(content);save();}function addNewButton(item){let container = document.createElement('div');container.className = 'removebtnContainer';item.appendChild(container);}function save(){localStorage.setItem('todos',JSON.stringify(todos)); // 将数组转为字符串并储存在本地}function reLoad(){  todos.forEach((content) => {let item = document.createElement('li');item.innerText = content;addNewButton(item);todoList.appendChild(item);});}function reMove(item){item.parentNode.remove(); todos.forEach((content, index) => {         if(item.parentNode.innerText.trim() == content){todos.splice(index, 1);  // splice方法 删除index开始的 1项}})save();}/* ↑ 函数声明-------------------------------------------------------------------------事件、执行 ↓                                                              */reLoad(); //从本地载入/*两种方式添加待办项*///鼠标点击添加buttonElement.addEventListener('click', () =>{if(inputElement.value){addNew(inputElement.value.trim());inputElement.value = '';}},false)//键盘回车添加inputElement.addEventListener('keyup', (event) =>{console.log(event); if(event.keyCode == 13 && inputElement.value){  //回车 keyCode === 13addNew(inputElement.value.trim());inputElement.value = '';}})//点击删除todoList.addEventListener('click',(event)=>{if(event.target.className == 'removebtnContainer'){reMove(event.target);}},false)</script>
</body></html>

js部分并不长，逻辑也比较清晰
~~css最难~~

部分解释

本地储存

localStorage教程
用localStorage储存在本地，每次开启页面时再读取
因为localStorage是以字符串形式存储数据的，所以借助JSON将数组转为字符串格式

localStorage.setItem('todos',JSON.stringify(todos));
在这里插入图片描述

添加

addEventListener给后面的处理函数传入事件对象

        inputElement.addEventListener('keyup', (event) =>{  //此处event为addEventListener传入console.log(event); if(event.keyCode == 13 && inputElement.value){  //回车 keyCode === 13addNew(inputElement.value.trim());inputElement.value = '';}})