html+css+js+jquery之常见的的本地存储实现一个简单的todoList项目
前言
就在几天前,在b站的某博主那里看见了一个面试的模拟,意外看到那个同学有一个todoList的项目
很显然,这个项目就和本次我所要展示的项目代码原理一致,但是界面上我这个就会不太美观。
知识点
本次博客所需要的知识是html+css+js+jquery才能实现
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>todoList待办事项</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>正在进行<span id="todocount"></span></h2><ol id="todolist" class="demo-box"></ol><h2>已经完成<span id="donecount"></span></h2><ul id="donelist"></ul></section><footer>Copyright ©2014 todolist.cn</footer><script>var todolist = [{title: '我今天吃了八个馒头',done: false}, {title: '我今天学习jq',done: false}, ];localStorage.setItem("todo", JSON.stringify(todolist));//本地的数组转换为json.stringfy();var data = localStorage.getItem("todo");console.log(typeof data);//获取本地存储数据需要把字符串数据转换为对象形式json.parsedata = JSON.parse(data);console.log(data);$(function() {//todolist渲染到界面load();//按下回车 把完整数据存储到本地存储里面$("#title").on("keydown", function(event) {if (event.keyCode === 13) {if ($(this).val() === "") {alert("请输入数值");} else {//先读取本地存储原来的数据var local = getDate();console.log(local);//把local数组更新元素local.push({title: $(this).val(),done: false});//把这个数组给本地存储saveDate(local);//todolist渲染到界面load();$(this).val("");}}});//todolist删除事件$("ol,ul").on("click", "a", function() {//获取本地存储var data = getDate();console.log(data);//修改数据var index = $(this).attr("id");console.log(index);//保存到本地存储data.splice(index, 1);//渲染saveDate(data);load();});//正在进行和已完成$("ol,ul").on("click", "input", function() {//获取本地存储的数据var data = getDate();//修改数据var index = $(this).siblings("a").attr("id");//data[index].done = $(this).prop("checked");// console.log(data);//保存到本地存储saveDate(data);//渲染load();})//读取本地存储的数据function getDate() {var data = localStorage.getItem("todolist");if (data !== null) {//本地存储里面的数据是字符串格式的return JSON.parse(data);} else {//返回一个数组return [];}}//保存数据function saveDate(data) {localStorage.setItem("todolist", JSON.stringify(data));}//渲染数据function load() {//读取本地的数据var data = getDate(data);console.log(data);//遍历之前清空$("ol,ul").empty();var todoCount = 0; //正在进行的个数var doneCount = 0; //已经完成的个数//遍历整个数据$.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即可使用
功能点一
功能点二
功能点三
功能点四
、
本代码可以直接拷贝 css优化之后可做前端项目使用。
创作不易,你的点赞是对歌谣最大的鼓励,谢谢你那么酷还来看我的文章。我是歌谣,励志成为一名
优秀的技术管理者。
html+css+js+jquery之常见的的本地存储实现一个简单的todoList项目相关推荐
- (008)前端css,js,Jquery,Servlet入门
摘要:本周的学习内容是前端的css,js,Jquery,Servlet的入门; 文章目录 1 CSS 1.1 CSS入门以及使用方式 1.2 CSS的选择器(重点) 1.3 css的样式属性 1.3. ...
- 基于HTML+CSS+JS+JQuery的京东商城
基于HTML+CSS+JS+JQuery的京东商城 包含京东商城首页,商品详情页,购物车页,订单确认页,结算页面,登录页,注册页. 项目截图 注册页面,有正则表达式验证,验证码则为6位随机数,注册成功 ...
- HTML+CSS+JS+Jquery面试题
HTML+CSS+JS+Jquery面试题 1.CSS中 link 和@import 的区别 Link属于HTML标签,@import是css提供的,只能用来加载css 页面加载时link会同时加载, ...
- html 获取下一个兄弟节点,js jquery获取当前元素的兄弟级 上一个 下一个元素
var chils= s.childNodes; //得到s的全部子节点 var par=s.parentNode; //得到s的父节点 var ns=s.nextSbiling; //获得 ...
- 搭建Vue.js环境,建立一个简单的Vue项目
基于vue-cli快速构建 Vue是近年来比较火的一个前端框架,所以搭建Vue.js环境,要装webpack,vue-cli,Vue 安装webpack命令如下 $ cnpm install webp ...
- 前端总结(html css js jQuery)
前端三剑客总结在这里插入代码片 架构模式:c/s 和 b/s (客户端/服务器 浏览器/服务器 ) 我们学的是b/s架构模式. 资源分类:动态和静态资源 动态资源需要用到数据库(不是动一动就是动态资源 ...
- web前端基础html,css,js,jquery
目录 1 前端技术: 1.1 学习方法 1.1.1 前端要怎么学? 1.1.2 前端技术栈 1.2 HBuilderX 1.2.1 介绍 1.2.2 安装 1.2.3 主题 1.2.4 字体 1.2. ...
- 基于html+css+js+jquery的购物页面设计
1.jQuery介绍 jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码(框架)于2006年1月由John Resig发布.jQue ...
- 原生JS熊猫登录注册验证,获取本地存储loaclStroage的用户名
1,熊猫登录界面,通过大量原生CSS和原生JS代码,完成并实现了简单的用户交互,通过获取本地存储空间的用户名,来实现简单的登录效果, 2,判断了用户名输入框和本地存储空间的用户名是否有重复, 解决了注 ...
最新文章
- J2Cache 中使用 Lettuce 替代 Jedis 管理 Redis 连接
- unix到底有啥用_观点|什么是Unix以及它为什么这么重要?
- 机器学习--CART分类回归树
- echarts 4.0.4怎么下载_怎么让ECharts的提示框tooltip自动轮播?
- 燕山大学计算机专业研究生怎么样,求助大家!重庆邮电大学计算机专业的研究生值得一读吗?...
- javascript编写_如何在JavaScript中使用解构来编写更简洁,功能更强大的代码
- 10分钟搞懂:亿级用户的分布式数据存储解决方案!
- html怎么遍历数组,js遍历数组有多少种方法
- 可编辑PSD分层疫情防护宣传海报
- html5圆形导航菜单,圆滑细腻,那些使用圆形导航菜单的漂亮网页设计
- 基于Opencv3.0对图像进行透视变换
- Visual Studio 2012安装VASSISTX插件后导致CPU高的解决的方法
- VMware Workstation 備份與恢復虛擬機
- 近世代数--环--环的一些基本概念
- Solaris 设备状态检查常用命令
- CA配置证书自动注册
- Web前端是干嘛的 为什么要学Web前端
- 知乎服务器出现故障:APP出现异常提示
- Apex—— 查询一个对象上的所有字段记录
- 向UBOOT 中添加自己的板子
热门文章
- PHP JSON数组与对象的理解
- Android FTP Server 1
- Alt Gr or Shift
- 理解Javascript_02_理解undefined和null
- java activemq jmx_通过JMX 获取Activemq 队列信息
- oracle的集合操作符,[Oracle] Oracle的集合操作符
- surfaceview结束后怎么处理_污泥压滤机处理后的污泥怎么处置
- MSP430F5529 DriverLib 库函数学习笔记(六)定时器A产生PWM波
- IAR切BANK--BANK说明
- Python爬虫利器四PhantomJS的用法