localStorage and sessionStorage in JavaScript

// Storing data (both accept only strings)
localStorage.setItem('theme', 'dark');
sessionStorage.setItem('draftId', '12345');

// Reading data
console.log(localStorage.getItem('theme'));    // 'dark'
console.log(sessionStorage.getItem('missing')); // null if key doesn't exist

// Removing data
localStorage.removeItem('theme');
sessionStorage.clear(); // removes ALL sessionStorage keys

// Storing objects/arrays -- must serialize
const user = { id: 1, name: 'Ada' };
localStorage.setItem('user', JSON.stringify(user));
const restored = JSON.parse(localStorage.getItem('user'));
console.log(restored.name); // 'Ada'

// Listening for changes from OTHER tabs (localStorage only)
window.addEventListener('storage', (event) => {
  console.log(event.key, event.oldValue, event.newValue);
});

const settings = { theme: 'dark', fontSize: 14 };

// Common mistake: storing an object directly
localStorage.setItem('settingsRaw', settings);
console.log(localStorage.getItem('settingsRaw'));

// Correct approach: serialize first
localStorage.setItem('settings', JSON.stringify(settings));
const loaded = JSON.parse(localStorage.getItem('settings'));
console.log(loaded.theme, loaded.fontSize);

// sessionStorage for a one-time wizard step (cleared when tab closes)
sessionStorage.setItem('wizardStep', '2');
console.log(sessionStorage.getItem('wizardStep'));

// Attempting to read a never-set key
console.log(localStorage.getItem('doesNotExist'));

Console output:
[object Object]          // settingsRaw stored without JSON.stringify
dark 14                  // loaded.theme, loaded.fontSize after proper JSON round-trip
2                         // sessionStorage.getItem('wizardStep')
null                      // localStorage.getItem('doesNotExist') -- key never set

Behavior notes:
- If the tab is closed and reopened (new session), sessionStorage.getItem('wizardStep')
  would return null -- sessionStorage does not survive tab closure.
- If the entire browser is closed and reopened, localStorage.getItem('settings')
  would still return the JSON string '{"theme":"dark","fontSize":14}' -- localStorage persists.