# Storages

A storage is the main object responsible for saving, retrieving and serializing (if
needed) cache data. There are two simple ones that comes by default:

- [In Memory](https://github.com/arthurfiorette/axios-cache-interceptor/tree/main/src/storage/memory.ts)
  with `buildMemoryStorage` (Node and Web)
- [Web Storage API](https://github.com/arthurfiorette/axios-cache-interceptor/tree/main/src/storage/web-api.ts)
  with `buildWebStorage` (Web only)

Both of them are included in all bundles.

## How storages works

Storages are meant to be the middleware between the cache interceptor and some sort of
storage (persistent or not).

The interceptor will call his methods internally to save and retrieve cache objects. But
you can also do that manually.

```js #runkit
const axios = require('axios');
const { buildMemoryStorage, setupCache } = require('axios-cache-interceptor');

setupCache(axios);

const { id } = await axios.get('https://jsonplaceholder.typicode.com/posts/1');

// Now i want to retrieve all cache saved to the request above.
const cache = await axios.storage.get(id);

console.log('Cache information:', cache);
```

## Memory storage

**This storage is the default one**.

A simple storage that works everywhere. You can access his values with the `data`
property;

```js #runkit
const axios = require('axios');
const { buildMemoryStorage, setupCache } = require('axios-cache-interceptor');

const storage = buildMemoryStorage();

setupCache(axios, { storage });

const { id } = await axios.get('url');

console.log(`The request state is ${storage.data[id].state}`);
```

## Web storage

For web applications that needs persistent caching, you can use the `buildWebStorage`
function. It is a persistent storage that works in conjunction with the browser's
[Storage API](https://developer.mozilla.org/en-US/docs/Web/API/Storage).

```js
const axios = require('axios');
const { buildWebStorage, setupCache } = require('axios-cache-interceptor');

const myStorage = buildWebStorage(sessionStorage, 'axios-cache:');

setupCache(axios, { storage: myStorage });
```

You can use the SessionStorage, LocalStorage or even a custom storage.

```js
const fromLocalStorage = buildWebStorage(localStorage);
const fromSessionStorage = buildWebStorage(sessionStorage);

const customStorage = new Storage();
const fromCustomStorage = buildWebStorage(myStorage);
```

To prevent collisions, you can choose a custom prefix for every index access.

```js
const withoutPrefix = buildWebStorage(localStorage);

const withPrefix = buildWebStorage(localStorage, 'axios-cache:');
```

## Creating your own storage

There's no mystery implementing a custom storage. You can create your own storage by using
the `buildStorage` function. It is also internally used to build the built-in ones.

This function is needed to add a simple method `get`. It is used to retrieve the value of
a key and handle cache invalidation.

Look at this simple [NodeRedis v4](https://github.com/redis/node-redis) example.

```js #runkit
const axios = require('axios');
const { createClient } = require('redis'); // v4.0.1
const { buildStorage, setupCache } = require('axios-cache-interceptor');

const client = createClient();

await client.connect();

const redisStorage = buildStorage({
  find: async (key) => {
    return await client.get(`axios-cache:${key}`);
  },
  set: async (key, value) => {
    await client.set(`axios-cache:${key}`, JSON.stringify(value));
  },
  remove: async (key) => {
    await client.del(`axios-cache:${key}`);
  }
});

setupCache(axios, { storage: redisStorage });
```