【JavaScript/jQuery】localStorageがそもそも使用可能か判定する

Contents

1. 状況
2. localStorage
3. ダミーデータで検証
4. typeof
5. localStorageが使えない状況とは
6. 参照

状況

localStorageはブラウザ上にデータを保存するもので、保存期間の制限は無い。localStorageにデータを保存する場合に、そもそも使用可能な状態なのかを確認したい。

localStorage

localStorageの保存にはsetItem、読み込むにはgetItem、削除する場合はremoveItemを使用する。

ダミーデータで検証

どうするか。実際に使える状態ならsetItem、getItem等が動くので、ダミーを入れてみて、動いていればtrueを返してやるという感じ。falseの場合にalertを出しても良い。

const localStorageCheck = () => {
  if(typeof localStorage !== 'undefined'){
    try{
      setLocalStorage('dummy_data', '1');
      if(getLocalStorage('dummy_data') === '1'){
        removeLocalStorage('dummy_data');
        return true;
      }else{
        return false;
      }
    } catch(e){
      return false;
    }
  }else{
    return false;
  }
};

typeof

typeof演算子は、型を返す。typeof + 対象の変数、値(operand)という風に書く。localStorageはグローバル変数。

console.log(typeof localStorage);

localStorageが使えない状況とは

ブラウザが対応してないとか、cookieを切っているとかいう場合に使えないことがある。ブラウザのバージョンや設定を確認して直してやる。chromeの場合には、設定でセキュリティとプライバシーから、cookieの設定を変更する。そもそもcookieを切っている場合、localStorage以前の問題が出ていることもある(サイト自体が閲覧不可とか)。そちらを修正する過程で、localStorageが使えない状況が改善される可能性もある。

以上