最近看完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();
    }

未完待續