Web Storage API を使う際は Cookie 無効環境も考慮しよう

投稿: 2018年2月27日

東武鉄道のサイト(railway.tobu.co.jp)にアクセスしたら、ページレイアウトが大きく崩れていてびっくり。

なんでこんなことになっているか調べてみたところ、 JavaScript 経由で CSS ファイルを読み込もうとしている部分でエラーが発生していて、必要なスタイルが当たっていない状態でした。

当該ファイル（devicecChange.js）(railway.tobu.co.jp)でエラーになっている部分のソースはこんな感じです。

if (localStorage && localStorage.getItem('devicec-cange')==='sp'){
  spCange();
  spCss();
}else if(localStorage && localStorage.getItem('devicec-cange')==='pc'){
  pcCange();
}else{
  if (navigator.userAgent.search(/iPhone|iPod|Android.+Mobile/)!==-1){
    spCange();
    spCss();
  }else {
    pcCange();
  }
}

これはあかんやつですね。ブラウザの設定で Cookie を無効にしている状態で localStorage や sessionStorage にアクセスすると SecurityError が発生しますが、その対策がされていません。

この対策は簡単で、例外をキャッチすればいいだけです。

let myLocalStorage;
let mySessionStorage;
try {
  myLocalStorage = localStorage;
  mySessionStorage = sessionStorage;
} catch(e) {
  // Web Storage を無効にしている場合
}

if (myLocalStorage && myLocalStorage.getItem('devicec-cange') === 'sp'){
（以下省略）

非常に単純なことなのですが、サイト制作の関係者がたまたま全員 Cookie を有効にしている人だったりすると、こういうケースが見過ごされてしまうのでしょうね。

ECサイトやSNSサービスなどで、ログインすることが必須のサイトなら、訪問者が Cookie を有効にしていること前提の作りでもいいかもしれませんが、そうでない場合は Cookie がブロックされる可能性を考慮する必要があるでしょう。