Handling key-value storage efficiently with Unstorage
Tags: javascript, performance, database, programming
Published: 2024-05-06 08:08:13

Working with storages is not an easy task because each of these storages can have a different interface, client library, and usage. When I first tried to implement an universal approach to handle this problem, I realised that it will be much more difficult that I initially imagined.

Thankfully, I discovered a great package by the UnJS team called `unstorage`. This package is used in Nuxt framework and Nitro server engine and it works like a charm.

Today, I wanted to write about it as it is a great piece of software that made my life easier and I am certain that it will allow you to handle key-value storage in a modern and efficient way.

Enjoy!

## 🤔 What is a Unstorage?

Unstorage provides an async Key-Value storage API with conventional features like multi driver mounting, watching and working with metadata, dozens of built-in drivers and a tiny core.

It comes with several useful features like:

* Designed for all environments: Browser, NodeJS, and Workers
* Lots of Built-in drivers
* Asynchronous API
* Unix-style driver mounting to combine storages
* Default in-memory storage
* Tree-shakable utils and tiny core
* Auto JSON value serialization and deserialization
* Binary and raw value support
* State snapshots and hydration
* Storage watcher
* HTTP Storage with built-in server

If you would like to learn more about it, check out the official docs [here](https://unstorage.unjs.io/).

The usage is relatively simple. After installing the package we can use it like following:

```ts
import { createStorage } from "unstorage";

const storage = createStorage(/* opts */);

await storage.getItem("foo:bar");
```

Let's take a look how it works for different providers.

## 🟢 Using unstorage to handle different storage providers

Unstorage allows to have common interface for working with different key-value storage providers. Let's take a look at few examples to see how useful it is.

### Memory

Keeps data in memory using Map. (default storage).

```ts
import { createStorage } from "unstorage";
import memoryDriver from "unstorage/drivers/memory";

const storage = createStorage({
  driver: memoryDriver(),
});
```

### Redis

Unstorage uses `ioredis` internally to connect to Redis so it needs to be installed first.

```ts
import { createStorage } from "unstorage";
import redisDriver from "unstorage/drivers/redis";

const storage = createStorage({
  driver: redisDriver({
    base: "unstorage",
    host: 'HOSTNAME',
    tls: true,
    port: 6380,
    password: 'REDIS_PASSWORD'
  }),
});
```

### Vercel KV

It uses `@vercel/kv` package so it needs to be installed first.

```ts
import { createStorage } from "unstorage";
import vercelKVDriver from "unstorage/drivers/vercel-kv";

const storage = createStorage({
  driver: vercelKVDriver({
    // url: "https://<your-project-slug>.kv.vercel-storage.com", // KV_REST_API_URL
    // token: "<your secret token>", // KV_REST_API_TOKEN
    // base: "test",
    // env: "KV",
    // ttl: 60, // in seconds
  }),
});
```

Check all available drivers in the official documentation [here](https://unstorage.unjs.io/drivers).

## 📖 Learn more 

If you would like to learn more about Vue, Nuxt, JavaScript or other useful technologies, checkout VueSchool by clicking this [link](https://vueschool.io/courses?friend=baroshem) or by clicking the image below:

[![Vue School Link](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i662jpyni4zs2dlaeud1.png)](https://vueschool.io/courses?friend=baroshem)

It covers most important concepts while building modern Vue or Nuxt applications that can help you in your daily work or side projects 😉

## ✅ Summary

Well done! You have just learned how to use Unstorage to handle kev-value storage in a modern and efficient way. 

Take care and see you next time!

And happy coding as always 🖥️