@jeanharo98/typed-storage 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Jean Haro
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,276 @@
+# typed-storage
+
+Type-safe `localStorage` and `sessionStorage` with a signal-like API, TTL support, cross-tab sync, and automatic fallback to memory when storage is unavailable.
+
+```typescript
+const appStorage = createStorage({
+  theme: 'dark' as 'dark' | 'light',
+  language: 'es' as 'es' | 'en',
+  fontSize: 16,
+});
+
+appStorage.theme.set('light');   // ✅ typed — only 'dark' | 'light' accepted
+appStorage.theme.set('purple');  // ❌ TypeScript error at compile time
+console.log(appStorage.theme()); // 'light' — persisted across reloads
+```
+
+## ✨ Features
+
+- **Type-safe** — TypeScript infers types from your schema automatically
+- **Signal-like API** — read with `signal()`, write with `signal.set(value)`
+- **TTL / expiration** — keys expire automatically after a defined time
+- **Cross-tab sync** — changes in one tab reflect in others via `StorageEvent`
+- **Memory fallback** — works even when `localStorage` is unavailable (Safari private mode, quota exceeded)
+- **Prefix namespacing** — avoid key collisions across apps or modules
+- **sessionStorage support** — opt in per schema
+- **onChange** — subscribe to value changes with a callback
+- **Zero dependencies** — pure TypeScript, no external packages
+
+---
+
+## 📦 Installation
+
+```bash
+npm install typed-storage
+# or
+pnpm add typed-storage
+```
+
+---
+
+## 🚀 Basic Usage
+
+```typescript
+import { createStorage } from 'typed-storage';
+
+const appStorage = createStorage({
+  theme: 'dark' as 'dark' | 'light',
+  language: 'es' as 'es' | 'en' | 'fr',
+  fontSize: 16,
+  sidebarOpen: true,
+});
+
+// Read
+console.log(appStorage.theme());       // 'dark'
+
+// Write — persists to localStorage automatically
+appStorage.theme.set('light');
+console.log(appStorage.theme());       // 'light'
+
+// Reset to initial value
+appStorage.theme.reset();
+console.log(appStorage.theme());       // 'dark'
+
+// Check if key exists in storage
+appStorage.theme.has();                // true
+
+// Remove key from storage
+appStorage.theme.remove();
+appStorage.theme.has();                // false
+
+// Clear all keys in the schema
+appStorage.clear();
+```
+
+---
+
+## ⚙️ Options
+
+```typescript
+const appStorage = createStorage(schema, options);
+```
+
+| Option | Type | Default | Description |
+|--------|------|---------|-------------|
+| `prefix` | `string` | — | Prepends `prefix:` to every key in localStorage |
+| `storage` | `'local' \| 'session'` | `'local'` | Use `sessionStorage` instead of `localStorage` |
+| `ttl` | `number` | — | Time to live in milliseconds — key expires after this time |
+| `sync` | `boolean` | `false` | Sync values across browser tabs via `StorageEvent` |
+| `encrypt` | `boolean` | `false` | Shows a security warning — see note below |
+
+### Prefix
+
+```typescript
+const appStorage = createStorage(
+  { theme: 'dark' },
+  { prefix: 'myapp' }
+);
+
+appStorage.theme.set('light');
+// Stored as: localStorage['myapp:theme'] = '"light"'
+```
+
+### TTL
+
+```typescript
+const appStorage = createStorage(
+  { authToken: '' },
+  { ttl: 3600000 } // expires in 1 hour
+);
+```
+
+### Cross-tab sync
+
+```typescript
+const appStorage = createStorage(
+  { theme: 'dark' },
+  { sync: true }
+);
+
+// When another tab calls appStorage.theme.set('light'),
+// this tab updates automatically
+```
+
+### sessionStorage
+
+```typescript
+const sessionData = createStorage(
+  { step: 1 },
+  { storage: 'session' }
+);
+```
+
+---
+
+## 🔔 onChange
+
+Subscribe to changes on any key:
+
+```typescript
+appStorage.theme.onChange((newValue) => {
+  console.log('theme changed to:', newValue);
+  document.body.setAttribute('data-theme', newValue);
+});
+
+appStorage.theme.set('light'); // → 'theme changed to: light'
+appStorage.theme.reset();      // → 'theme changed to: dark'
+appStorage.theme.remove();     // → 'theme changed to: dark' (initialValue)
+```
+
+---
+
+## 🔒 A note on encryption
+
+If you pass `encrypt: true`, typed-storage will display a warning explaining why encrypting values in `localStorage` is not a secure practice — the encryption key must live in the frontend and is accessible to anyone who inspects your code.
+
+For sensitive data such as auth tokens or personal information, use **httpOnly cookies** set by your server:
+
+```typescript
+// In your backend (Express / NestJS):
+res.cookie('authToken', token, {
+  httpOnly: true,   // not accessible from JavaScript
+  secure: true,     // HTTPS only
+  sameSite: 'strict'
+});
+```
+
+typed-storage is designed for:
+- ✅ UI preferences (theme, language, font size)
+- ✅ Navigation state (last visited, sidebar open)
+- ✅ Non-sensitive user settings
+- ❌ Auth tokens → use httpOnly cookies
+- ❌ Passwords or financial data → never in localStorage
+
+---
+
+## 🅰️ Usage with Angular
+
+typed-storage is framework-agnostic. For Angular, wrap it in a service with native Signals:
+
+```typescript
+import { Service, signal } from '@angular/core';
+import { createStorage } from 'typed-storage';
+
+@Service()
+export class StorageService {
+  private _storage = createStorage({
+    theme: 'dark' as 'dark' | 'light',
+    language: 'es' as 'es' | 'en',
+    fontSize: 16,
+  }, {
+    prefix: 'app',
+    sync: true,
+  });
+
+  // Native Angular Signals — reactive in any scenario including zoneless
+  theme = signal(this._storage.theme());
+  language = signal(this._storage.language());
+  fontSize = signal(this._storage.fontSize());
+
+  setTheme(value: 'dark' | 'light') {
+    this._storage.theme.set(value);
+    this.theme.set(value);
+  }
+
+  setLanguage(value: 'es' | 'en') {
+    this._storage.language.set(value);
+    this.language.set(value);
+  }
+}
+```
+
+```html
+<p>Theme: {{ storageService.theme() }}</p>
+<button (click)="storageService.setTheme('light')">Light</button>
+<button (click)="storageService.setTheme('dark')">Dark</button>
+```
+
+---
+
+## ⚛️ Usage with React
+
+```typescript
+import { useState, useEffect } from 'react';
+import { createStorage } from 'typed-storage';
+
+const appStorage = createStorage({
+  theme: 'dark' as 'dark' | 'light',
+});
+
+export function useTheme() {
+  const [theme, setThemeState] = useState(appStorage.theme());
+
+  useEffect(() => {
+    appStorage.theme.onChange(setThemeState);
+  }, []);
+
+  const setTheme = (value: 'dark' | 'light') => {
+    appStorage.theme.set(value);
+    setThemeState(value);
+  };
+
+  return { theme, setTheme };
+}
+```
+
+---
+
+## 📋 API Reference
+
+### `createStorage(schema, options?)`
+
+Creates a storage object from a schema. Returns a `StorageResult<T>` with one `StorageSignal` per key, plus a `clear()` method.
+
+### `StorageSignal<T>`
+
+| Member | Description |
+|--------|-------------|
+| `signal()` | Returns the current value |
+| `signal.set(value)` | Updates the value and persists to storage |
+| `signal.reset()` | Resets to `initialValue` and persists |
+| `signal.remove()` | Removes the key from storage and resets in memory |
+| `signal.has()` | Returns `true` if the key exists in storage |
+| `signal.onChange(cb)` | Subscribes to value changes |
+
+### `StorageResult<T>`
+
+| Member | Description |
+|--------|-------------|
+| `[key]` | One `StorageSignal` per schema key |
+| `clear()` | Calls `reset()` on all keys in the schema |
+
+---
+
+## 📄 License
+
+MIT

