Webアプリケーションで、ウィンドウ毎の情報共有方法としてCookieを使っていたのですが、Cookieの容量制限である上限4kBが気になっていたのと、毎回のアクセスにCookieが付くので送受信量的にも消費する方向となります。最近はIE8以降となっているのでCookieでやり取りしていた情報をJavaScriptのlocalStorageでやってみることにしました。これだと容量も5MBはあり、ローカルだけでの出し入れで毎回のHTTPアクセス量も減ります。
うちの環境でlocalStorageやsessionStorageにしてみてひとつ困った点がありました。それはMicrosoft Edgeだけで動作が異なるということです。例えば以下のようなページで
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <script> function gotest(){ var w = window.open("./2.html"); localStorage.setItem("t", (new Date()).getTime()); w.location.href = "./2.html"; } </script> </head> <body> <a href="javascript: gotest()">テスト実行</a> </body> </html>
window.openで他のページを開いてから、localStorageを使って変数を代入、その後リロードしたとします。相手先のページは
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> </head> <body> <script> document.write((new Date()).getTime() - parseInt(localStorage.getItem("t"))); </script> </body> </html>
と、なっており、期待する動作としてはopen元で入れたlocalStorage.setItemの値が、w.location.hrefの実行でopen先に反映されるというものです。ところがEdgeはw.location.hrefを実行しても直前のlocalStorage.setItemがopen先で反映されません。
確認したところ
- Google Chrome 71.0
- Firefox 64.0
- Internet Explorer 11
では、思っているように、localStorage.setItemの値がlocation.hrefで更新されていますが、
- Microsoft Edge 44.17763.1.0
だけ更新されませんでした。
呼び出し元のページで
<script> function gotest(){ localStorage.setItem('t', (new Date()).getTime()); var w = window.open('./2.html'); w.location.href = "./2.html"; } </script>
と、localStorage.setItemをwindow.openの前にもってくればEdgeでも期待した動きをします。location.hrefでの再読込が意味なしになりますが。まあEdgeでのWeb Storageの扱いに関する仕様なんでしょうけど、なぜEdgeだけ動作が異なるのか。
最近はブラウザ毎のスクリプト挙動の違いはほとんど気にしなくなっていたのですが、まだあるんですね。将来EdgeをChromiumベースに変更するとの発表がありましたけど、JavaScriptエンジンはどうなるんでしょうか。