PCにデータを保存する - YoheiM技術やらずに終われまテン

こんにちは、宗定洋平（@yoheiMune）です。HTML5でどんな事が出来るんだろうと、HTML5の可能性に魅了されてるエンジニアです。
今日はHTML5のLocalStorage機能を触ってみたので、その結果と感想をブログに残したいと思います。

http://html5learner.appspot.com/html/localstorage/localStorage1.html

LocalStorage機能とは？

LocalStorage機能とは、ブラウザからPCにデータを保存出来る機能です。昔からCokkieを利用してPCにブラウザ上のデータが保存出来る技術はありましたが、より自由にそして簡単にPCへデータを保存出来るようになりました。

LocalStorageは何が良いの？

LocalStorage機能のおかげで、WebアプリケーションやWebページは、データの保存場所をサーバーとクライアントのどちらでも好きに選択出来ます。サーバーに送る必要の無い情報はクライアントに保存する。そうする事で通信量を減らし、より速いWebページへ進化する事ができます。

LocalStorageの利用例は？

例えば、Webページにおいてユーザーの画面設定情報をPCに保存しておき、次に画面を開いたときにすぐにその設定情報を画面に反映する。
例えば、ブログなどの大量の文字を入力するサイトで、一定期間ごとにPCへデータを保存することで、間違ってブラウザを閉じても保存しておいたデータから復元できる。
など色々と便利な使い方ができそうです。

LocalStorageの実装方法

LocalStoraegeを使って実装してみたいという方へ、少しでも参考になればと思い、実装サンプルを載せたいと思います。JavaScriptで以下のように簡単に利用することができます。
(HTML)

<table>
  <tr>
    <td>Name：</td><td><input type="text" id="inputName" /></td>
  </tr>
  <tr>
    <td>Memo：</td>
    <td><input type="text" id="inputMemo" /></td>
  </tr>
</table>
<button id="store">保存する</button>
<button id="restore">保存していた内容を読み込む</button>

(JavaScript)

// store data, when the button is clicked.
document.getElementById("store").addEventListener("click", function () {
  window.localStorage.setItem("name", document.getElementById("inputName").value);	
window.localStorage.setItem("memo", document.getElementById("inputMemo").value);	
}, true);
	
// read data from localStorage, when the button is clicked.
document.getElementById("restore").addEventListener("click", function () {
  document.getElementById("inputName").value = window.localStorage.getItem("name") || "";
  document.getElementById("inputMemo").value = window.localStorage.getItem("memo") || "";
}, true);