add-local-storage

name: add-local-storage description: >- Add client-side data persistence to a Meta Display Glasses webapp using the W3C Web Storage API (localStorage and sessionStorage). Use when the user wants to save settings, cache data, persist state, or store user preferences. argument-hint: "[purpose: settings|cache|state|preferences]"

Add Local Storage to Meta Display Glasses WebApp

Add client-side data persistence using the standard W3C Web Storage API. Supports localStorage (persists across sessions) and sessionStorage (cleared when the session ends). No SDK required.

Prerequisites

• Existing webapp created via /create-webapp

Storage Types

Both APIs share the same interface and store string key-value pairs.

Steps

1. Gather Information

Ask the user:

• What data? Settings, preferences, app state, cached API responses?
• Which storage? Persistent (localStorage) or session-only (sessionStorage)?
• Data shape? Single values or structured objects?

2. Add Storage Helpers

In app.js, add helpers for reading and writing structured data:

var STORAGE_KEY = 'mdg_myapp';

function saveData(data) {
  localStorage.setItem(STORAGE_KEY, JSON.stringify(data));
}

function loadData() {
  try {
    var saved = localStorage.getItem(STORAGE_KEY);
    return saved ? JSON.parse(saved) : null;
  } catch (e) {
    return null;
  }
}

function clearData() {
  localStorage.removeItem(STORAGE_KEY);
}

3. Wire Up to App State

Load saved data on startup and save on changes:

// On init
var saved = loadData();
if (saved) {
  state.data = saved;
}

// After any state change
state.data.score = 100;
saveData(state.data);

4. Add Settings UI (if needed)

For user-facing settings with persistence:

case 'toggle-dark-mode':
  state.data.darkMode = !state.data.darkMode;
  document.body.classList.toggle('light-mode', !state.data.darkMode);
  saveData(state.data);
  break;

case 'reset-data':
  clearData();
  state.data = {};
  showToast('Data cleared');
  break;

Patterns

Save User Preferences

function savePreference(key, value) {
  var prefs = loadData() || {};
  prefs[key] = value;
  saveData(prefs);
}

function getPreference(key, defaultValue) {
  var prefs = loadData() || {};
  return prefs[key] !== undefined ? prefs[key] : defaultValue;
}

Cache API Responses

function cacheResponse(url, data, ttlMs) {
  var entry = { data: data, timestamp: Date.now(), ttl: ttlMs };
  localStorage.setItem('cache_' + url, JSON.stringify(entry));
}

function getCachedResponse(url) {
  try {
    var entry = JSON.parse(localStorage.getItem('cache_' + url));
    if (entry && Date.now() - entry.timestamp < entry.ttl) {
      return entry.data;
    }
  } catch (e) {}
  return null;
}

Session-Only State

Use sessionStorage for data that should not survive a restart:

// Save temporary navigation context
sessionStorage.setItem('returnScreen', 'home');

// Restore on load
var returnTo = sessionStorage.getItem('returnScreen') || 'home';

Verify

• Data persists after page refresh (localStorage)
• Session data clears when session ends (sessionStorage)
• App handles missing/corrupt stored data gracefully
• Reset/clear action works

Related Skills

• /add-ui — Add settings screens and toggle buttons
• /connect-api — Fetch data to cache locally