URLにデータを保存させる方法

さっきの日記(「今、何時？」を改良 - 今日覚えたこと)によって、今、何時？はパーマリンクを持つようになった。これについてもうちょっと詳しく。

「今、何時？」が持つようになったパーマリンクは、例えば以下のようなURLだ。

"#" の後ろにデータが含まれている。

データというか、パラメータというか。まあ呼び方は何でも良くて、いずれにしてもURLの中に動的な情報を持っている。

一般に、そういうことをやるときは "?" を使うのが有名だと思う。例えばGoogleの検索結果ページのURLとか、それ以外にもあらゆる場面でこの手法は使われている。

"?" を使ってパラメータをURLに含めたとき、そのパラメータはhttpリクエストに乗ってブラウザからWebサーバへ送られる。そしてWebサーバがこのパラメータを使ってページを作成し、ブラウザへ返す。当たり前だよね。

"#" はどうか。このパラメータはサーバには送られない。JavaScriptで

location.hash

と書くと参照できるが、サーバには送られないのだ(サーバへは、その直前までのURLだけが送られる)。

なぜか。

<h1><a name="hoge">ほげほげ</a></h1>
<p>ほげほげ。ほげ。ほげほげほげほげ。ほげほげ。</p>

<h1><a name="fuga">ふがふが</a></h1>
<p>ふが。ふがふがふが。ふがふが。ふが。ふがふがふがふがふがふが。</p>

htmlでこんな風に書くことがある。a要素のname="hoge"の部分。こうしてhtml内の特定の位置に名前を付けておくと、

<a href="#hoge">リンク</a>

こんな感じでリンクが貼れるでしょ。これのこと。つまり「ページ内リンク」などと呼ばれることがあるアレのことだ。

ページ内のリンクだから、そのデータをWebサーバには送らない。ブラウザだけで処理できるわけだ。

例えば最近はGmailでも使われるようになった。画面をリロードせずにアドレスバーを書き換えるにはコレしか無いからね。