Web Storageの取り扱いメモ

13675 ワード
Storage JavaScript フロントエンド JavaScript テキストリンク

業務でsessionStorageを取り扱うことがあったのでメモ。
ユーザーがStorageを使えない場合のエラー対応について。

sessionStorageとlocalStorage

Web Storage

Web StorageであるStorageオブジェクトには２種類あります。

sessionStorage localStoroge
ブラウザを開いている限り、リロードしても持続 ブラウザを閉じても持続

sessionStorageとlocalStorageとほぼ同じであり、唯一の違いは、localStorageに保存されたデータに期限がないのに対して、sessionStorageに保存されたデータはページのセッションが終了するときに消去されてしまうところです。

構文

keyは文字列（string）と整数(number)を利用できますが、値は文字列のみ。

sessionStorage

javascript.js
// sessionStorage にデータを保存
sessionStorage.setItem('key', 'value');

// sessionStorage に保存したデータを取得
const data = sessionStorage.getItem('key');

// sessionStorage に保存したデータを削除
sessionStorage.removeItem('key')

localStorage

javascript.js
// localStorage にデータを保存
localStorage.setItem('key', 'value');

// localStorage に保存したデータを取得
const data = localStorage.getItem('key');

// localStorage に保存したデータを削除
localStorage.removeItem('key')

Storageが使えるかどうかの判定

ブラウザ対応状況については心配しなくても良さそう😊
ただし無効に設定しているユーザーがいることを考慮しなければなりません。


Storageを使用する場合は必ず利用可能か判定を入れ、エラー対応をします。

本当に使用可能か確認するには、実際に書き込んでみて、エラーが発生しないことを確認した上で判定ということになります。

sessionStrogeが使えるかどうか

実装してみました。

javascript.js
function isSessionStorageAvailable () {
  var dummy = 'dummy';
  try {
    sessionStorage.setItem(dummy, dummy);
    sessionStorage.removeItem(dummy);
    return true;
  } catch (e) {
    return false;
  }
}

if (isSessionStorageAvailable()) {
  console.log('sessionStorageは有効です');
} else {
  console.log('sessionStorageは無効です');
}

localStrogeが使えるかどうか

javascript.js
function isLocalStorageAvailable () {
  var dummy = 'dummy';
  try {
    localStorage.setItem(dummy, dummy);
    localStorage.removeItem(dummy);
    return true;
  } catch (e) {
    return false;
  }
}

if (isLocalStorageAvailable()) {
  console.log('localStorageは有効です');
} else {
  console.log('localStorageは無効です');
}
consoleで検証

sessionStorage、localStorageともに有効でした。

利用可能かどうかを検証

※MDNに詳しく書かれていましたので、引用します

ローカルストレージに対応しているブラウザーは、 window オブジェクトに localStorage という名称のプロパティを持っています。しかしさまざまな理由で、プロパティが存在すると主張するだけで例外が発生する可能性があります。ローカルストレージが存在していたとしても、さまざまなブラウザーがローカルストレージを無効化する設定を設けていますので、ローカルストレージが利用できる保証はありません。よってブラウザーがローカルストレージに対応していても、ページ上のスクリプトでは利用できる状態ではない場合があります。

例えば Safari はプライベートブラウジングモードでは、容量が 0 で空のローカルストレージを提供しますので、事実上使用できません。逆に、正規の QuotaExceededError が発生した場合、これはストレージ領域を使い切ったことを意味しますが、ストレージは実際に利用可能です。機能検出時には、これらのシナリオを考慮に入れるべきです。

javascript.js
function isStorageAvailable(type) {
    let storage;
    try {
        storage = window[type];
        var x = '__storage_test__';
        storage.setItem(x, x);
        storage.removeItem(x);
        return true;
    }
    catch(e) {
        return e instanceof DOMException && (
            // everything except Firefox
            e.code === 22 ||
            // Firefox
            e.code === 1014 ||
            // test name field too, because code might not be present
            // everything except Firefox
            e.name === 'QuotaExceededError' ||
            // Firefox
            e.name === 'NS_ERROR_DOM_QUOTA_REACHED') &&
            // acknowledge QuotaExceededError only if there's something already stored
            (storage && storage.length !== 0);
    }
}
console.log(isStorageAvailable('sessionStorage'))
console.log(isStorageAvailable('localStorage'))

参照: MDN Web Storage API の使用

consoleで試すと、sessionStorage、localStorageどちらもtrueになりました😊