package/dist/create-storage.d.ts

@@ -0,0 +1,2 @@
+import { StorageSchema, StorageResult, StorageSignalOptions } from './types.js';
+export declare function createStorage<T extends StorageSchema>(schema: T, options?: StorageSignalOptions): StorageResult<T>;

package/dist/create-storage.js

@@ -0,0 +1,32 @@
+import { createStorageSignal } from './storage-signal.js';
+export function createStorage(schema, options) {
+    if (options?.encrypt) {
+        console.warn(`
+⚠️  typed-storage: la opción encrypt está activada.
+
+Encriptar valores en localStorage no es seguro — 
+la clave vive en el frontend y cualquier dev puede accederla.
+
+Para datos sensibles usa:
+    ✅ httpOnly cookies (tokens, sesiones)
+    ✅ Variables de entorno en el servidor
+  
+typed-storage es ideal para:
+    ✅ Preferencias de UI (theme, language)
+    ✅ Estado de navegación
+    ❌ Tokens de autenticación
+    ❌ Datos financieros o personales sensibles
+        `);
+    }
+    const result = [];
+    let keys = Object.keys(schema);
+    for (let key of keys) {
+        result[key] = createStorageSignal(key, schema[key], options);
+    }
+    result.clear = () => {
+        for (let key of keys) {
+            result[key].reset();
+        }
+    };
+    return result;
+}

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export { createStorage } from './create-storage.js';
+export type { StorageSignal, StorageSchema, StorageResult, StorageSignalOptions } from './types.js';

