localStorage를 사용하기 쉽게 만드는 라이브러리

localStorage의 문제점 중 하나는 문자열 값만 받는다는 것입니다. 객체를 저장하려면 JSON.stringify 를 사용하여 객체를 JSON으로 변환해야 합니다.

localStorage에서 객체를 검색할 때 JSON.parse를 사용하여 JSON 값을 다시 JavaScript로 변환해야 합니다.

// 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')

보너스: localStorage에 문자열 값을 저장했는지 아니면 JSON 객체를 저장했는지 기억할 필요가 없습니다.

항목을 가져올 때 localStore는 값이 문자열인지 또는 JSON 객체인지 확인합니다. 그것은 당신을 위해 JSON.parse를 호출하므로 당신이 할 필요가 없습니다. 더 이상JSON.parse 오류가 없습니다! 예이!

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

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

추가 기능: 만료 값 저장

액세스 토큰은 종종 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 값을 타임스탬프로 변환하는 것에 대해 걱정할 필요가 없습니다. expiresIn 속성을 옵션으로 전달하면 자동으로 변환됩니다.

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

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)

localStore 설치

JavaScript repository에 localStore를 추가했습니다. 다음 명령으로 모든 것을 설치할 수 있습니다.

npm install @zellwk/javascript

이 라이브러리는 ES 모듈과 호환됩니다. 다음 코드를 사용하여 localStore를 가져올 수 있습니다.

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

그게 다야!

localStore가 도움이 되었기를 바랍니다.


읽어 주셔서 감사합니다. 이 기사는 원래 my blog에 게시되었습니다. 더 나은 프런트엔드 개발자가 되는 데 도움이 되는 더 많은 기사를 보려면 my newsletter에 가입하세요.