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

мы не можем знать, какой код не работает, из расположения кода для производственных файлов javascript все скомпилированы и исправлены.
При поиске проблемы мы можем обнаружить, что браузер не поддерживает localStorage. Самое простое решение — отловить ошибку при использовании localStorage:
try {
const data = localStroage.getItem(key)
} catch(e) {
// if localStorage not support, fallback
}
Лучшим способом будет предоставить служебный файл для выполнения:
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) {
//
}
}
}
Если 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();

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

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