package/dist/index.js

@@ -0,0 +1 @@
+export { createStorage } from './create-storage.js';

package/dist/memory-storage.d.ts

@@ -0,0 +1,6 @@
+export declare class MemoryStorage {
+    private data;
+    getItem(key: string): string | null;
+    setItem(key: string, value: string): void;
+    removeItem(key: string): void;
+}

package/dist/memory-storage.js

@@ -0,0 +1,14 @@
+export class MemoryStorage {
+    constructor() {
+        this.data = new Map();
+    }
+    getItem(key) {
+        return this.data.get(key) ?? null;
+    }
+    setItem(key, value) {
+        this.data.set(key, value);
+    }
+    removeItem(key) {
+        this.data.delete(key);
+    }
+}

package/dist/storage-signal.d.ts

@@ -0,0 +1,2 @@
+import { StorageSignal, StorageSignalOptions } from "./types.js";
+export declare function createStorageSignal<T>(key: string, initialValue: T, options?: StorageSignalOptions): StorageSignal<T>;

package/dist/storage-signal.js

@@ -0,0 +1,94 @@
+import { MemoryStorage } from "./memory-storage.js";
+function safeParseJSON(value, fallback) {
+    if (!value)
+        return { value: fallback };
+    try {
+        const parsed = JSON.parse(value);
+        if (parsed && typeof parsed === 'object' && 'value' in parsed) {
+            return parsed;
+        }
+        return { value: JSON.parse(value) };
+    }
+    catch (error) {
+        console.warn(`Error al parsear JSON de localStorage. Usando valor por defecto.`, error);
+        return { value: fallback };
+    }
+}
+function getStorage(type) {
+    try {
+        const sto = type === 'session' ? sessionStorage : localStorage;
+        sto.setItem('__typed_storage_test__', '1');
+        sto.removeItem('__typed_storage_test__');
+        return sto;
+    }
+    catch {
+        console.warn('Storage no disponible, usando memoria como fallback');
+        return new MemoryStorage();
+    }
+}
+export function createStorageSignal(key, initialValue, options) {
+    let sto = getStorage(options?.storage ?? 'local');
+    if (options?.prefix) {
+        key = `${options.prefix}:${key}`;
+    }
+    const savedData = sto.getItem(key);
+    let currentValue;
+    const listeners = [];
+    function notify(value) {
+        listeners.forEach(cb => cb(value));
+    }
+    const item = safeParseJSON(savedData, initialValue);
+    if (item.expiresAt === undefined) {
+        currentValue = !savedData ? initialValue : item.value;
+    }
+    else {
+        if (Date.now() <= item.expiresAt) {
+            currentValue = item.value;
+        }
+        else {
+            sto.removeItem(key);
+            currentValue = initialValue;
+        }
+    }
+    const signalBase = function () {
+        return currentValue;
+    };
+    if (options?.sync) {
+        window.addEventListener('storage', (event) => {
+            if (event.key === key) {
+                if (event.newValue === null) {
+                    notify(initialValue);
+                    return currentValue = initialValue;
+                }
+                const item = safeParseJSON(event.newValue, initialValue);
+                notify(item.value);
+                return currentValue = item.value;
+            }
+        });
+    }
+    signalBase.set = function (newValue) {
+        currentValue = newValue;
+        notify(currentValue);
+        sto.setItem(key, JSON.stringify({
+            value: newValue,
+            expiresAt: options?.ttl ? Date.now() + options.ttl : undefined
+        }));
+    };
+    signalBase.reset = function () {
+        currentValue = initialValue;
+        notify(currentValue);
+        sto.setItem(key, JSON.stringify(initialValue));
+    };
+    signalBase.has = function () {
+        return !!sto.getItem(key);
+    };
+    signalBase.remove = function () {
+        sto.removeItem(key);
+        currentValue = initialValue;
+        notify(currentValue);
+    };
+    signalBase.onChange = function (callback) {
+        listeners.push(callback);
+    };
+    return signalBase;
+}

