この記事は賞味期限切れです。（更新から1年が経過しています）

昨日書いた「jQuery.triggerを使ってEventDispatcher(AS3)のような事をしてみる」を応用して、
localStorageと連携して、一定時間で自動保存してくれる簡単なメモ帳を書いてみます。

DEMO on JS Bin

HTML

<form action="">
    <textarea name="memopad" id="memopad" cols="30" rows="10"></textarea>
    <fieldset>
        <input type="button" value="SAVE" id="saveButton" />
        <input type="reset" value="CLEAR" id="clearButton" />
    </fieldset>
</form>
<p id="message"></p>

JavaScript

var MemoPad = function(){};  
MemoPad.prototype = {  

    EVENT_SAVE : "save",  
    jq : $(this),  

    textarea : null,  
    storekey : null,  
    time : null,  

    create : function( id, time ){  
        this.storekey = id;  
        this.time = time || 15000;  
        this.textarea = $( "#" + id );  
        this.textarea.val( localStorage[this.storekey] || "" );  
        setInterval( $.proxy(this.save, this), this.time );  
        return this;  
    },  
    save : function(){  
        if( localStorage[this.storekey] !== this.textarea.val() ){  
            localStorage.setItem( this.storekey, this.textarea.val() );  
            this.jq.trigger( this.EVENT_SAVE );  
        }  
    },  
    getValue : function(){  
        return String( localStorage[this.storekey] || "" );  
    },  
    bind : function( evt, func ){  
        this.jq.bind( evt, func );  
    }  
};

localStorageの使い方は以前記事で軽く触れた通り。
HTML5のLocalStorageでToDoリストを制作するチュートリアル

取得/保存は、localStorage.getItem / localStorage.setItem
またはプロパティアクセスで行ないます。

自動保存は、setIntervalでsaveメソッドを定期的に呼び出して実行。
問題のtriggerは、saveメソッドが呼ばれてlocalStorageに値を保存した後に
「save」イベントを送出しています。

var myMemoPad = new MemoPad().create( "memopad" );
myMemoPad.bind( myMemoPad.EVENT_SAVE, function(e){
    $("#message")
    .html( "保存されました - " + String( new Date() ) )
    .hide().fadeIn();<br />
});
$("#saveButton").bind("click", $.proxy( myMemoPad.save, myMemoPad ) );

createはコンストラクタ風のメソッドです。引数にはtextareaのidと、
一応第二引数に自動保存の間隔（ミリ秒）を渡す事もできます。
もっと大きな物を書く場合はオブジェクトで渡してあげたほうが良いですね。

上の例では、MemoPadの「save」イベントに、
保存された時にメッセージとタイムスタンプを表示する関数をリスナとして設定しています。

たかだかこの程度のスクリプトだとこういう書き方は大袈裟な感じがしますが、
もっと複雑怪奇な物を組んでいく時は、
オブジェクト同士の連携がソース上で追いやすくなる気がします。