html+css+js+jquery之常见的的本地存储实现一个简单的todoList项目
生活随笔
收集整理的這篇文章主要介紹了
html+css+js+jquery之常见的的本地存储实现一个简单的todoList项目
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
前言
就在幾天前，在b站的某博主那里看見了一個(gè)面試的模擬，意外看到那個(gè)同學(xué)有一個(gè)todoList的項(xiàng)目
很顯然，這個(gè)項(xiàng)目就和本次我所要展示的項(xiàng)目代碼原理一致，但是界面上我這個(gè)就會不太美觀。
知識點(diǎn)
本次博客所需要的知識是html+css+js+jquery才能實(shí)現(xiàn)
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>todoList待辦事項(xiàng)</title><script src="./js/jquery.min.js"></script> </head><body><header><section><label for="title">ToDoList</label><input type="text" id="title" placeholder="添加ToDo"></section></header><section><h2>正在進(jìn)行<span id="todocount"></span></h2><ol id="todolist" class="demo-box"></ol><h2>已經(jīng)完成<span id="donecount"></span></h2><ul id="donelist"></ul></section><footer>Copyright ©2014 todolist.cn</footer><script>var todolist = [{title: '我今天吃了八個(gè)饅頭',done: false}, {title: '我今天學(xué)習(xí)jq',done: false}, ];localStorage.setItem("todo", JSON.stringify(todolist));//本地的數(shù)組轉(zhuǎn)換為json.stringfy();var data = localStorage.getItem("todo");console.log(typeof data);//獲取本地存儲數(shù)據(jù)需要把字符串?dāng)?shù)據(jù)轉(zhuǎn)換為對象形式j(luò)son.parsedata = JSON.parse(data);console.log(data);$(function() {//todolist渲染到界面load();//按下回車 把完整數(shù)據(jù)存儲到本地存儲里面$("#title").on("keydown", function(event) {if (event.keyCode === 13) {if ($(this).val() === "") {alert("請輸入數(shù)值");} else {//先讀取本地存儲原來的數(shù)據(jù)var local = getDate();console.log(local);//把local數(shù)組更新元素local.push({title: $(this).val(),done: false});//把這個(gè)數(shù)組給本地存儲saveDate(local);//todolist渲染到界面load();$(this).val("");}}});//todolist刪除事件$("ol,ul").on("click", "a", function() {//獲取本地存儲var data = getDate();console.log(data);//修改數(shù)據(jù)var index = $(this).attr("id");console.log(index);//保存到本地存儲data.splice(index, 1);//渲染saveDate(data);load();});//正在進(jìn)行和已完成$("ol,ul").on("click", "input", function() {//獲取本地存儲的數(shù)據(jù)var data = getDate();//修改數(shù)據(jù)var index = $(this).siblings("a").attr("id");//data[index].done = $(this).prop("checked");// console.log(data);//保存到本地存儲saveDate(data);//渲染load();})//讀取本地存儲的數(shù)據(jù)function getDate() {var data = localStorage.getItem("todolist");if (data !== null) {//本地存儲里面的數(shù)據(jù)是字符串格式的return JSON.parse(data);} else {//返回一個(gè)數(shù)組return [];}}//保存數(shù)據(jù)function saveDate(data) {localStorage.setItem("todolist", JSON.stringify(data));}//渲染數(shù)據(jù)function load() {//讀取本地的數(shù)據(jù)var data = getDate(data);console.log(data);//遍歷之前清空$("ol,ul").empty();var todoCount = 0; //正在進(jìn)行的個(gè)數(shù)var doneCount = 0; //已經(jīng)完成的個(gè)數(shù)//遍歷整個(gè)數(shù)據(jù)$.each(data, function(i, n) {//console.log(n);if (n.done) {$("ul").prepend("<li><input type='checkbox' checked='checked'><p>" + n.title +"</p><a href='javascript:;' id=" + i + ">刪除</a></li>");doneCount++;} else {$("ol").prepend("<li><input type='checkbox'><p>" + n.title +"</p><a href='javascript:;' id=" + i + ">刪除</a></li>");todoCount++;}$("#todocount").text(todoCount);$("#donecount").text(doneCount);})}});</script> </body></html>代碼需要引入jquery.min,js即可使用
功能點(diǎn)一
功能點(diǎn)二
功能點(diǎn)三
功能點(diǎn)四
、
本代碼可以直接拷貝 css優(yōu)化之后可做前端項(xiàng)目使用。
創(chuàng)作不易，你的點(diǎn)贊是對歌謠最大的鼓勵，謝謝你那么酷還來看我的文章。我是歌謠，勵志成為一名
優(yōu)秀的技術(shù)管理者。
?
?
總結(jié)
以上是生活随笔為你收集整理的html+css+js+jquery之常见的的本地存储实现一个简单的todoList项目的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： java模拟器配置_JAVA模拟器全功略
- 下一篇： 雷电模拟器7抓包安装证书