package/dist/types.d.ts

@@ -0,0 +1,21 @@
+export interface StorageSignalOptions {
+    prefix?: string;
+    storage?: 'local' | 'session';
+    ttl?: number;
+    sync?: boolean;
+    encrypt?: boolean;
+}
+export interface StorageSignal<T> {
+    (): T;
+    set(value: T): void;
+    reset(): void;
+    remove(): void;
+    has(): boolean;
+    onChange(callback: (value: T) => void): void;
+}
+export type StorageSchema = Record<string, any>;
+export type StorageResult<T extends StorageSchema> = {
+    [K in keyof T]: StorageSignal<T[K]>;
+} & {
+    clear(): void;
+};

package/dist/types.js

@@ -0,0 +1 @@
+export {};

package/index.html

@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>typed-storage test</title>
+</head>
+<body>
+    <script type="module">
+        import { createStorage } from './dist/index.js';
+
+        const appStorage = createStorage({
+            theme: 'dark',
+            fontSize: 16,
+            sidebarOpen: true,
+        }, { 
+            prefix: 'myapp',
+            ttl: 5000,       // expira en 5 segundos — para probar
+            sync: true
+        });
+
+        // Prueba 1 — valores iniciales
+        console.log('theme:', appStorage.theme());
+        console.log('fontSize:', appStorage.fontSize());
+
+        // Prueba 2 — set
+        appStorage.theme.set('light');
+        console.log('theme después de set:', appStorage.theme());
+
+        // Prueba 3 — reset
+        appStorage.theme.reset();
+        console.log('theme después de reset:', appStorage.theme());
+
+        // Prueba 4 — clear
+        appStorage.clear();
+        console.log('theme después de clear:', appStorage.theme());
+
+        // Prueba 5 — warning encrypt
+        const sensitiveStorage = createStorage({
+            token: '',
+        }, { encrypt: true });
+
+        // Prueba has()
+        console.log('¿tiene theme?', appStorage.theme.has());
+
+        // Prueba onChange()
+        appStorage.theme.onChange((newValue) => {
+            console.log('theme cambió a:', newValue);
+        });
+
+        // Prueba set — debería disparar onChange
+        appStorage.theme.set('light');
+        appStorage.theme.set('dark');
+
+        // Prueba reset — debería disparar onChange
+        appStorage.theme.reset();
+
+        // Prueba remove — debería disparar onChange
+        appStorage.theme.remove();
+        console.log('¿tiene theme después de remove?', appStorage.theme.has());
+    </script>
+</body>
+</html>

package/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "@jeanharo98/typed-storage",
+  "version": "0.1.0",
+  "description": "Type-safe localStorage with reactive signals",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "devEngines": {
+    "packageManager": {
+      "name": "pnpm",
+      "version": "11.1.1",
+      "onFail": "download"
+    }
+  },
+  "devDependencies": {
+    "@vitest/coverage-v8": "^4.1.8",
+    "jsdom": "^29.1.1",
+    "ts-node": "^10.9.2",
+    "typescript": "^6.0.3",
+    "vitest": "^4.1.8"
+  },
+  "scripts": {
+    "dev": "ts-node src/index.ts",
+    "build": "tsc",
+    "test": "vitest",
+    "test:coverage": "vitest --coverage"
+  }
+}

