Handling key-value storage efficiently with Unstorage

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.

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

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).

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.

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.

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.

📖 Learn more

If you would like to learn more about Vue, Nuxt, JavaScript or other useful technologies, checkout VueSchool by clicking this link or by clicking the image below:

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 🖥️