pushStateをつかえば、サーバサイドに知られることなくフロントだけでURLを書き換えることができます。
JavaScript
(function(win, doc) { "use strict"; var btnRed = doc.getElementById("red"), btnGreen = doc.getElementById("green"), btnBlue = doc.getElementById("blue"); btnRed.addEventListener("click", function() { history.pushState({color: "red"}, "", "/kimmy/1b0F/red/"); doc.body.style.background = "#EF9A9A"; }, false); btnGreen.addEventListener("click", function() { history.pushState({color: "green"}, "", "/kimmy/1b0F/green/"); doc.body.style.background = "#A5D6A7"; }, false); btnBlue.addEventListener("click", function() { history.pushState({color: "blue"}, "", "/kimmy/1b0F/blue/"); doc.body.style.background = "#81D4FA"; }, false); win.addEventListener("popstate", function(evt) { if (evt.state) { switch (evt.state.color) { case "red": doc.body.style.background = "#EF9A9A"; break; case "green": doc.body.style.background = "#A5D6A7"; break; case "blue": doc.body.style.background = "#81D4FA"; break; } } else { doc.body.style.background = "#ececec"; } }); })(this, document);
DEMO
ただし、実際にURLは用意していないので、
例えば、 http://jsrun.it/kimmy/1b0F/red/ とかに直接アクセスすると404が返ってきてしまいます。リロードも同様です。
実際につかう際にはサーバサイドエンジニアと連携してなんとかしておきましょう。