package/src/create-storage.ts

@@ -0,0 +1,41 @@
+import { StorageSchema, StorageResult, StorageSignalOptions } from './types.js';
+import { createStorageSignal } from './storage-signal.js';
+
+export function createStorage<T extends StorageSchema>(
+    schema: T,
+    options?: StorageSignalOptions
+): StorageResult<T> {
+    if ( options?.encrypt ) {
+        console.warn(`
+⚠️  typed-storage: la opción encrypt está activada.
+
+Encriptar valores en localStorage no es seguro — 
+la clave vive en el frontend y cualquier dev puede accederla.
+
+Para datos sensibles usa:
+    ✅ httpOnly cookies (tokens, sesiones)
+    ✅ Variables de entorno en el servidor
+  
+typed-storage es ideal para:
+    ✅ Preferencias de UI (theme, language)
+    ✅ Estado de navegación
+    ❌ Tokens de autenticación
+    ❌ Datos financieros o personales sensibles
+        `);
+    }
+
+    const result: any = [];
+
+    let keys = Object.keys(schema);
+    for ( let key of keys ) {
+        result[key] = createStorageSignal(key, schema[key], options)
+    }
+
+    result.clear = () => {
+        for ( let key of keys ) {
+            result[key].reset(); // Limpiamos todas las keys del schema
+        }
+    }
+
+    return result as StorageResult<T>;
+}

package/src/index.ts

@@ -0,0 +1,2 @@
+export { createStorage } from './create-storage.js';
+export type { StorageSignal, StorageSchema, StorageResult, StorageSignalOptions } from './types.js';

package/src/memory-storage.ts

@@ -0,0 +1,16 @@
+// Si localStorage falla → usamos esto transparentemente
+export class MemoryStorage {
+    private data = new Map<string, string>();
+    
+    getItem(key: string): string | null {
+        return this.data.get(key) ?? null;
+    }
+    
+    setItem(key: string, value: string): void {
+        this.data.set(key, value);
+    }
+    
+    removeItem(key: string): void {
+        this.data.delete(key);
+    }
+}

package/src/storage-signal.test.ts

@@ -0,0 +1,87 @@
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+import { createStorageSignal } from './storage-signal.js';
+
+describe('createStorageSignal', () => {
+     // Limpia localStorage antes de cada test
+    beforeEach(() => {
+        localStorage.clear();
+    });
+
+    it('debe retornar el initialValue si no hay nada en localStorage', () => {
+        // 1. ARRANGE — preparas los datos
+        const signal = createStorageSignal('theme', 'dark');
+        
+        // 2. ACT — ejecutas la acción
+        const value = signal();
+
+        // 3. ASSERT — verificas el resultado
+        expect(value).toBe('dark');
+    });
+
+    it('debe guardar el valor en localStorage al llamar set()', () => {
+        const theme = createStorageSignal('theme', 'dark');
+        
+        theme.set('light');
+        expect(localStorage.getItem('theme')).not.toBeNull(); // que exista
+    });
+
+    it('debe volver al initialValue al llamar reset()', () => {
+        const theme = createStorageSignal('theme', 'dark');
+        theme.set('light');
+        theme.reset();
+
+        expect(theme()).toBe('dark'); // Debe ser dark
+    });
+
+    it('debe aplicar el prefix a la key en localStorage', () => {
+        const theme = createStorageSignal('theme', 'dark', { prefix: 'app' });
+        theme.set('light');
+        
+        expect(localStorage.getItem('app:theme')).not.toBeNull(); // que exista
+        expect(localStorage.getItem('theme')).toBeNull(); // que no exista
+    });
+});
+
+describe('has y remove', () => {
+    beforeEach(() => localStorage.clear());
+
+    it('has() debe retornar true si la key existe', () => {
+        const theme = createStorageSignal('theme', 'dark');
+        theme.set('light');
+        expect(theme.has()).toBeTruthy();
+    });
+
+    it('has() debe retornar false si la key no existe', () => {
+        const theme = createStorageSignal('theme', 'dark');
+        
+        expect(theme.has()).toBeFalsy();
+    });
+
+    it('remove() debe eliminar la key del localStorage', () => {
+        const theme = createStorageSignal('theme', 'dark');
+        theme.set('light');
+        theme.remove();
+        expect(localStorage.getItem('theme')).toBeNull();
+        expect(theme()).toBe('dark');
+    });
+});
+
+describe('onChange', () => {
+    beforeEach(() => localStorage.clear());
+
+    it('debe llamar el callback cuando se llama set()', () => {
+        const theme = createStorageSignal('theme', 'dark');
+        const callback = vi.fn();
+        theme.onChange(callback);
+        theme.set('light');
+        expect(callback).toHaveBeenCalledWith('light');
+    });
+
+    it('debe llamar el callback cuando se llama reset()', () => {
+        const theme = createStorageSignal('theme', 'dark');
+        const callback = vi.fn();
+        theme.onChange(callback);
+        theme.reset();
+        expect(callback).toHaveBeenCalledWith('dark');
+    });
+});

