«
»

Web Storageを使ってみる

2011 年 10 月 17 日 by fujii

HTML5と共に標準化が進められているAPIの中にWeb Storageがあります。
Web Storageを利用すると、ローカルディスク上にデータの保存が可能となります。
Cookieと異なり有効期限がないので、データを永続的に保存することができます。

Web Storageにはローカルストレージ、セッションストレージの二種類があります。

  • ローカルストレージは永続的にデータの保存が可能
  • セッションストレージはブラウザを開いている間のみデータの保存が可能

使い方は簡単で、データの読み書きは以下になります。

[保存]

localStorage.setItem(key, value);

[読み込み]

ret = localStorage.getItem(key);

上記のように、メソッドを呼び出してデータの読み書きできますが、配列、プロパティ形式でも利用可能です。

localStorage.setItem("key_dayo", "value_dayo");
localStorage.key_dayo = "value_dayo";
localStorage["key_dayo"] = "value_dayo";

このローカルストレージを利用し、下の画像のような簡単なサンプル(簡易メモ)を作成してみました。

easy_memo

「保存」ボタンを押すことで、テキストエリア内に記述した文字列をローカルストレージに保存します。
「読込」 ボタンを押すとローカルストレージに保存した、文字列をテキストエリア内に表示することができます。

<h1>簡易メモ</h1>
<textarea id="txtMemo" cols="50" rows="10"></textarea>

<input id="saveMemo" name="saveMemo" type="button" value="保存" />
<input id="readMemo" name="readMemo" type="button" value="読込" />

<script type="text/javascript"><!--
        (function() {
            if (!localStorage) {
                alert("ローカルストレージが利用できません。");
                return;
            }

            var objMemo = document.getElementById("txtMemo");
            getLocalStorageMemo();

            document.getElementById("saveMemo").addEventListener("click", function() {
                                                addEventListener
                if (!localStorage) return;

                var objMemo = document.getElementById("txtMemo");
                localStorage.setItem("KeyMemo", objMemo.value);

                alert("ローカルストレージに登録しました。");
                objMemo.value = "";
            }, true);

            document.getElementById("readMemo").addEventListener("click", function() {
                getLocalStorageMemo();
            }, true);

            function getLocalStorageMemo() {
                var strTodo = localStorage.getItem("KeyMemo");
                if (strTodo) {
                    objMemo.value = strTodo;
                }
            }

        })();
// --></script>

Web StorageはCookieと同じく手軽にデータを保存できる便利なAPIです。
Web Strageを利用することで、使い勝手のいいWebページを作成できると思います。
ブラウザの対応状況がマチマチなので、その辺りを考慮して作成する必要がありますが、ぜひ利用してみてはいかがでしょうか。

タグ: ,

TrackBack