Библиотека, упрощающая использование localStorage

Одна из проблем с localStorage заключается в том, что она принимает только строковые значения. Если вы хотите сохранить объект, вы должны преобразовать его в JSON с расширением JSON.stringify.

Библиотека, упрощающая использование localStorage

Когда вы извлекаете объекты из localStorage, вам нужно преобразовать значение JSON обратно в JavaScript с помощью JSON.parse.

   // Saving object to localStorage
const value = {
key: ‘value’,
key2: ‘value2’
}

localStorage.setItem(‘storage’, JSON.stringify(value))

 

   // Getting object from localStorage
const storedValue = JSON.parse(localStorage.getItem(‘storage’))

Этот процесс является проблематичным из-за дополнительной необходимости использования JSON.stringify и JSON.parse.

Когда я использую localStorage, я часто храню объекты и хочу иметь более простой синтаксис. Поэтому и создана библиотека под названием localStore.

LocalStore упрощает работу

Сохранение и получение элементов с помощью localStore упрощается — вам не нужно использовать JSON.stringify или JSON.parse.

   // Saving items with localStore
const value = {
key: ‘value’,
key2: ‘value2’
}

localStore.set(storage, value)

 

   // Getting items with localStore
const storedValue = localStore.get(‘storage’)

Бонус: вам не нужно помнить, сохранили ли вы строковое значение или объект JSON в localStorage.

Когда вы получаете элементы, localStore проверяет, является ли значение для вас строкой или объектом JSON. Больше никаких JSON.parse ошибок!

   // Saving a string value with localStore
localStore.set(‘message’, ‘Hello world’)

 

   // Getting a string value with localStore
const storedValue = localStore.get(‘message’)

Дополнительные функции: Сохранение expiry value

Токены доступа часто имеют expires_in значение. Когда я сохраняю токены доступа в localStorage, мне приходится expires_in вручную преобразовывать это значение в метку времени.

   const token = {
value: access_token,
expiry: Date.now() + expires_in * 1000
}

localStorage.setItem(‘token’, JSON.stringify(token))

С localStore мне не нужно беспокоиться о преобразовании expires_in значения в метку времени. Он автоматически преобразуется для меня, если я передаю expires_In свойство в качестве опции.

   localStore.set(token, ‘12345’, {
expiresIn: 3600
})

Библиотека, упрощающая использование localStorage

Когда вы получаете элементы со значением expiry value с помощью localStore, он проверяет, истек ли срок действия элемента.

  • Если срок действия элемента истек, localStore удалит этот элемент из localStorage и вернет undefined. Это избавляет от необходимости выполнять какую-либо очистку.
  • Если вы хотите сохранить элемент в localStorage после истечения срока его действия, вы можете установить deleteWhenExpired значение false при сохранении элемента.

   // Prevents localStorage from deleting the stored value when the value expires
localStorage.set(token, access_token, {
expiresIn: expires_in,
deleteWhenExpired: false
})

Когда вы получаете доступ к элементу с истекшим сроком действия с помощью deleteWhenExpired: false, localStore добавляет expired: true, поэтому вам не нужно сравнивать значение срока действия с Date.now.

   // Getting expired value
const token = localStore.get(‘token’)
console.log(token)

Библиотека, упрощающая использование localStorage

Установка localStore

localStore добавлено в репозиторий JavaScript. Вы можете установить все с помощью этой команды:

   npm install @zellwk/javascript

Эта библиотека совместима с модулями ES. Вы можете импортировать localStore с помощью следующего кода:

   import * as localStore from ‘@zellwk/javascript/localstore.js’

Вот и все!

Я надеюсь, что вы найдете localStore полезным!

Оцените статью
Поделиться с друзьями
Валерий Матафонов

Автор блога WM-IT.pro. Занимаюсь разработкой и оптимизацией сайтов с 2010 года.

WM-IT.pro - Блог об информационных технологиях
Добавить комментарий

  1. Coder

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

    Ответить