【IE】LocalStorageの挙動がおかしい時の対処法

プログラミングのKnow-howを共有しましょう

【IE】LocalStorageの挙動がおかしい時の対処法

スポンサーリンク

localStorageを使用するWebアプリやサイトの開発時に、IEで挙動がおかしい場合の対処法を説明していきます。

localStorageを「getItem」、「setItem」を使って操作している場合、IEでは以下のような現象が起こる可能性があります。以下の環境で遭遇しました。

  • Windows8.1、10
  • IE11(IE10以前では未検証)

まずは現象について述べて、それから対処法を説明します。

現象

更新されたはずのlocalStorageの内容がしっかり反映されていることを確認したにも関わらず、たまに過去のlocalStorageの内容が参照される。

対処法

localStoragepolyfillを使用します。

polyfillとは

ポリフィルとは、最近の機能をサポートしていない古いブラウザーで、その機能を使えるようにするためのコードです。大抵はウェブ上の JavaScript です。
例えば、ポリフィルは Microsoft Internet Explorer 7 で Silverlight プラグインを使用して HTML Canvas 要素の機能を疑似的に実現したり、CSS の rem 単位や text-shadow などを疑似的に実現したりできます。

【MDNwebDocsより】

機能を補完するだけでなく、存在するバグを対処するために用いることもあるみたいですね。

https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills

この先にある【localStorage】のpolyfillを活用しましょう。
種類はいくつかあります。一番上の「mortzdk/localStorage」を私は選びましたが、問題なく動作しています。

外部スクリプトとして読み込み

以下のように、headタグに埋め込みましょう。

これで上記の現象は起きなくなります。