前端学习（1045）:todolist本地存储加载到页面

<!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="rodocount"></span></h2><ol id="todolist" class="demo-box"></ol><h2>已经完成<span id="rodocount"></span></h2><ul id="donelist"></ul></section><footer>Copyright &copy;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) {//先读取本地存储原来的数据var local = getDate();console.log(local);//把local数组更新元素local.push({title: $(this).val(),done: false});//把这个数组给本地存储saveDate(local);}})//读取本地存储的数据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").empty();//遍历整个数据$.each(data, function(i, n) {console.log(n);$("ol").prepend("<li><input type='checkbox'><p>" + n.title + "</p><a href='javascript:;'></a></li>");})}});</script>
</body></html>

运行结果

前端学习（1045）:todolist本地存储加载到页面相关推荐

JS本地存储加载渲染页面信息、动态更新本地存储数据
本地存储数据加载到页面: 从本地存储中获取数据,并由字符串基础类型转换为对象类型(存储至堆内存中) 初始化变量data 为空数组(变量data存储在栈内存中) 将获取的数据赋值给变量data (实质为 ...
【Flutter】Image 组件 ( 配置本地 gif 图片资源 | 本地资源加载 placeholder )
文章目录一.配置本地 gif 图片资源二.本地资源加载 Placeholder 三.完整代码示例四.相关资源一.配置本地 gif 图片资源配置 assets 图片资源 : 将 gif 图片拷 ...
SAP Spartacus 4.0 源代码模式下开启 SSR，为什么会从本地去加载 all.css？
为什么会从本地去加载 all.css 文件呢?这路径不对头: CSR 模式下,css 的加载是好的: 在 icon-loader.service.ts 代码里设置断点: 更多Jerry的原创文章,尽在 ...
vue 图片拖动加载类似于地图_前端性能优化之图片懒加载（附vue自定义指令）...
作者:lzg9527 链接:https://juejin.cn/post/6903774214780616718 在类电商类项目,往往存在大量的图片,如 banner 广告图,菜单导航图,美团等商家列 ...
H323plus的学习使用（3）——加载H.264插件
H323plus的学习使用(3)--加载H.264插件在h323plus的学习中,总是调试simple以尝试h323plus的能力集,在simple视频聊天中提到了一个关于ptlib插件的环境变量的 ...
unity下载模型到本地并加载
目录 1.目的 2.参考 2.1 Unity3D 动态加载本地/网络GLB模型 2.2 unity下载模型到本地并加载 2.3 插件:TriLib2.0 3.注意 4.操作 4.1 3dmax简单的制 ...
[Cocos Creator] 本地文件加载系列六：本地龙骨动画dragonbones加载（web模式）
[Cocos Creator] 本地文件加载系列一:本地文件读取(web模式) [Cocos Creator] 本地文件加载系列二:本地音频文件播放(web模式) [Cocos Creator] 本地 ...
Pytorch深度学习（五）：加载数据集以及mini-batch的使用
Pytorch深度学习(五):加载数据集以及mini-batch的使用参考B站课程:<PyTorch深度学习实践>完结合集传送门:<PyTorch深度学习实践>完结合集一 ...
在HBuilder创建前端web项目时，图片加载不出来，怎么解决？
在HBuilder创建前端web项目时,图片加载不出来,如下: 解决方法: 将图片文件路径减少,可正常显示,如图:

前端学习（1045）:todolist本地存储加载到页面

前端学习（1045）:todolist本地存储加载到页面相关推荐

最新文章

热门文章