package/src/storage-signal.ts

@@ -0,0 +1,145 @@
+// Tipos
+import { StorageSignal, StorageSignalOptions } from "./types.js";
+
+// Memory
+import { MemoryStorage } from "./memory-storage.js";
+
+// Interface
+interface StoredValue<T> {
+    value: T;
+    expiresAt?: number; // undefined = sin expiración
+}
+
+// Asegurar el parseo del JSON, verificamos si el valor que se obtiene es del tipo T
+// Si no es del tipo T entonces retornamos el valor inicial
+function safeParseJSON<T>(value: string, fallback: T): StoredValue<T> {
+    if (!value) return { value: fallback };
+
+    try {
+        const parsed = JSON.parse(value);
+
+        // Si tiene la forma StoredValue -> ya viene con TTL
+        if ( parsed && typeof parsed === 'object' && 'value' in parsed ) {
+            return parsed as StoredValue<T>;
+        }
+
+        // Si es un valor simple (datos sin TTL) -> envolvemos
+        return { value: JSON.parse(value) as T };
+    } catch (error) {
+        console.warn(`Error al parsear JSON de localStorage. Usando valor por defecto.`, error);
+        
+        // Si hay error por el parse digamos entonces regresa el valor inicial sin TTL
+        return { value: fallback };
+    }
+} 
+
+// Obtenemos el valor del localStorage o SessionStorage, si sale error entonces se usará el MemoryStorage
+function getStorage(type: 'local' | 'session'): Storage | MemoryStorage {
+    try {
+        const sto = type === 'session' ? sessionStorage : localStorage;
+
+        // Prueba que realmente funciona escribiendo y borrando
+        sto.setItem('__typed_storage_test__', '1');
+        sto.removeItem('__typed_storage_test__');
+
+        return sto;
+    } catch {
+        console.warn('Storage no disponible, usando memoria como fallback');
+        return new MemoryStorage();
+    }
+}
+
+// Creamos el Storage en modo signal
+export function createStorageSignal<T>(
+    key: string,
+    initialValue: T,
+    options?: StorageSignalOptions
+): StorageSignal<T> {
+    // Obtenemos que tipo de storage será
+    let sto = getStorage(options?.storage ?? 'local');
+
+    // Verificamos si tiene opciones
+    if ( options?.prefix ) {
+        key = `${options.prefix}:${key}`;
+    }
+
+    const savedData = sto.getItem(key);
+    let currentValue: T;
+
+    const listeners: Array<(value: T) => void> = [];
+    function notify ( value: T ): void {
+        listeners.forEach(cb => cb(value));
+    }
+
+    // Asegurarnos que el item obtenido sea de tipo StoredValue
+    const item = safeParseJSON(savedData!, initialValue);
+
+    if ( item.expiresAt === undefined ) {
+        currentValue =  !savedData ? initialValue : item.value;
+    } else {
+        if ( Date.now() <= item.expiresAt! ) {
+            currentValue = item.value;
+        } else {
+            sto.removeItem(key);
+            currentValue = initialValue;
+        }
+    }
+
+    const signalBase = function(): T {
+        return currentValue;
+    }
+
+    // Verificamos si tiene sincronizacion activo
+    if ( options?.sync ) {
+        window.addEventListener('storage', (event: StorageEvent) => {
+            // Si el key es igual a nuestro key
+            if ( event.key === key ) {
+                // Si el nuevo valor es null entonces se le asigna el initialValue
+                if ( event.newValue === null ) {
+                    notify(initialValue);
+                    return  currentValue = initialValue;
+                } 
+
+                // Parseamos el nuevo valor
+                const item = safeParseJSON(event.newValue, initialValue);
+
+                notify(item.value as T);
+                return currentValue = item.value as T;
+            }
+        })
+    }
+
+    signalBase.set = function ( newValue: T ): void {
+        currentValue = newValue;
+        notify(currentValue);
+        sto.setItem(
+            key, 
+            JSON.stringify({
+                value: newValue,
+                expiresAt: options?.ttl ? Date.now() + options.ttl : undefined
+            })
+        );
+    }
+
+    signalBase.reset = function(): void {
+        currentValue = initialValue;
+        notify(currentValue);
+        sto.setItem(key, JSON.stringify(initialValue));
+    }
+
+    signalBase.has = function(): boolean {
+        return !!sto.getItem(key);
+    }
+
+    signalBase.remove = function(): void {
+        sto.removeItem(key);
+        currentValue = initialValue;
+        notify(currentValue);
+    }
+
+    signalBase.onChange = function(callback: (value: T) => void): void {
+        listeners.push(callback);
+    }
+
+    return signalBase as StorageSignal<T>;
+}

