Skip to content

fs-storage

localStorage service factory with prefix namespacing.

bash
npm install @script-development/fs-storage

What It Does

fs-storage wraps localStorage in a service that namespaces all keys under a prefix. This prevents key collisions when multiple applications or modules share the same browser storage.

Basic Usage

typescript
import { createStorageService } from "@script-development/fs-storage";

const storage = createStorageService("myapp");

// Stores as "myapp:username" in localStorage
storage.put("username", "Alice");

// Retrieves from "myapp:username"
const name = storage.get<string>("username"); // "Alice"

// Remove a single key
storage.remove("username");

// Remove all keys with this prefix
storage.clear();

Automatic Serialization

The service handles JSON serialization automatically. You can store any value that's JSON-serializable:

typescript
// Objects and arrays are JSON-stringified on put, parsed on get
storage.put("settings", { theme: "dark", language: "en" });
const settings = storage.get<Settings>("settings"); // { theme: "dark", language: "en" }

// Numbers, booleans, arrays — all work
storage.put("count", 42);
storage.put("enabled", true);
storage.put("tags", ["admin", "editor"]);

Default Values

The get method accepts a default value that is returned when the key doesn't exist:

typescript
// Returns "guest" if "role" hasn't been stored
const role = storage.get("role", "guest"); // "guest"

Smart parsing behavior

When you pass a string default value, the stored value is returned as a raw string (no JSON parsing). When you pass a non-string default or no default, the service attempts to JSON-parse the stored value. This lets you store and retrieve both plain strings and complex objects predictably.

Prefix Namespacing

The prefix is prepended to every key with a : separator:

typescript
const userStorage = createStorageService("user");
const cacheStorage = createStorageService("cache");

userStorage.put("name", "Alice"); // localStorage key: "user:name"
cacheStorage.put("name", "stale"); // localStorage key: "cache:name"

userStorage.get("name"); // "Alice"
cacheStorage.get("name"); // "stale"

// clear() only removes keys with the matching prefix
userStorage.clear(); // removes "user:*", leaves "cache:*" intact

This is particularly useful when:

  • Multiple apps run on the same domain
  • Different features store data independently
  • You want to clear one feature's cache without affecting others

Used By Other Packages

fs-storage provides the storage shape that other packages accept. For example, fs-theme needs a storage contract — and fs-storage matches it naturally:

typescript
import { createStorageService } from "@script-development/fs-storage";
import { createThemeService } from "@script-development/fs-theme";

const storage = createStorageService("myapp");
const theme = createThemeService(storage);
// Theme preference is persisted under "myapp:theme"

fs-adapter-store also uses storage for offline persistence of domain state.

API Reference

createStorageService(prefix)

ParameterTypeDescription
prefixstringRequired. Prepended to all keys as prefix:key

Service Methods

MethodReturnsDescription
put(key, value)voidStore a value (JSON-stringified if not a string)
get<T>(key)T | undefinedRetrieve a value, attempting JSON parse
get<T>(key, defaultValue)TRetrieve with fallback default
remove(key)voidRemove a single key
clear()voidRemove all keys with this prefix

Built by Script Development & Back to Code