Как безопасно использовать LocalStorage

Определить, поддерживает ли браузер localStorage

На прошлой неделе я был прерван предупреждающим сообщением об ошибке производства, когда я сосредоточился на кодировании. Пришлось прекратить работу и выяснить, что случилось.

Ошибка

мы не можем знать, какой код не работает, из расположения кода для производственных файлов javascript все скомпилированы и исправлены.

При поиске проблемы мы можем обнаружить, что браузер не поддерживает localStorage. Самое простое решение — отловить ошибку при использовании localStorage:

try {
  const data = localStroage.getItem(key)
} catch(e) {
  // if localStorage not support, fallback
}

Но этот способ усложнит наш код, если будет много фрагментов кода localStorage.

Лучшим способом будет предоставить служебный файл для выполнения:

export const storage = {
  getItem(key, fallbackValue) {
    try {
      return localStorage.getItem(key);
    } catch(e) {
      return fallbackValue;
    }
  },
  setItem(key, value) {
    try {
      localStorage.setItem(key, value);
    } catch(e) {
      // 
    }
  }
  removeItem(key, value) {
    try {
      localStorage.removeItem(key, value);
    } catch(e) {
      // 
    }
  }
}

В нашем коде мы можем импортировать утилиту и использовать storage.getItem для доступа к данным localStorage. Но этот способ также может продолжать оптимизироваться, так как данные будут потеряны в том же контексте страницы.

Если localStorage не поддерживается, мы можем использовать память. Окончательный способ будет таким:

function isSupportLS() {
  try {
    localStorage.setItem('_ranger-test-key', 'hi')
    localStorage.getItem('_ranger-test-key')
    localStorage.removeItem('_ranger-test-key')
    return true
  } catch (e) {
    return false
  }
}

class Memory {
  constructor() {
    this.cache = {}
  }
  setItem(cacheKey, data) {
    this.cache[cacheKey] = data
  }
  getItem(cacheKey) {
    return this.cache[cacheKey]
  }
  removeItem(cacheKey) {
    this.cache[cacheKey] = undefined
  }
}
// if not support localStorage, fallback to memory
export const storage = isSupportLS() ? window.localStorage : new Memory();

мы можем отключить localStorage, заблокировав все файлы cookie, посетите chrome://settings/cookies:

А затем протестируйте этот код в консоли Chrome, он работает хорошо:

Надеюсь, что эта статья поможет вам, и с нетерпением жду возможности следовать за мной, чтобы узнать больше о навыках.

Дополнительные материалы на PlainEnglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter, LinkedIn, YouTube и Discord . Заинтересованы в хакинге роста? Ознакомьтесь с разделом Схема.