userData

userData は、旧来の Internet Explorer で使用出来るローカルのストレージです。 ローカルの記憶領域というと今では Web Storage がありますが、 しばしばその代替として使用されています。

何が凄いのかというと、これが IE5（1999年）から実装されている点で、 Web黎明期を少し抜けたあたりで Web Storage に近しい物が既に存在していたという事になります。 一方の DOM Storage はIE8からサポートされている為あまり出番はないかもしれませんが、 いまだ息が絶えないIE6-7対応で活躍する事ができます。

Cookie との比較

Web Storage の代替として広く使われている Cookie と比較すると、容量と範囲で大きな差があります。

• 容量
  • userData: およそ1MB
  • Cookie: およそ5KB
• 範囲
  • userData: 同じディレクトリ内のみ
  • Cookie: フレキシブルに設定可能

容量は、5MBほど利用できる Web Storage には及びませんが、Cookie と比較するとかなり大きいです。 その半面、データを共有出来る範囲が同じディレクトリ内に限られてしまいます。 互いに一長一短なので、場面によってい使い分けたいところです。

userData の使い方

userData は IE独自の behavior でスタイル指定をして使います。 下の例では input 要素にしていますが、恐らくどの要素でも使えると思います。

<input type="hidden" id="my-storage" style="behavior:url(#default#userData)">
<script>
    var myStorage = document.getElementById("my-storage");
    myStorage.load("myStorageData");
</script>

#default#userData を behavior で指定した要素は userData を使用する為のメソッドが使えるようになります。

• load(name): ストレージからデータをロードする
• save(name): ストレージにデータを保存する
• getAttribute(key): 値を取得する
• setAttribute(key, value): 値をセットする
• removeAttribute(key): 値を削除する

ストレージ名を “myStorageData” とし、適当な値を設定してみる例です。 ロードとセーブが都度必要になる以外は、別段注意すべき所はなさそうですね。

myStorage.load("myStorageData");
myStorage.setAttribute("name", "john");
myStorage.setAttribute("email", "john@example.com");
myStorage.save("myStorageData");

ストレージに使用する要素を動的に生成する事もできますが、DOMに追加されていないと働かないので注意が必要です。 動的生成の際には addBehavior メソッドが便利です。

var myStorage = document.createElement("input");
myStorage.setAttribute("type", "hidden");
myStorage.addBehavior("#default#userData");
document.body.appendChild(myStorage);
myStorage.load("myStorageData");

localStorage の polyfill を userData で書いてみる

少し長くなりますが、IE7以下向けの localStorage の代替処理を書いてみます。 先述の通り、同じディレクトリ内でしかデータを共有する事は出来ません。

(function(){
    // Detect supports
    if("localStorage" in window || ! ("addBehavior" in document.body)){
        return;
    }

    // Create element for strage
    var createStorage = function(name){
        var input = document.createElement("input");
        document.getElementsByTagName("head")[0].appendChild(input);
        input.setAttribute("type", "hidden");
        input.addBehavior("#default#userData");
        input.load(name);
        input._commit = function(){
            this.save(name);
        };
        return input;
    };

    // Storage and index object
    var storage = createStorage("altLocalStorage");
    var index = createStorage("altLocalStorageKeys");

    // Fetures for index
    index._get = function(){
        var keys = this.getAttribute("keys") || "";
        if(keys){ return keys.split(","); }
        return [];
    };
    index._indexOf = function(key, keys){
        var i=0; keys = keys || this._get();
        for(; i<keys.length; i++){
            if(keys[i] === key){ return i; }
        }
        return -1;
    };
    index._set = function(keys){
        this.setAttribute("keys", keys.join(","));
        this._commit();
    };

    // API
    window.localStorage = {
        setItem: function(key, value){
            var keys;
            if(index._indexOf(key) < 0){
                keys = index._get();
                keys.push(key);
                index._set(keys);
            }
            storage.setAttribute(key, value);
            storage._commit();
        },
        getItem: function(key){
            return storage.getAttribute(key);
        },
        removeItem: function(key){
            var keys, i;
            keys = index._get(),
            i = index._indexOf(key, keys);
            if(i >= 0){
                keys.splice(i, 1);
                index._set(keys);
            }
            storage.removeAttribute(key);
            storage._commit();
        },
        clear: function(){
            var i = 0, keys = index._get();
            for(; i<keys.length; i++){
                storage.removeAttribute(keys[i]);
            }
            storage._commit();
            index._set([]);
        }
    };
}());

保存されたデータを列挙する手段が見つからなかった為、キーを保存するストレージを別に作っています。 clear メソッドを実装しなければそれは必要ないので、半分以下のコード量に収まると思います。

余談ですが、IEの開発者ツールでモードを Internet Exlorer 7 にしても “localStorage” は実装されてしまっていますので、 上のコードはネイティブのIE7でないと検証する事が出来ません。

