一个小小的移动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 note</p>
        </div>
        <div class="fl set">
            <i></i>
            <p>Settings</p>
        </div>
    </footer>
 </div>
           

功能代码

• 便签列表模板

<textarea id="template">
    <section class="note-box clearfix">
        <p class="time fl">{t}</p>
        <h2 class="content fl">{ctn}</h2>
    </section>
</textarea>

/*模板替换数据*/
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();
    }
           

未完待续