package/src/types.ts

@@ -0,0 +1,28 @@
+// Opciones de Storage
+export interface StorageSignalOptions {
+    prefix?: string;
+    storage?: 'local' | 'session';
+    ttl?: number;
+    sync?: boolean;
+    encrypt?: boolean;
+}
+
+// Objeto reactivo con getter, setter y reset
+export interface StorageSignal<T> {
+    (): T,                      // Leer el valor (como signal)
+    set(value: T): void;        // escribir y persistir
+    reset(): void;              // volver al valor inicial
+    remove(): void;             // borra la key del storage
+    has(): boolean;             // verifica si existe en storage
+    onChange(callback: ( value: T ) => void): void;
+}
+
+// El schema que el usuario define
+export type StorageSchema = Record<string, any>;
+
+// El resultado de createStorage - mapea cada key a su StorageSignal
+export type StorageResult<T extends StorageSchema> = {
+    [K in keyof T]: StorageSignal<T[K]>
+} & {
+    clear(): void;
+}

package/tsconfig.json

@@ -0,0 +1,35 @@
+{
+  // Visit https://aka.ms/tsconfig to read more about this file
+  "compilerOptions": {
+    // File Layout
+    "rootDir": "./src",
+    "outDir": "./dist",
+
+    // Environment Settings
+    // See also https://aka.ms/tsconfig/module
+    "module": "esnext", 
+    "target": "ES2020", 
+    "moduleResolution": "bundler",
+
+    // Other Outputs
+    "sourceMap": false, // Para saber en que línea está el problema o dato que arroja en consola en mi TypeScript
+    "declaration": true,
+    "declarationDir": "./dist",
+    "removeComments": true, // Esto es para remover o quitar los comentarios que coloque en el TS y que no aparezcan en el JS
+    "esModuleInterop": true,
+    "experimentalDecorators": true,
+
+    // Style Options
+    // # Recomendación siempre dejemosle en true
+    "strictNullChecks": true, // Para que un valor siempre tenga un valor
+
+    // Recommended Options
+    "strict": true, 
+  },
+  "include": [
+    "./src/"
+  ],
+  "exclude": [
+    "src/**/*.test.ts"
+  ]
+}

package/vitest.config.ts

@@ -0,0 +1,8 @@
+import { defineConfig } from 'vitest/config';
+
+export default defineConfig({
+    test: {
+        environment: 'jsdom',
+        globals: true,
+    }
+});