LocalStorage 基本的な使い方

LocalStorageを使えるかどうか

公式のものでよさそう

function storageAvailable(type: 'localStorage' | 'sessionStorage') {
    var 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);
    }
}

取得・保存・削除

if (storageAvailable('localStorage')) {
  const key = 'hoge'
  // 取得
  // key がなければ null 
  const localStorageStr = localStorage.getItem(key)
  if(localStorageStr){
    const localStorageData = localStorageStr ? JSON.parse(localStorageStr) : null 
  }
  // 保存
　// 同じキーで重複して保存したら上書きされる
  // 値で 渡せるのは文字列のみ。
  // JSON.stringify を通せば null という状態も持たせられるが…。
  localStorage.setItem(
    key,
    JSON.stringify({
      '1234': true,
      '5678': false,
    })
  )
  // 削除
  localStorage.removeItem(key)
}