html5 の pushState が 動かなかったのと、jQuery と html5 data と pushState。

原因：ローカルにおいてあるファイル(file://~/index.html) を開いていたから。
Windows環境ではダメでした。

<script>

 var url = "http://localhost/hoge";

 history.pushState(null,null,url);

</script> 

とかやってもダメでした。

単純に『pushState file://』で検索しても出てこない。
俗に言う、凡ミス（てへぺろ）の領域なんだろうけど、
そんな事で５分間とか時間を無駄にする人が二度と現れない事を祈ります。
適当なサーバに置けば、ちゃんと動きました。

html5 では、data-hoge-moge みたいな、オレオレアトリビュートで、
ほーむぺーじに情報を付け加えられるそうです。
jQueryMobile とかで使われているやつですね。Microdata とかと繋がっていくとかどうとか。
Microdata については、

HTML5の新要素「data要素」に繋がる Microdataのプロパティについて

この記事が詳しいです。
RSSとかXMLとかhtmlって、データベースの行とか、データベースのテーブルとしても使えたらいいよね？
みたいなのを、ずっと色々やってて、うまくいかなかったけど、
なんかやっとうまくいくんじゃね？みたいな感じなのかなーと、
勝手に見てましたけど、違ったらごめんなさい。
検索エンジンに対してのページ解析とかにも関っていったり、
SocialGraph っつか、まぁ、SNS とか、そういうのにも関ってくるよーみたいなものだそうですよ。
この辺について変なことを書くと、森ボーイという人からツッコミが入るので、さらっとふわっとしか書きません。

で、この data要素data属性使って pushState いじくりゃいいんじゃね？みたいなのを書きました。
まぁ、きっと、色んな人が既に書いてるものですけど。多分。めげずに Fight！

<script>
    $(document).ready(function(){
        $("nav").on("click","li",functioni(){
            var data = $(this).data("hogeHuga"); *
            var url  = "";
            for(var i in data){
                url += "/" + encodeURIComponent(data[i].replace(/\"|\'|\(|\)/gi,""));
            }
            history.pushState(null,null,url); // "/hirama/hokkaido"になるとおもう
        });
    });
</script>

<nav>
    <ul>
        <li data-hoge-huga='{"name":"hirama","state":"hokkaido"}'>おれっちひらまっち</li>
    </ul>
</nav>
こんな感じになりました。
ｊQuery の on を使ってみましたよ！うほ。
jQueryの on off は、この記事がわかりやすかったです。
赤で * 書いてあるところが大事みたいです。

html 上は、 data-hoge-huga って書いてあるんだけど、
この中身を取り出すときは、 hogeHuga って、キャメルクラッチ キャメルケースになるそうです。
（キャメルクラッチについては、ここが詳しいです。）
jQuery でデータを呼び出す時は、この例のような書き方をすると、object 型になります。

[追記:

　<data hoge='1234'>ほげー</data> ← data要素

　<span data-hoge='1234'>ほげー</span> ←data属性

　というそうです。森ボーイこと forestk さんご指摘ありがとうございます！

　そうだよね。要素っつったら、<a></a> だもんね。エレメント。

　属性つったら、 href='' だもんね。アトリビュート。

　jQuery で要素を取るんだったら、普通に $("data").attr("hoge") で取るのか？おう？あれ？

]

この辺の挙動については、

意外と要注意 HTML5データ属性とjQuery Data APIの関係まとめ

ここに詳しく載っています。

で、for in でデータを基にURLつくって、pushState にホイと渡す感じですね。
渡すだけだと、ただブラウザのURLが変わるだけなので、
このデータに基づいて、ajax かなんかでデータのやり取りをして、なんかする感じ。
そこらへんは、

AjaxでもURLを更新して履歴を作れるHTML5のpushState試してみた

この記事が良くわかります。
応用というか、canvas ていう線を書いたりするやつも交えて使っているのが、

history.pushState、history.replaceState

この記事です。
うむ。うむうむ。

ええと、こんな感じでした。これで何をするのかは、わかりません。