大家好，以前给大家分享过一个五步骤制作精美的HTML5时钟的文章，点击回顾《五步教你制作漂亮精致的HTML时钟》，还有《一分钟教你如何实现唯美的文字描边》；今天给大家分享一个用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本地记事本就诞生了，会做了吗？欢迎关注上海尚学堂html5相关技术文章。

本文为上海尚学堂前端原创，转载请注明原文出处。