2012/01/18更新

[HTML5] PCにデータを保存する

HTML5でどんな事が出来るんだろうと、HTML5の可能性に魅了されてるエンジニアです。

今日はHTML5のLocalStorage機能を触ってみたので、その結果と感想をブログに残したいと思います。

http://www.yoheim.net/labo/html5/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);

・「window.localStorage.setItem(Key , Value)」でデータを保存します。

・「window.localStorage.getItem(Key)」でデータを読み取ります。

LocalStorageで保存したデータが利用出来る範囲

LocalStorageにてデータを保存した場合、同一の「プロトコル＋ドメイン＋ポート」のURLのページから読み出しをすることができます。例えば、「http://www.yoheim.net/labo/html/localstorage/localStorage1.html」でデータを保存した場合。

・「http://www.yoheim.net/index.php」は読み出し可能

・「http://www.yoheim.net/labo/html/canvas/LineArt.html」も読み出し可能

・「http://www2.yoheim.net/index.php」は読み出し不可

最後に

LocalStorage機能は使い方が簡単で、色々な用途がありそうなので、将来の可能性が大きな機能だと私は思います。エンジニアのアイデア次第で面白い、便利な機能を実現できる、そう思いました。

まだまだHTML5を頑張ろうー！！