A library to make localStorage easier to use
Tags: localstorage, javascript, browserapi
Published: 2022-07-04 06:27:44

---
title: A library to make localStorage easier to use
description: 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.
canonical_url: https://zellwk.com/blog/library-for-localstorage/
tags: localstorage, javascript, browserapi
cover_image: https://images.unsplash.com/photo-1581068466660-e6585b8afa97?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80
published: true
---

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`

<!-- more -->

```js
// Saving object to localStorage
const value = {
  key: 'value',
  key2: 'value2'
}

localStorage.setItem('storage', JSON.stringify(value))
```

```js
// Getting object from localStorage
const storedValue = JSON.parse(localStorage.getItem('storage'))
```

This process is troublesome because of the extra need to use `JSON.stringify` and `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](https://github.com/zellwk/javascript/tree/master/src/browser/localstore).

## localStore simplifies things

Saving and getting items with localStore is simplified — you don't have to use `JSON.stringify` or `JSON.parse`.

```js
// Saving items with localStore
const value = {
  key: 'value',
  key2: 'value2'
}

localStore.set(storage, value)
```

```js
// 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 `JSON.parse` for you so you don't have to. No more `JSON.parse` errors! Yay!

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

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

## Extra features: Saving an expiry value

Access tokens often come with an `expires_in` value. When I save access tokens to localStorage, I have to convert this `expires_in` value into a timestamp manually.

```js
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 `expires_in` value into a timestamp. It gets converted for me automatically if I pass in an `expiresIn` property as an option.

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

<figure role="figure">
  <img src="https://zellwk.com/images/2022/localstore/localstore-with-expiry.png" alt="" loading="lazy">
</figure>

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 `undefined`. This saves the need to perform any cleanup.

- If you want to keep the item in localStorage beyond its expiry, you can set `deleteWhenExpired` to `false` as you save the item.

```js
// 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 `deleteWhenExpired: false`, localStore adds an `expired: true` so you don't have to compare the expiry value with `Date.now`.

```js
// Getting expired value
const token = localStore.get('token')
console.log(token)
```

<figure role="figure">
  <img src="https://zellwk.com/images/2022/localstore/expired-no-delete.png" alt="" loading="lazy">
</figure>

## Installing localStore

I added localStore in [JavaScript repository](https://github.com/zellwk/javascript). You can install everything with this command:

```js
npm install @zellwk/javascript
```

This library is ES modules compatible. You can import localStore with the following code:

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

That's it!

I hope you find localStore helpful!

<hr>

Thanks for reading. This article was originally posted on [my blog](https://zellwk.com/blog/library-for-localstorage/). Sign up for [my newsletter](https://zellwk.com) if you want more articles to help you become a better frontend developer.