Как я использую localStorage в React

Использование 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

Использование теперь очень простое; объект хранилища должен быть только импортирован на страницу или компонент и выполнен с соответствующими аргументами.

Как вы относитесь к этой реализации? Имеет ли это смысл для вас? Это облегчит вашу жизнь? Пожалуйста, поделитесь своими мыслями в разделе комментариев.

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