Hello, everyone, for everyone to share previously had a five-step beautifully crafted clock HTML5 article, click Review " five-step teach you to create beautifully detailed HTML clock ," and " one minute to teach you how to achieve beautiful text stroke "; today to share with a H5 localStorage development of a local notepad application, the following look at his handsome looks fine now.
The main function can be achieved:
- Fill in the title verification, the title can not be empty
- You can choose to Category: Default / life / food / Code
- After successfully added immediately display
- You can search the title and classification
- Notes can click on the title to expand fold
- The first plurality of data are expanded, and the rest of the display is folded
1. initialization data
var init = {title: 'This is the title',
DATE: new new a Date () toLocaleString (),.
type: 'example',
CONT: 'This application is a note, no networking, database does not need to be directly data stored in a local easy to use ^ _ ^ '};.!
when the user first opens the application, presentation information to the user.
2. The method of package display data
External incoming data to be displayed, interior stitching and rendering data.
3. The read data from the local store offline
//读取所有数据
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, query data
$('#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, using event delegate operations to define a foldable
$('body').on('click','#noteList .title', function(){
$(this).next().slideToggle();
});
6, initialization of the display data
showList ();
Well, a beautiful HTML5 local notebook was born, will do it? Welcome attention to Shanghai Shangxue Tang html5 related technical articles.
More professional front-end knowledge, make the [2048] ape www.mk2048.com