ToDoList本地存储原生js版/jQuery版

以下是简易版的todolist小案例，用到了本地存储，所以关闭页面，下次打开内容也还是在的，可以用来记录待办事项和已经完成的事项;

localStorage使用的注意事项：获取里面的数据时使用JSON.parse(data)，把里面拿到的数据转换成我们可以看懂的对象；但是我们要对本地数据进行修改时，又要把数据转变成本地存储能识别的数据，就要用到JSON.stringfy(obj)；

HTML部分

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="todo.css"><script src="todooriginjs.js"></script>
</head>
<body><header><div class="head w"><h1>ToDoList</h1><input type="text" placeholder="添加ToDo" id="todo"></div></header><div class="w" id="doing"><div class="top"><h2>正在进行</h2><span class="doingNum"></span></div><ul class="doing"></ul></div><div class="w" id="done"><div class="top"><h2>已经完成</h2><span class="doneNum"></span></div><ul class="done w"></ul></div>
</body>
</html>

CSS部分

* {margin: 0;padding: 0;
}
li {list-style: none;
}
a {text-decoration: none;
}
body {background-color: #bbb;
}
.w {width: 400px;margin: 0 auto;
}
header {height: 40px;background-color: #666;
}
header .head {display: flex;justify-content: space-between;align-items: center;line-height: 40px;
}
header .head input {width: 220px;border-radius: 6px;height: 24px;border: 0;outline: none;padding-left: 10px;
}
header .head h1 {color: #fff;
}
#doing .top {display: flex;justify-content: space-between;padding-right: 10px;line-height: 60px;
}
#doing .top span {color: #ca1717;font-weight: 700;
}
#doing .doing li {padding: 5px 10px;background-color: #fff;display: flex;justify-content: space-between;box-shadow: 2px 2px hotpink;border-radius: 5px;margin-bottom: 8px;
}
#doing .doing li .left input {width: 25px;height: 25px;vertical-align: middle;color: #999;
}
#doing .doing li a {background-color: #df0808;border-radius: 50%;font-size: 22px;height: 25px;width: 25px;line-height: 25px;text-align: center;color: #fff;font-weight: 700;
}
#done .top {display: flex;justify-content: space-between;padding-right: 10px;line-height: 60px;
}
#done .top span {color: green;font-weight: 700;
}
#done .done li {padding: 5px 10px;background-color: #fff;display: flex;justify-content: space-between;box-shadow: 2px 2px green;border-radius: 5px;background-color: #ddd;margin-bottom: 5px;
}
#done .done li .left input {width: 25px;height: 25px;vertical-align: middle;
}
#done .done li a {background-color: #df0808;border-radius: 50%;font-size: 22px;height: 25px;width: 25px;line-height: 25px;text-align: center;color: #fff;font-weight: 700;
}

最后，原生js部分，jQuery还有VUE实现也很方便

window.onload=function(){var todo=document.querySelector('#todo');var doing=document.querySelector('.doing');var done=document.querySelector('.done');var doingNum=document.querySelector('.doingNum');var doneNum=document.querySelector('.doneNum');todo.onkeyup=function(e){if(e.keyCode===13){if(todo.value){var currentData=getLocalData();currentData.push({title:todo.value,isChecked:false});updateLocalData(currentData);loadPage();todo.value='';}else{return;}}}function getLocalData(){var data=localStorage.getItem('originjs');if(data!==null){return JSON.parse(data);}else{return [];}}function updateLocalData(m){localStorage.setItem('originjs',JSON.stringify(m));}loadPage()function loadPage(){var data=getLocalData();doing.innerHTML='';done.innerHTML='';var num1=0,num2=0;for(var k in data){if(data[k].isChecked==true){var li=document.createElement('li');li.innerHTML=`<div class="left"><input type="checkbox" checked><span>${data[k].title}</span></div><a href="javascript:;" index=${k}>-</a>`;done.appendChild(li);num2++;}else{var li=document.createElement('li');li.innerHTML=`<div class="left"><input type="checkbox"><span>${data[k].title}</span></div><a href="javascript:;" index=${k}>-</a>`;doing.appendChild(li);num1++;}li.children[1].onclick=function(){this.parentNode.remove();data.splice(this.getAttribute('index'),1);updateLocalData(data);loadPage();}li.children[0].children[0].onclick=function(){var index=this.parentNode.parentNode.children[1].getAttribute('index');data[index].isChecked=this.checked;updateLocalData(data);loadPage();}}doingNum.innerHTML=num1;doneNum.innerHTML=num2;}
}

