Hello, hash!

前のページ(Hello, cookie!)へ

続いてページを跨いだ情報のやりとりの手法を一つ紹介します。 location.hash です。 location.hash とはウェブページのURLの末尾についた、 # 以降の情報のことです。
URL 内にデータを保持するという意味では Query String と似ています。 実際のところ、 CGI では Query String を、 JavaScript では location.hash を、といった使い分けがされていますが、 それそのものにはあまり違いはありません。 ライブラリの対応次第で使うものを選ぶべきではないでしょうか。
ちなみにあくまでも URL に付加する情報であるので、 現在の状態を location.hash にキーとして含ませることにより AJAX なウェブアプリの遷移状態を bookmark に残すことが出来ます。 cookie その他の情報と組み合わせると良いと思います。

本段のサンプルは Change Diary 2 です。 location.hash によるやりとりの部分だけ解説します。

    function load(key){
        var srcs = document.location.hash.split('#');
        var patLoad = /(.*)=(.*)/;
        var parser = new DOMParser();
        parser.async = false;
        for(var i = 0; i < srcs.length; i++){
            var matLoad = srcs[i].match(patLoad);
            if(matLoad &&
               key == decodeURIComponent(matLoad[1])){
                var xml = decodeURIComponent(matLoad[2]);
                return parser.parseFromString(xml,'text/xml');
            }
        }
        return parser.parseFromString('<error>1</error>','text/xml');
    };
    function save(key,dom){
        var xml = (new window.XMLSerializer()).serializeToString(dom);
        return '#'+encodeURIComponent(key)+
            '='+encodeURIComponent(xml);
    };
    

以上が load, save 関数です。 load は document.location.hash から # で切って値を取り出しました。 location.hash が返す値は先頭に # が付くため セパレータにも # を使いました。 同様に鍵と値は = で区切っています。 これらは encodeURIComponent でエンコードした後の文字列に 登場しない文字ならば任意のものが使えます。 そして得られた値を DOM へと変換して返しています。 逆に save はまず DOM から XML へと変換して それを encodeURIComponent した後、鍵と値の組にして保存します。
データ形式は他にも色々なものが考えられますが、 ここでは標準ライブラリの充実している DOM を使いました。 JSON 形式で保存するのも有力な選択肢です。

In Deep

location.hash に関する情報を挙げておきます。

firefoxのlocation.hashには1MB以上保存できる

私は試していませんが、1MB相当のデータが渡せるようです。 cookie が 4kB しか保存できないことを考えると驚異的です。

Cross Domain XMLHttpRequest using an IFrame Proxy

dojo という JavaScript ライブラリでは 二つの iframe 間で location.hash を使ってデータの受渡しをして クロスドメインな XMLHttpRequest を実現したのだそうです。 クロスドメイン先にデータ渡し用の html を用意しなければならない分、 GM_xmlhttpRequest より利便性は劣ります(ただし、より安全です)が、 なかなか強烈なハックであると思います。

前のページ(Hello, cookie!)へ