参考資料

• userData Behavior (A, ABBR, ACRONYM, …)
• DOM Storage – DOM | MDN
• Web Storage

追記

2014/01/23

コードの誤りを修正（urlの欠如）

オフラインWebアプリケーション

旧来のいわゆる「Webアプリケーション」は、Webと繋がっていること、 つまりネットワークがオンラインになっている状態で利用する事が前提でしたが、 昨今では applicationCache や Web Storage などを使用してオフラインでも動作する オフラインWebアプリケーションの構築も可能になってきています。

オフライン / オンラインの判定

まずはオンライン状態なのかオフライン状態なのかの確認ですが、 モダンな環境ならば navigator.onLine をチェックする事で出来る様です。

if(navigator.onLine){
    // online
} else {
    // offline
}

ただ、この onLine は実装されていない環境があったり、 元々このプロパティはブラウザの「オフライン作業」のチェックを確認する物だったようで、 いくつかの環境では期待する挙動をしません。

そこで、実際にネットワークにつながっていて目的の場所にアクセスできるかどうかを確認する為に 次のようなコードを書いてみます。

var checkOnline = function(){
    var xhr, online = true;
    xhr = new XMLHttpRequest();
    xhr.open("HEAD", "/", false);
    try { xhr.send(); }
    catch(e){ online = false; }
    return online;
};

checkOnline(); // ネットワークに繋がっていれば true

XMLHttpRequest でWebサイトのルートのヘッダを取得して、失敗した場合に「オフラインである」とみなしています。

期待する navigator.onLine をサポートしているかどうかを判別するのが難しかった為、 polyfill ではなく別名の関数として定義してみました。 （上のコードでは XMLHttpRequest を素のまま使っていますが、 古いIE等のXHRをサポートしない環境にはその為の対応が必要です。）

また、online イベントのようにオンライン状態が変更された時に処理を行いたい場合は、 これを定期的に監視してみます。

var onOnlineStateChange = function(callback, interval){
    interval = interval || 8000;
    return setInterval(function(){
        var online = checkOnline();
        if(window.isOnline !== online){
            callback(online);
        }
        window.isOnline = online;
    }, interval);
};

var timer = onOnlineStateChange(function(online){
    console.log( online ? "オンラインです" : "オフラインです" );
});

8秒毎にチェックを行い、変更された場合に callback を実行します。 window を使ってグローバルを汚していますので注意が必要です。 また、きちんとイベントを発火させたい場合はもう少し長いコードになるでしょう。

オフラインWebアプリケーションをサポートする技術

applicationCache

applicationCache は、Webコンテンツのローカルキャッシュをコントロールする事が出来る機能で、 キャッシュマニフェストファイル（*.appcache）を用意して、HTML要素の manifest 属性に記載する事で使えるようになります。

<html manifest="myapp.appcache">

大まかな処理の流れとしては、ブラウザが myapp.appcache を読み込み、その中で指定されているファイルをローカルに保持し、 それらのファイルについてはネットワークにアクセスせずにローカルのキャッシュを使用するようになります。 つまりオフラインの状態でWebコンテンツが利用出来る様になるわけです。

ファイルの更新については少し注意が必要で、 キャッシュされたあとでリモートのファイルを更新しても、どこふく風でローカルのファイルを見続けてしまいます。

更新した事を通知する為には、 myapp.appcache の内容を更新する必要があります。 コメントで日付やバージョン等を記述しておくと更新を通知出来て都合がよさそうです。

CACHE MANIFEST
# version 2013-12-14 12:34
index.html
js/main.js
css/style.css

NETWORK:
*

マニフェストファイルの記法や注意事項などはこちらで。

• アプリケーションキャッシュの使用 – HTML | MDN

Web Storage

Web Storage はブラウザから使用できるローカルのデータ保存領域で、 sessionStorage / localStorage として実装されています。 Cookie の様な物ですが利用可能な容量ははるかに大きく、モダンなデスクトップブラウザなら概ね 5M 程使う事ができます。 オフラインの場合にローカルに編集内容を保持しておいてオンラインになったらサーバに送って保存する、 といった使い方が期待されます。

sessionStorgae と localStorage はデータを保持する期間が異なる以外、使い方などはほぼ一緒です。

• sessionStorage : タブ（あるいはウィンドウ）内のみで有効
• localStorage : 永続的に有効

オフラインWebアプリケーションとしては localStorage が便利そうですね。 データの保存・取り出しは setItem / getItem を呼び出すだけの簡単設計です。

localStorage.setItem("foo", "bar");
localStorage.getItem("foo"); // "bar"

使い方・仕様などの詳細はこちらから。

• DOM Storage – DOM | MDN
• Web Storage

参考資料

• Online and offline events | MDN
• アプリケーションキャッシュの使用 – HTML | MDN
• DOM Storage – DOM | MDN
• Web Storage