※不具合などはmokabuu.comでは対応しかねます。自己責任でご参照ください。
セッションを閉じてもデータを保存し続けられるLocalStorage。
今や便利な技術として様々なところで使われております。
上記の画像は皆大好きtwitterがlocalStorageにぶち込んでいたデータの一覧になります。
今では有名なウェブサービスではかなりの頻度で見かける程便利なlocalStorageですが、こいつを使う時にかませてあげたい判定がいくつかあります！
なので今日はそいつについて備忘録っていうことでメモを残したいと思います。
function lsCheck(){
try{
if(typeof localStorage == 'undefined'){
return false;
}else if(window.localStorage){
//detect IE10 and private mode
}
}catch(e){
return false;
}
return true;
}
僕は職業柄IE6などサポートが切れた化石のようなブラウザを対象としたコードを書くことも少なくないため、localStorageを使う時はこんな感じの判定をかませてあげています！
と、言うのもそもそもWebStorageに対応していないブラウザが存在するからって言うのと特殊な仕様でlocalStorageへのアクセスを拒否されることがあるからですッ！
例えばIE6とかの古い化石のようなブラウザでは勿論localStorageなんて技術は使えないわけですが、世の中には一定数古いものを大切に使い続けている人も居ます。そういった方のブラウザでlocalStorageを遠慮なくぶちかますと、そこでエラーが発生してその後のjsが読み込まれないなんて事故に繋がるわけでして。
判定大事です。
次にIE10やプライベートブラウジング中のブラウザへの対策も大切です。こいつらはlocalStorage自体は使える癖にaccess deniedと言う生意気なエラーを吐いて来ます。なのでlocalStorageに対応しているくせにユーザーの一存でlocalStorageの利用を中止しているケースにはtry-catchでしっかりとエラーを掬ってあげる必要があります。
ってな感じで、どれだけ便利なものにも当然落とし穴は存在するのでしっかりと対策をしておきましょう！
ちなみに上記の判定。
localStorageが使える場合にはtrueが変えるのでif(lsCheck()){alert(“hogehoge”);}なんて感じで書いてあげると素敵な動作をすると思います！
最後まで読んでいただきありがとうございます。もしこの記事を気に入って頂けたようであればシェアをお願い致します。非常に励みになります。
Related posts:
【JavaScript】localStorageを利用してセーブ機能擬きを作る〜RPG作成〜
【JavaScript】divにidをふってゲームボーイ的なサムシングを作る① 〜キーボードの値取得編〜
【wordpress】文字をフェードインさせる！【javascript】
【javascript】時間別にリンク先を変える。【情報基礎】
【javascript】【css】犬のメニューバーをお絵描きしました！
【JavaScript】ブラウザ判定でIE11がTrident/7.0を返してくれないことがある！
【JavaScript】ブラウザが最新の技術を利用したAPIに非対応だった時はPolyfill
【PHP】JavaScriptからPHPを呼び出してデータを取得する
【情報基礎】onclickで画像置換する。
(」・ω・)」うー!(/・ω・)/にゃー!encodeを使ってみた。
【css】イメージマップをレスポンシブル化する！【js】
【Node】Object.fromEntries is not a functionにコンパイルを阻まれた話
3 comments to this article
ニャッポ
on 2018/08/09 at 17:53 -
すみません、質問ですが、
if(typeof localStorage == ‘undefined’){
return false;
}else if(window.localStorage){
//detect IE10 and private mode
}
の「else if」は何の意味があるのでしょうか？
mokabuu
on 2018/08/11 at 15:36 -
コメントありがとうございます。
私は元BtoBのエンジニアだったため、お客様からの問い合わせを想定して入れている処理になります。
BtoBのシステムはお客さんの要件(※)に合わせて多額のお金をいただいて購入してもらっているため、動かないということが許されません。
※IE11とEdgeを利用、最大同時アクセスは1000名前後を想定、イントラネットにのみ公開など
ただし、それでもこちらが意図しない環境で利用された場合に動かないことってでてきてしまうのが現実です。
そこで、お作法として、エラーコードを用意して、有事に問い合わせを受けた際に社内のカスタマーサポートセンターの人間が一次回答できるように設計しています。
//detect IE10 and private mode
のところには任意のエラーコードがalertないしは画面上の任意の箇所に表示されるようなコードを書いておき、カスタマーサポートの方が「プラベートモードになっていませんか？IEは11を使っていますか？」など回答できるような仕組みを入れるために有益です。実際にはelse ifの中にたらたら処理を書いていくことになります。
10日に追記いただいたないようもelse ifの中でキャッチすべき内容かと思います(private modeの方で拾うのかなと)。
質問の意図に沿った内容になっているかわかりませんが・・・。
ニャッポ
on 2018/08/10 at 09:19 -
昨日コメントさせて頂きましたが、IE11で検証したところ、インターネットオプションの詳細設定タブ内の「DOMストレージを有効にする」のチェックを外すとlocalStorageは使用出来なくなります。
が、上記判定では、「true」が返却されてしまいます。
問題あるかと思いますので、ご確認お願いします。