読者です 読者をやめる 読者になる 読者になる

kurukuru-papaのブログ

主に、ソフトウェア開発に関連したメモを書き溜めたいと思います。

HTML5のWeb Storageを使ってみました

Webアプリ

HTML5Web Storage機能を使ってみました。

Web Storageには、sessionStorage, localStorageの2種類が用意されていて、sessionStorageはセッション単位でデータを保持し(ウインドウやタブを開いている間だけデータ保持。閉じたらデータが消える)、localStorageは永続的にデータを保持します。シンプルなメソッドで操作でき、sessionStorageもlocalStorageも同じメソッドが用意されていて、使いやすかったです。

Web Storageは、各種ブラウザの対応も普及しているようですね。概ね、IE8以降、Firefox3.6以降、Chrome8以降、Safari5以降で使えそうです。

では、作成してみたサンプルプログラムを説明します。

画面イメージ

作成したプログラムをブラウザで表示した画面イメージです。sessionStorageとlocalStorageで、入力項目の保存、再表示、1件削除、全件削除を行えるようにしました。

プログラム(画面レイアウト)

HTMLです。Bootstrapを使っています。

<h4>Session Storage</h4>
<input id="sessionText" type="text"><input id="sessionTextDelete" type="button" value="削除" class="btn btn-mini"><br>
<textarea id="sessionTextarea" rows="2"></textarea><input id="sessionTextareaDelete" type="button" value="削除" class="btn btn-mini"><br>
<input id="sessionSave" type="button" value="保存" class="btn">
<input id="sessionLoad" type="button" value="再表示" class="btn">
<input id="sessionClear" type="button" value="クリア" class="btn">

<h4>Local Storage</h4>
<input id="localText" type="text"><input id="localTextDelete" type="button" value="削除" class="btn btn-mini"><br>
<textarea id="localTextarea" rows="2"></textarea><input id="localTextareaDelete" type="button" value="削除" class="btn btn-mini"><br>
<input id="localSave" type="button" value="保存" class="btn">
<input id="localLoad" type="button" value="再表示" class="btn">
<input id="localClear" type="button" value="クリア" class="btn">

プログラム(Web Storage使用可否判断)

sessionStorage, localStorageを見ることで、使用可否を判断できるようです。

        if (window.sessionStorage) {
            console.log("sessionStorage使用可能");
        } else {
            console.log("sessionStorage使用不可");
        }
        if (window.localStorage) {
            console.log("localStorage使用可能");
        } else {
            console.log("localStorage使用不可");
        }

プログラム(データ保存)

画面上の「保存」ボタンをクリックした時に動作する処理です。sessionStorage, localStorageのsetItemメソッドを使って、キー名と値を渡すことで、データ保存できました。

    function saveSessionItems() {
        sessionStorage.setItem("text", $("#sessionText").val());
        sessionStorage.setItem("textarea", $("#sessionTextarea").val());
        console.log("Saved session items.");
    }
    function saveLocalItems() {
        localStorage.setItem("text", $("#localText").val());
        localStorage.setItem("textarea", $("#localTextarea").val());
        console.log("Saved local items.");
    }
    $("#sessionSave").click(function(){ saveSessionItems() });
    $("#localLoad").click(function(){ loadLocalItems() });

プログラム(データ読み込み)

画面上の「再表示」ボタンをクリックした時、または初期表示時に動作する処理です。sessionStorage, localStorageのgetItemメソッドを使って、キー名を渡すことで、データ取得できました。

    function loadSessionItems() {
        $("#sessionText").val(sessionStorage.getItem("text"));
        $("#sessionTextarea").val(sessionStorage.getItem("textarea"));
        console.log(window.sessionStorage);
        console.log("Loaded session items.");
    }
    function loadLocalItems() {
        $("#localText").val(localStorage.getItem("text"));
        $("#localTextarea").val(localStorage.getItem("textarea"));
        console.log(window.localStorage);
        console.log("Loaded local items.");
    }
    $("#sessionLoad").click(function(){ loadSessionItems() });
    $("#localLoad").click(function(){ loadLocalItems() });

プログラム(データ1件削除)

画面上の「削除」ボタンをクリックした時に動作する処理です。sessionStorage, localStorageのremoveItemメソッドを使って、キー名を渡すことで、データ削除できました。データ削除後は、入力項目を再表示しています。

    function removeSessionText() {
        sessionStorage.removeItem("text");
        loadSessionItems();
    }
    function removeSessionTextarea() {
        sessionStorage.removeItem("textarea");
        loadSessionItems();
    }
    function removeLocalText() {
        localStorage.removeItem("text");
        loadLocalItems();
    }
    function removeLocalTextarea() {
        localStorage.removeItem("textarea");
        loadLocalItems();
    }
    $("#sessionTextDelete").click(function(){ removeSessionText(); });
    $("#sessionTextareaDelete").click(function(){ removeSessionTextarea(); });
    $("#localTextDelete").click(function(){ removeLocalText(); });
    $("#localTextareaDelete").click(function(){ removeLocalTextarea(); });

プログラム(データ全件削除)

画面上の「クリア」ボタンをクリックした時に動作する処理です。sessionStorage, localStorageのclearメソッドを呼ぶことで、sessionStorageまたはlocalStorageの全データ削除できました。データ削除後は、入力項目を再表示しています。

    function clearSession() {
        sessionStorage.clear();
        loadSessionItems();
    }
    function clearLocal() {
        localStorage.clear();
        loadLocalItems();
    }
    $("#sessionClear").click(function(){ clearSession() });
    $("#localClear").click(function(){ clearLocal() });

補足

Web Storageのデータは、オリジンと呼ばれる単位で保存されるのですね。オリジンとは、プロトコル、ドメイン、ポートの組み合わせのことをいいます。

今回作成したプログラムは、jsdo.it上で作成しました。次のリンクから、参照可能です。興味が湧いた方は、Forkして、色々動かしてみて下さい。

動作環境

対象ブラウザ

  • IE 8 以降
  • Firefox 3.6 以降
  • Chrome 8 以降
  • Safari 5 以降
  • ※動作確認したブラウザは以下のみです。

動作確認済みブラウザ

利用ライブラリ

  • jQuery 1.8.0
  • Bootstrap 2.1.0