摘要:本文讲解了制作一个Html5本地记事本案例,希望阅读本篇文章以后大家有所收获,帮助大家对HTML5的理解更加深入。
今天给大家分享一个用H5 + localStorage开发的一个本地记事本应用,下面先看一下他精美的帅样子吧。
主要实现的功能有:
填写标题验证功能,标题不能为空
可以选择分类:默认/生活/美食/代码
添加成功后,立即显示
可以搜索标题和分类
笔记可以点击标题展开折叠
多条数据第一条展开显示,其余折叠显示
1.初始化数据
var init = {title:'这是标题',
date:new Date().toLocaleString(),type:'示例',cont:'这是一个笔记应用,不需要联网,也不需要数据库,可以直接把数据储存在本地.方便易用!^_^'};
当用户第一次打开应用时,给用户的提示信息。
2.封装显示数据的方法
function show(notes){ var temp = $('#temp').html(); var tempStr= ''; //如果不是数组,变成数组 if(!Array.isArray(notes)){ notes = [notes]; } for(var i=notes.length-1;i>-1;i--){ var note = notes[i]; tempStr += temp.replace('@title',note.title) .replace('@date',note.date) .replace('@type',note.type) .replace('@cont',note.cont); } $('#noteList').html(tempStr); }
外部传入要显示的数据,内部进行数据的拼接和渲染。
3.从本地存储中读取离线数据
//读取所有数据 function showList(){ var notes = localStorage.getItem('notes'); if(!notes){ show(init); }else{ notes = JSON.parse(notes); show(notes); } //第一个展开 $('#noteList .item:first').find('.title').trigger('click'); }
4、查询数据
$('#search').click(function(){ var title = $('#title1').val(); var type = $('#type1').val(); var notes = localStorage.getItem('notes'); if(!notes){ alert('没有本地笔记数据!'); return; }else{ notes = JSON.parse(notes); } var note = []; for(var i=0;i<notes.length;i++){ //notes[i] json对象 var flag = false; if(!title){ flag = notes[i].type==type; }else if(!type){ flag = notes[i].title.indexOf(title)>-1; }else{ flag = notes[i].title.indexOf(title)>-1 && notes[i].type==type; } if(flag){ note.push(notes[i]); } } if(note.length == 0){ alert('抱歉~没有对应的笔记!'); }else{ show(note); } });
5、使用事件委托来定义折叠展开操作
$('body').on('click','#noteList .title', function(){ $(this).next().slideToggle(); });
6、初始化显示数据
showList();
好了,一个精美的HTML5本地记事本就诞生了,会做了吗?本文由职坐标整理发布,欢迎关注职坐标WEB前端HTML5/CSS3频道,获取更多WEB前端知识!
您输入的评论内容中包含违禁敏感词
我知道了
请输入正确的手机号码
请输入正确的验证码
您今天的短信下发次数太多了,明天再试试吧!
我们会在第一时间安排职业规划师联系您!
您也可以联系我们的职业规划师咨询:
版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
沪公网安备 31011502005948号