jQuery实现的js部分也有，要用的话需要引入jQuery.js

$(function(){$('#todo').on('keydown',function(e){if(e.keyCode===13){if($(this).val()!==''){var arr=getData();arr.push({title:$(this).val(),isDone:false});setData(arr);render();$(this).val('');}else{return;}}})function getData(){var data=localStorage.getItem('todolist1');if(data!==null){return JSON.parse(data);}else{return [];}}function setData(m){localStorage.setItem('todolist1',JSON.stringify(m));}render()function render(){var data=getData();$('.doing,.done').empty();var doingNum=0,doneNum=0;$.each(data,function(i,n){if(n.isDone==false){$('.doing').prepend(`<li><div class="left"><input type="checkbox"><span>${n.title}</span></div><a href="#" index=${i}>-</a></li>`);doingNum++;}else{$('.done').prepend(`<li><div class="left"><input type="checkbox" checked><span>${n.title}</span></div><a href="#" index=${i}>-</a></li>`);doneNum++;}})$('.doingNum').text(doingNum);$('.doneNum').text(doneNum);}$('.doing,.done').on('click','a',function(){var index=$(this).attr('index');var data=getData();data.splice(index,1);setData(data);render();})$('.doing,.done').on('click','input',function(){var index=$(this).parent().siblings().attr('index');var data=getData();data[index].isDone=$(this).prop('checked');setData(data);render();})
})

ToDoList本地存储原生js版/jQuery版相关推荐

原生js、jQuery实现选项卡功能
在大家在网上平常浏览网页的时候,想必各位都会看到选项卡功能,在这里给大家详解一下用原生js.jQuery如何来写一些基本的选项卡话不多说,先给各位看一下功能图: 好了,下边 ...
span的取值与赋值（原生js与jquery） - 对比篇
文章目录关于span的取值与赋值 - 原生js与jquery代码一. span的`取值`: 1. `javascript` 2. `jquery` 二. span的`赋值`: 1. `javasc ...
原生js和jquery常用的DOM操作
前言将原生JS和jquery里面的DOM操作进行了一下整理,方便以后温习. 创建元素节点 1.原生: document.createElement("div") 2.jquery ...
html——原生js与jquery创建元素节点区别
学习完静态样式之后开始学习动态创建添加html元素,总结了下原生js与jquery生成元素区别. 1.javascript创建元素创建select var select = document.cre ...
原生js与jquery的区别
原生js与jquery的区别 1.选择器: js: $('.car_img_con img')[0]; var jsObj = document.getElementsByClassName('sel ...
原生js与jQuery显示隐藏div的几种方法
原生Js与jQuery显示隐藏div的几种方法简介:本文将会讲解,如何使用原生的JS和jquery来实现对于这个div盒子的隐藏 js 方式一首先是进行js演示和讲解. 首先是display的方法 ...
jq ajax请求php原声,原生JS与jQuery对AJAX的实现
原生JS与jQuery对AJAX的实现一.定义 W3C里这么解释AJAX: AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML). ...
原生js和jquery 遍历数组区别（forEach和each区别）
原生js和jquery 遍历数组区别(forEach和each区别) <script>var arr=[1,3,6,8,4];var obj={0:1,1:3,2:6,3:8,4:4};a ...
html 对勾单选框,利用原生js和jQuery实现单选框的勾选和取消操作的方法
根据以下的Demo,大概就可以看的明白 Demo: window.onload = function(){ var dom_a = document.getElementById('a1'); var ...
原生态JS和JQuery版的动态添加、删除表格行
过了太久,JQuery都生疏了,闲来没事,写着玩玩. 下面HTML代码作用:提交一个表单,将复选框的值提交(复选框的值等于后面的文本框,复选框和文本框处在同一行,可以动态添加和删除). >原生态 ...

ToDoList本地存储原生js版/jQuery版

ToDoList本地存储原生js版/jQuery版相关推荐

最新文章

热门文章