html在线记事本,5分钟教你制作漂亮的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[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前端知识！