1 minutes quickly create beautiful H5 local Notepad

Original link: https://www.mk2048.com/blog/blog.php?id=h0c0aajcb1bb&title=1%E5%88%86%E9%92%9F%E5%BF%AB%E9%80%9F%E5 % 88% B6% E4% BD % 9C% E6% BC% 82% E4% BA% AE% E7% 9A% 84H5% E6% 9C% AC% E5% 9C% B0% E8% AE% B0% E4% BA % 8B% E6% 9C% AC

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

 

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);  
}  

　　

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.

 

This article Shanghai Shangxue Tang front-end original, reproduced please indicate the original source.

More professional front-end knowledge, make the [2048] ape www.mk2048.com