要注意!CCleanerを使ってIEのCookieを削除するとlocalStorageが使えなくなるよ

HTML5が大好きな @kadoppe です、こんにちは!

今日は、localStorageを使ったWebサイトを制作している時に、僕が盛大にハマった問題について書いてみようと思います。

ちなみに、僕の環境はこんな感じです。

  • Windows 8
  • Internet Explorer 10 (10.0.9200.16540)
  • CCleaner v4.01.4093

発生した問題 – localStorageにアクセスできない

例えば、IE10で上記のJavaScriptを読み込むと、以下の様なエラーメッセージがコンソールに出力されるようになってしまいました。

英語版だと以下の様なエラーメッセージ。

どうやら、localStorage変数を参照したタイミングで例外が発生している模様。

  • IE10でlocalStorageは利用可能
  • localStorageのデモページは正しく動作する
  • 同じサイトにアクセスする全ユーザに問題が発生しているわけではない
  • それぞれのユーザにおいても、問題が発生する時期とそうでない時期がある

ざっとリストアップした手がかりはこんな感じ。とりあえず原因について詳しく調べて見ることにしました。

原因 – CCleaner

結論から書くと、localStorageにアクセスできなくなったのは、「CCleanerを使ってIEのCookieを削除したこと」が原因です。

CCleanerはWindowsを使っていると自然に溜まっていくゴミファイルをリストアップして、一括削除するための便利ツール。ブラウザの履歴データやCookieの削除も行えるので、便利に使っておりました。

さて、原因究明までの流れについてちょっとまとめてみようと思います。

ネットで色々調べていたところ、以下のページを見つけて、まず、localStorageに再びアクセスできるようにするための方法がわかりました。

localStorage The system cannot find the path specified. | Greg Kai on the Fly

方法としては、IEのインターネットオプションから「全般タブ→閲覧の履歴→削除→”お気に入りWebサイトデータを保持する”のチェックを外す→削除」という手順で、「クッキーとWebサイトデータ」を削除するというシンプルなもの。

これでめでたく問題は発生しなくなったのですが、「どうしてlocalStorageにアクセスできなくなったのか?」という疑問が残ります。

少し考えてみて、「クッキーとWebサイトデータ」を削除すれば問題が解決するということから、「クッキーとWebサイトデータ」が何らかの原因で壊れてしまったのではないかと推測出来ました。

IEが想定していない方法でCookieが編集される可能性を頭のなかでリストアップ。

すると、エラー報告を受けた直後にCCleanerをつかってIEのCookieを削除していたことを思い出しました。検証のために一度クリアな状態に戻そうと思ったんでしょうね。

  1. インターネットオプションから「クッキーとWebサイトデータ」を削除
  2. 問題のページにアクセスし、正常に動作することを確認
  3. IEを終了
  4. CCleanerを起動し、Internet Explorerの「Cookies」にチェックをいれ、「Run Cleaner」を実行
  5. IEを起動
  6. 問題のページにアクセスし、エラーメッセージがコンソールに出力されることを確認

こんな感じで、確実に問題を再現できるようになりました。

対策

今回発生した問題に対して、どんな対策ができるのかいくつか考えてみました。少しでも参考になれば。

対策1 – typeofを使う

localStorageにアクセスできない場合、typeof(localStorage)"unknown"という値を返すようなので、以下のようにif文で確認処理を記述すれば、例外が発生しなくなります。

対策2 – try-catch文を使う

もしくは、try-catch文をつかって発生した例外を捕捉すれば、元の処理の流れに復帰できるようになります。

対策3 – CCleanerを使わない

そもそも、ブラウザの履歴削除にCCleanerを使わないようにしましょう。

ブラウザの各種履歴データを削除する機能は、各ブラウザにも備えられているはずですし、CCleanerよりもそっちのほうが信頼度が高いはず。履歴データを削除するときは、必ずブラウザの機能を使いましょう。

さすがにユーザにまで「CCleanerを使わないでください」とお願いするのは難しいですが、制作側のメンバーが意識して使わないようにするだけでも、今回のようなエラーに振り回されることが少なくなるかと思います。

まとめ

Windowsの定番ツールとしてある程度有名な「CCleaner」ですが、こんな罠があるとは。

よくよく考えてみると、他のソフトウェアが内部的に利用しているファイルを外側から削除しちゃっているわけで、それなりのリスクはありますよね。

便利なツールですが、ご利用は自己責任で。

今回の僕の悩みがどこかの誰かの参考になれば。
それではー!

  • 行止千万端

    助かりました デイリーモーションとYahoo!ブックマークで Error: QUOTA_EXCEEDED_ERR: DOM Exception 22 となってまともに動作しなかのが見事になおりました ありがとうございました