One of the problems with localStorage is it takes in only string values. If you want to save an object, you have to convert it into JSON with . JSON.stringify When you retrieve objects from localStorage, you need to convert the JSON value back into JavaScript with 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')) This process is troublesome because of the extra need to use and . JSON.stringify JSON.parse When I use localStorage, I find myself storing objects a lot and I want to have a simpler syntax. So I created a library called . localStore localStore simplifies things Saving and getting items with localStore is simplified — you don’t have to use or . 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') A bonus: You don’t have to remember whether you stored a string value or a JSON object into localStorage. When you get items, localStore checks whether the value is a string or a JSON object for you. It calls for you so you don’t have to. No more errors! Yay! 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') Extra features: Saving an expiry value Access tokens often come with an value. When I save access tokens to localStorage, I have to convert this value into a timestamp manually. expires_in expires_in const token = {
  value: access_token,
  expiry: Date.now() + expires_in * 1000
}

localStorage.setItem('token', JSON.stringify(token)) With localStore, I don’t have to worry about converting the value into a timestamp. It gets converted for me automatically if I pass in an property as an option. expires_in expiresIn localStore.set(token, '12345', {
  expiresIn: 3600
}) When you get items with an expiry value using localStore, it will check whether the item has expired. If the item has expired, localStore will delete this item from localStorage and return . This saves the need to perform any cleanup. undefined If you want to keep the item in localStorage beyond its expiry, you can set to as you save the item. deleteWhenExpired false // Prevents localStorage from deleting the stored value when the value expires
localStorage.set(token, access_token, {
  expiresIn: expires_in,
  deleteWhenExpired: false
}) When you access an expired item with , localStore adds an so you don’t have to compare the expiry value with . deleteWhenExpired: false expired: true Date.now // Getting expired value
const token = localStore.get('token')
console.log(token) Installing localStore I added localStore in . You can install everything with this command: JavaScript repository npm install @zellwk/javascript This library is ES modules compatible. You can import localStore with the following code: import * as localStore from '@zellwk/javascript/localstore.js' That’s it! I hope you find localStore helpful! Thanks for reading. This article was originally posted on . Sign up for if you want more articles to help you become a better frontend developer. my blog my newsletter

Keep

How to Install Node Versions and Upgrade or Downgrade Them

Don’t Be Ashamed of Tutorial Hell. Embrace it.

Read my articles here

Nominated for 2022 - HackerNoon Contributor of the Year - Data Security

Too Long; Didn't Read

Make resilience your competitive advantage

I Wrote a Library to Make Using localStorage Easier.

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

A Quick CSS Guide: Crafting Neon Buttons with Glow Effects & Animations

100 Days of AI Day 1: From Newsletter to Podcast, Leveraging AI for Audio Transformation

10 Threats to an Open API Ecosystem

10 Indications That You Should Invest in Automation Via APIs

10 Best Practices for Securing Your API

A Quick CSS Guide: Crafting Neon Buttons with Glow Effects & Animations

100 Days of AI Day 1: From Newsletter to Podcast, Leveraging AI for Audio Transformation

10 Threats to an Open API Ecosystem

10 Indications That You Should Invest in Automation Via APIs

10 Best Practices for Securing Your API

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps