What's the difference between localStorage and sessionStorage?

// localStorage — forever
localStorage.setItem('name', 'John');
// Even after page reload and browser close
// data will remain
 
// sessionStorage — until tab close
sessionStorage.setItem('temp', 'temporary data');
// After tab close data will disappear

// Save data
localStorage.setItem('theme', 'dark');
localStorage.setItem('language', 'en');
 
// You can close browser, restart computer
// Data will still be here!
console.log(localStorage.getItem('theme')); // 'dark'

// Save temporary data
sessionStorage.setItem('formStep', '2');
sessionStorage.setItem('tempData', 'something temporary');
 
// After tab close — everything disappears!
// When opening new tab — storage is empty

// ✅ User settings
localStorage.setItem('theme', 'dark');
localStorage.setItem('language', 'en');
 
// ✅ Auth tokens (careful!)
localStorage.setItem('token', 'abc123');
 
// ✅ Game progress
localStorage.setItem('level', '5');

// ✅ Form data during filling
sessionStorage.setItem('formData', JSON.stringify({name: 'John'}));
 
// ✅ Temporary page states
sessionStorage.setItem('scrollPosition', '100');
 
// ✅ Data for one session
sessionStorage.setItem('visitCount', '3');

// Both work the same way
localStorage.setItem('key', 'value');
sessionStorage.setItem('key', 'value');
 
localStorage.getItem('key');
sessionStorage.getItem('key');
 
localStorage.removeItem('key');
sessionStorage.removeItem('key');

// Both store only strings!
localStorage.setItem('number', 42); // Saved as '42'
localStorage.setItem('object', {name: 'John'}); // Saved as '[object Object]'
 
// For objects use JSON
localStorage.setItem('user', JSON.stringify({name: 'John'}));
const user = JSON.parse(localStorage.getItem('user'));

// ❌ Mistake — think sessionStorage is also forever
sessionStorage.setItem('importantSetting', 'dark');
// After tab close setting disappears!
 
// ✅ Correct — use localStorage for important things
localStorage.setItem('importantSetting', 'dark');

// ❌ Bad — localStorage can be easily read
localStorage.setItem('password', '123456');
 
// ✅ Better — use secure methods
// or at least sessionStorage (less chance of leak)
sessionStorage.setItem('token', 'abc123');