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

HTML5のWeb 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() });