一个小小的移动web版便签

最近看完html5的locationStorage存储，有点小小的兴奋，比起mysql的那些数据库，这个可迷你多了，正好满足我做一些只存储一些小东西的小项目。
localStorage 方法存储的数据没有时间限制。第二天、第二周或下一年之后，数据依然可用，即使把浏览器关闭了，再次打开时候，数据依旧存在。
酱酱酱~迷你noteApp从小诞生~~~是的，我还是简约控~
长这样：

目标功能：

• 添加便签
• 搜索便签
• 删除便签
• 浏览便签
• 修改背景

html大致框架

• 搜索栏
• 便签内容容器
• 底部菜单栏

<div class="main">
    <header>
        <div class="search">
            <input type="text" id="search" placeholder="search for note"/>
        div>
    header>
    <article>article>
    <footer class="fixed clearfix">
        <div class="fl new">
            <i>i>
            <p>New notep>
        div>
        <div class="fl set">
            <i>i>
            <p>Settingsp>
        div>
    footer>
 div>

功能代码

• 便签列表模板

"template"</span>>
    <section <span class="hljs-class"><span class="hljs-keyword">class</span>="<span class="hljs-title">note</span>-<span class="hljs-title">box</span> <span class="hljs-title">clearfix</span>">
        <<span class="hljs-title">p</span> <span class="hljs-title">class</span>="<span class="hljs-title">time</span> <span class="hljs-title">fl</span>">{</span>t}</p>
        <h2 <span class="hljs-class"><span class="hljs-keyword">class</span>="<span class="hljs-title">content</span> <span class="hljs-title">fl</span>">{</span>ctn}</h2>
    </section>


/*模板替换数据*/
function formatTemplate(dta, tmpl) {
    var format = {
        name: function (x) {
            return x
        }
    };
    return tmpl.replace(/{(\w+)}/g, function (m1, m2) {
        if (!m2)
            return "";
        return (format && format[m2]) ? format[m2](dta[m2]) : dta[m2];
    });
}

• 检测浏览器

  由于localStorage是html5的新特性，有些老旧浏览器无法识别兼容，故在网页最前面应当判断浏览器是否兼容localStorage

function isWebStorage(){
    if(typeof(Storage)!== 'undefined'){
        console.log('支持web存储');
    }else{
        alert('您的浏览器太旧了不支持该应用，换个新版本吧');
    }
}

• 读取已经保存的数据

init : function(){
      data = JSON.parse(localStorage.getItem(this.obj));
      for(var i in data){
          global.joinHtml(i,data[i]);
      }
  }

• 保存数据

ajaxAdd : function(content,time){
        data[content] = time;
        localStorage.setItem(this.obj,JSON.stringify(data));
        this.joinHtml(content,time);
        this.shadowHide();
    }

未完待续