Basic Usage

These examples demonstrate the fundamental features of StorageManager.js. Each example can be opened in CodePen for live experimentation.

Simple Counter

A basic counter that persists across page reloads.

// Create storage instance
const storage = new StorageManager(false, {
  namespace: 'counterApp',
  enableCompression: false
});

// Initialize counter
let count = await storage.get('count') || 0;

// Update display
function updateDisplay() {
  document.getElementById('count').textContent = count;
}

// Increment button
document.getElementById('increment').addEventListener('click', async () => {
  count++;
  await storage.set('count', count);
  updateDisplay();
});

// Reset button
document.getElementById('reset').addEventListener('click', async () => {
  count = 0;
  await storage.remove('count');
  updateDisplay();
});

updateDisplay();

Open in CodePen

---

User Preferences

Store and retrieve user preferences like theme and language.

const storage = new StorageManager(false, {
  namespace: 'preferences',
  enableCompression: false
});

// Load saved preferences
async function loadPreferences() {
  const theme = await storage.get('theme') || 'light';
  const lang = await storage.get('language') || 'en';

  document.getElementById('theme').value = theme;
  document.getElementById('language').value = lang;
  applyTheme(theme);
}

// Save preferences
async function savePreferences() {
  const theme = document.getElementById('theme').value;
  const lang = document.getElementById('language').value;

  await storage.set('theme', theme);
  await storage.set('language', lang);
  applyTheme(theme);

  alert('Preferences saved!');
}

function applyTheme(theme) {
  document.body.className = theme;
}

loadPreferences();

Open in CodePen

---

Form Auto-Save

Automatically save form data as the user types.

const storage = new StorageManager(false, {
  namespace: 'formApp',
  enableCompression: false
});

// Load saved form data
async function loadFormData() {
  const data = await storage.get('formData');
  if (data) {
    document.getElementById('name').value = data.name || '';
    document.getElementById('email').value = data.email || '';
    document.getElementById('message').value = data.message || '';
  }
}

// Auto-save on input
function setupAutoSave() {
  const inputs = ['name', 'email', 'message'];

  inputs.forEach(id => {
    document.getElementById(id).addEventListener('input', async () => {
      const data = {
        name: document.getElementById('name').value,
        email: document.getElementById('email').value,
        message: document.getElementById('message').value
      };
      await storage.set('formData', data);
      console.log('Form auto-saved');
    });
  });
}

// Clear form
async function clearForm() {
  document.getElementById('name').value = '';
  document.getElementById('email').value = '';
  document.getElementById('message').value = '';
  await storage.remove('formData');
  alert('Form cleared!');
}

loadFormData();
setupAutoSave();

Open in CodePen

---

Key Listing

Display all stored keys and their values.

const storage = new StorageManager(false, {
  namespace: 'demo',
  enableCompression: false
});

// Add some sample data
async function addSampleData() {
  await storage.set('user', { name: 'Alice' });
  await storage.set('theme', 'dark');
  await storage.set('count', 42);
  await displayKeys();
}

// Display all keys
async function displayKeys() {
  const keys = await storage.keys();
  const list = document.getElementById('keyList');

  list.innerHTML = '';

  for (const key of keys) {
    const value = await storage.get(key);
    const li = document.createElement('li');
    li.innerHTML = `<strong>${key}:</strong> ${JSON.stringify(value)}`;
    list.appendChild(li);
  }
}

displayKeys();

Open in CodePen

Tip

These examples use enableCompression: false for simplicity. In production, you can leave compression enabled (default) to save storage space.

Next Steps

Ready for more complex scenarios? Check out the Advanced Features examples.