Local Storage Fallback

Universal localStorage fallback. Saves your time by fixing Private Mode error writing in web browser and auto serialization that not included in localStorage by default.

Install

npm i fallback-local-storage

Include

Require CommonJS.

const FallbackLocalStorage = require("fallback-local-storage");

Import as ECMAScript module.

import FallbackLocalStorage from "fallback-local-storage";

CDN.

<script src="https://unpkg.com/fallback-local-storage"></script>

Creating an instance

Creating instance with little check.

let appStorage;
if (FallbackLocalStorage.getStorage().includes("localStorage")) {
	// Here we don't have any problems
	// with writing to `window.localStorage`
	appStorage = globalThis.localStorage;
} else {
	// Looks like we have some troubles.
	// Browser has disable `window.localStorage` support.
	// Or browser is in `Private Mode`
	// which disables localStorage completely.
	appStorage = new FallbackLocalStorage();
}

Recommended way of using instance.

globalThis.appStorage = appStorage;
self.appStorage = appStorage;

Not recommended. Only if you have troubles with Private Mode and other libraries.

globalThis.localStorage = new FallbackLocalStorage();
self.localStorage = new FallbackLocalStorage();

// Toggle debug information output.
const DEBUG = false;
// Allow iteration over instance.
// Disable if you don't want be compatible with localStorage.
const ITERABLE = true;
// Serialize data before save and retrieve. VERY RECOMMENDED.
const AUTO_SERIALIZE = true;
// Custom serializer for values.
const CUSTOM_SERIALIZER = null;
const appStorage = new FallbackLocalStorage(
  DEBUG, ITERABLE, AUTO_SERIALIZE, CUSTOM_SERIALIZER
);

API

All basic methods of localStorage are included.

appStorage.setItem("hash", { name: "John" });
appStorage.getItem("isTurnedOn", false);
appStorage.removeItem("hash");
appStorage.hasItem("hash");
appStorage.keys();
appStorage.values();
appStorage.entries();
appStorage.forEach();
appStorage.toString();
appStorage.toJSON();
appStorage.length;
appStorage.clear();

static getStorage (): Array

Return list of available storage

FallbackLocalStorage.getStorage();
// ["localStorage", "sessionStorage", "fallbackStorage"]

Examples

const appStorage = new FallbackLocalStorage();
// FallbackLocalStorage. Start using [localStorage].

const array = ["ONE", "TWO", "THREE"];
appStorage.setItem("array", array);
// If auto-serialize is disabled
// Value for key "array" will be converted to string: "ONE,TWO,THREE"
// If auto-serialize is enabled
// ["ONE", "TWO", "THREE"]

const object = { "1": "ONE", "2": "TWO", "3": "THREE" };
appStorage.setItem("object", object);
// If auto-serialize is disabled
// Value for key "object" will be converted to string: "[object Object]"
// If auto-serialize is enabled
// { 1: "ONE", 2: "TWO", 3: "THREE" }

const map = new Map([[1, "ONE"], [2, "TWO"], [3, "THREE"]]);
appStorage.setItem("map", map);
// If auto-serialize is disabled
// Value for key "map" will be converted to string: "[object Map]"
// If auto-serialize is enabled
// { 1: "ONE", 2: "TWO", 3: "THREE" }

const set = new Set(["ONE", "TWO", "THREE"]);
appStorage.setItem("set", set);
// If auto-serialize is disabled
// Value for key "set" will be converted to string: "[object Set]"
// If auto-serialize is enabled
// ["ONE", "TWO", "THREE"]

See also

My other projects