Web Storage を用いたユーザーデータの操作 - Firefox OS アプリプログラミング #JavaScript

概要

アプリケーションを作成していく上で、ユーザーID や各種設定といった小さなデータを、永続的または非永続的に保持しておく必要がしばしば発生します。このような要件を、Firefox OS では、Web Storage を用いて実現することができます。

Web Storage は、

sessionStorage
localStorage

の二つのオブジェクトとして実装されています。前者は、アプリが終了するまで、後者はアプリが終了しても永続的にデータを保持することができます。Web Storage には同一生成元ポリシーが適用され、異なるアプリ間でデータを共有することはできません、たぶん（未確認）

sessionStorage と localStorage には、どちらも以下のほぼ同様なメソッドが用意されています。

getItem('key'); // key キーの値を取得
setItem('key', value); // key キーに value 値をセット
removeItem('key') // キー・値の組を削除
clear(); // 全てのキー・値の組を削除

実装

ユーザーにユーザー名を入力してもらい、ユーザー名を保存しておくようなアプリを実装してみます。manifest.webapp は適当に作ります。Web Storage を使うための特別な権限設定は必要ありません。

このテストアプリでは、ユーザー名が設定されていなければ、ユーザー名の入力ダイアログを出力し、ユーザー名を入力してもらいます。ユーザー名が既に設定されていれば、そのユーザー名を出力し、ユーザー名の設定を削除します。普通こんなケースは無いでしょうが、まぁテストなので。

これを実装したのが、以下の HTML ファイルです。

web_storage.html

<html>
<head>
    <meta charset="utf-8">
    <title>Web Storage Test Page</title>
</head>
<body>
<script>
    const USER_NAME_KEY = 'user_name_key';

    var userName = localStorage.getItem(USER_NAME_KEY);
    if (userName !== null) {
        alert(userName);
        // delete user name for localStorage test.
        localStorage.removeItem(USER_NAME_KEY);
    } else {
        var newUserName = prompt('Please Enter Username', '');
        // set use name to localStorage.
        localStorage.setItem(USER_NAME_KEY, newUserName);
    }
</script>
</body>
</html>

今回は localStorage を用いましたが、ここを sessionStorage に読み替えても同様に動きます。

スクリーンショット。