Navigation Back to home

Storage

The Storage class encapsulates the access to data objects over WebStorageAPI.

Import
the javascript logo
import { Storage } from "@schukai/monster/source/data/datasource/storage.mjs";
Source
the git logo
Package
the npm logo
Since
1.22.0

Storage is the datasource base for browser Web Storage. It reads and writes structured JSON values behind the same datasource API used elsewhere in Monster.

This makes it useful for cached user preferences, drafts, view state and other browser-local data that should still behave like a proper datasource instead of ad-hoc storage utility code.

The base class does not decide whether the backend is localStorage or sessionStorage. Derived classes provide the concrete storage object while the read/write contract stays identical.

Read And Write JSON Through Web Storage

import { Storage } from "@schukai/monster/source/data/datasource/storage.mjs";

class DemoStorage extends Storage {
    [Symbol.for("@schukai/monster/data/datasource/storage/@@storageObject")]() {
        return window.sessionStorage;
    }
}

const output = document.getElementById("storage-output");

document.getElementById("storage-run").addEventListener("click", () => {
    const datasource = new DemoStorage("monster-demo");
    output.textContent = JSON.stringify(
        {
            key: datasource.getOption("key"),
            backend: "sessionStorage",
        },
        null,
        2,
    );
});
Open in playground

Persist Draft State In Session Storage

import { Storage } from "@schukai/monster/source/data/datasource/storage.mjs";

class DraftStorage extends Storage {
    [Symbol.for("@schukai/monster/data/datasource/storage/@@storageObject")]() {
        return window.sessionStorage;
    }
}

const datasource = new DraftStorage("docs-draft");
const output = document.getElementById("storage-session-output");

document.getElementById("storage-session-run").addEventListener("click", () => {
    datasource.set({
        headline: "Draft article",
        dirty: true,
    });

    output.textContent = JSON.stringify(
        {
            backend: "sessionStorage",
            key: datasource.getOption("key"),
            data: datasource.get(),
        },
        null,
        2,
    );
});
Open in playground

Persist User Preferences In Local Storage

import { Storage } from "@schukai/monster/source/data/datasource/storage.mjs";

class PreferenceStorage extends Storage {
    [Symbol.for("@schukai/monster/data/datasource/storage/@@storageObject")]() {
        return window.localStorage;
    }
}

const datasource = new PreferenceStorage("docs-preferences");
const output = document.getElementById("storage-local-output");

document.getElementById("storage-local-run").addEventListener("click", () => {
    datasource.set({
        density: "compact",
        locale: "en-US",
    });

    output.textContent = JSON.stringify(
        {
            backend: "localStorage",
            key: datasource.getOption("key"),
            data: datasource.get(),
        },
        null,
        2,
    );
});
Open in playground

Remove The Storage Entry When The Datasource Becomes Undefined

import { Storage } from "@schukai/monster/source/data/datasource/storage.mjs";

class DemoStorage extends Storage {
    [Symbol.for("@schukai/monster/data/datasource/storage/@@storageObject")]() {
        return window.sessionStorage;
    }
}

const datasource = new DemoStorage("docs-remove-example");
const output = document.getElementById("storage-remove-output");

document.getElementById("storage-remove-run").addEventListener("click", async () => {
    datasource.set({
        cleanup: true,
    });
    await datasource.write();

    datasource.set(undefined);
    await datasource.write();

    output.textContent = JSON.stringify(
        {
            key: datasource.getOption("key"),
            storedValue: window.sessionStorage.getItem(datasource.getOption("key")),
        },
        null,
        2,
    );
});
Open in playground

Exported

Storage, storageObjectSymbol

Derived from

Datasource

Options

The Options listed in this section are defined directly within the class. This class is derived from several parent classes. Therefore, it inherits Options from these parent classes. If you cannot find a specific Options in this list, we recommend consulting the documentation of the Datasource.

Option
Type
Default
Description
key
string
undefined
ey

Properties

The Properties listed in this section are defined directly within the class. This class is derived from several parent classes. Therefore, it inherits Properties from these parent classes. If you cannot find a specific Properties in this list, we recommend consulting the documentation of the Datasource.

Methods

The methods listed in this section are defined directly within the class. This class is derived from several parent classes. Therefore, it inherits methods from these parent classes. If you cannot find a specific method in this list, we recommend consulting the documentation of the Datasource.

Constructor

constructor(key)
Parameters
  • key {string}: LocalStorage Key
Throws
  • {TypeError} value is not a string

Structural methods

getClone()
Returns
  • {Storage}

Static methods

[instanceSymbol]()2.1.0
Returns
  • {symbol}
This method is called by the instanceof operator.

Other methods

[storageObjectSymbol]()
Returns
  • {external:Storage}
Throws
  • {Error} this method must be implemented by derived classes.
read()
Returns
  • {Promise}
Throws
  • {Error} the options does not contain a valid json definition
  • {TypeError} value is not a object
  • {Error} the data cannot be read
write()
Returns
  • {Storage}
Throws
  • {Error} the data cannot be written

Events

This component does not fire any public events. It may fire events that are inherited from its parent classes.

The current width of the area is too small to display the content correctly.