Использование localStorage
в веб-разработке — действительно мощный инструмент. Информация о теме или даже данные о продукте могут быть легко сохранены в хранилище браузера пользователя; в этой статье я расскажу, как использую его в приложениях React.
Функции объекта localStorage
довольно просты в использовании. Доступ к данным можно получить с помощью key: string
или установить с помощью key: string
и value: string
🧑💻 USING localStorage IN REACT IS SIMPLE type Theme = 'dark' | 'light' const [theme, setTheme] = useState<Theme>(localStorage.getItem('theme') as Theme || 'light') useEffect(() => { localStorage.setItem('theme', theme) }, [theme])
Даже объекты или массивы могут быть сохранены как значение с помощью JSON.stringify()
👏 OBJECTS AND ARRAYS SHOULD BE STORED WHEN DATA IS COMPLEX useEffect(() => { const colors = ['#02D4F6', '#02D4B8', '🐴'] const theme = { preferred: 'light', actual: 'dark', horse: '🐴' } localStorage.setItem('list', JSON.stringify(colors)) localStorage.setItem('list', JSON.stringify(theme)) }, [])
Поскольку мы можем сохранять только данные типа string
, объекты и массивы всегда должны быть JSON.stringify()
ed в setItem()
и JSON.parse()
d в getItem()
. Со временем это может стать излишним, поэтому давайте создадим утилиту, которая сделает эту работу за нас.
👔 CREATE storage.ts IN src/utils const storage = { get: (key: string): string | null => { const result = localStorage.getItem(key) if (!result) return null try { return JSON.parse(result) } catch { return result } } } export default storage
Наш собственный объект storage
был создан с использованием свойства функции get
. В его обязанности входит получение элемента из localStorage
с использованием параметра key
и попытка проанализировать результат. Если результатом является string
, он вернет его без разбора. Если значение является объектом или массивом, он может проанализировать и вернуть его.
Теперь мы можем расширить нашу утилиту с помощью set
📈 EXTEND UTILITY WITH set() const storage = { get: (key: string): string | null => { const result = localStorage.getItem(key) if (!result) return null try { return JSON.parse(result) } catch { return result } }, set: (key: string, value: string | {} | []): void => { localStorage.setItem( key, typeof value === 'string' ? value : JSON.stringify(value) ) } } export default storage
В дополнение к key
, set
также имеет параметр value
, который может быть строкой, объектом или массивом. Задача этой функции состоит в том, чтобы сохранить value
под key
в localStorage
, и перед сохранением она должна JSON.stringify()
value
, если ее тип не string
.
Конечно, следуя этому шаблону, вы можете расширить функциональность этой утилиты дополнительными localStorage
функциями, такими как clear()
🚀 ADD MORE FIELDS const storage = { get: (key: string): string | null => { const result = localStorage.getItem(key) if (!result) return null try { return JSON.parse(result) } catch { return result } }, set: (key: string, value: string | {} | []): void => { localStorage.setItem( key, typeof value === 'string' ? value : JSON.stringify(value) ) }, clear: (): void => { localStorage.clear() } } export default storage
Использование теперь очень простое; объект хранилища должен быть только импортирован на страницу или компонент и выполнен с соответствующими аргументами.
Как вы относитесь к этой реализации? Имеет ли это смысл для вас? Это облегчит вашу жизнь? Пожалуйста, поделитесь своими мыслями в разделе комментариев.
👋 Надеюсь, вы нашли это полезным в поисках нового материала для изучения. Спасибо, что нашли время, чтобы прочитать это! Подпишитесь на мою рассылку, если вы хотите читать больше таких историй в будущем!