LocalStorage/SessionStorage
localStorage survives a refresh. sessionStorage dies with the tab. JSON.parse the strings.
10 programs · open one, then the next
Start with LocalStorage Basics- 01LocalStorage BasicsBeginnerStore and retrieve data in localStorageOpen example →js// Method 1: Set item localStorage.setItem('username', 'John'); localStorage.setItem('age', '30'); localStorage.setItem('isLoggedIn', 'true');
- 02SessionStorage BasicsBeginnerStore and retrieve data in sessionStorageOpen example →js// Method 1: Set item sessionStorage.setItem('sessionId', 'abc123'); sessionStorage.setItem('pageViews', '5'); sessionStorage.setItem('lastPage', '/home');
- 03Storage Event ListenerIntermediateListen to storage changes across tabsOpen example →js// Method 1: Listen to storage changes window.addEventListener('storage', function(e) { console.log('Storage changed'); console.log('Key:', e.key);
- 04Storage JSON HandlingIntermediateStore and retrieve complex objects using JSONOpen example →js// Method 1: Store object const user = { id: 1, name: 'John Doe',
- 05Storage Quota ManagementIntermediateCheck and manage storage quotaOpen example →js// Method 1: Check storage quota async function getStorageQuota() { if ('storage' in navigator && 'estimate' in navigator.storage) { const estimate = await navigator.storage.estimate();
- 06Storage UtilitiesIntermediateUtility functions for storage operationsOpen example →js// Method 1: Storage helper class class StorageUtil { constructor(storage = localStorage) { this.storage = storage;
- 07Storage MigrationAdvancedMigrate data between storage formatsOpen example →js// Method 1: Simple migration function migrateStorage() { const oldData = localStorage.getItem('oldKey'); if (oldData) {
- 08Storage Session ManagementIntermediateManage user sessions with storageOpen example →js// Method 1: Basic session management class SessionManager { constructor() { this.sessionKey = 'userSession';
- 09Storage Custom HooksAdvancedCreate reusable storage hooksOpen example →js// Method 1: useLocalStorage hook (React-like) function useLocalStorage(key, initialValue) { const [storedValue, setStoredValue] = (function() { try {
- 10Storage Cross-Tab CommunicationAdvancedCommunicate between browser tabs using storageOpen example →js// Method 1: Basic cross-tab messaging class CrossTabMessenger { constructor(channel) { this.channel = channel;