Storage Custom Hooks in JavaScript

1// Method 1: useLocalStorage hook (React-like)
2function useLocalStorage(key, initialValue) {
3    const [storedValue, setStoredValue] = (function() {
4        try {
5            const item = window.localStorage.getItem(key);
6            return item ? JSON.parse(item) : initialValue;
7        } catch (error) {
8            return initialValue;
9        }
10    })();
11    
12    const setValue = function(value) {
13        try {
14            setStoredValue(value);
15            window.localStorage.setItem(key, JSON.stringify(value));
16        } catch (error) {
17            console.error('Error setting localStorage:', error);
18        }
19    };
20    
21    return [storedValue, setValue];
22}
23
24// Usage
25const [name, setName] = useLocalStorage('name', '');
26setName('John');
27console.log('Name:', name);
28
29// Method 2: useSessionStorage hook
30function useSessionStorage(key, initialValue) {
31    const [storedValue, setStoredValue] = (function() {
32        try {
33            const item = window.sessionStorage.getItem(key);
34            return item ? JSON.parse(item) : initialValue;
35        } catch (error) {
36            return initialValue;
37        }
38    })();
39    
40    const setValue = function(value) {
41        try {
42            setStoredValue(value);
43            window.sessionStorage.setItem(key, JSON.stringify(value));
44        } catch (error) {
45            console.error('Error setting sessionStorage:', error);
46        }
47    };
48    
49    return [storedValue, setValue];
50}
51
52// Method 3: useStorage with options
53function useStorage(key, initialValue, options = {}) {
54    const storage = options.storage || localStorage;
55    const serializer = options.serializer || JSON;
56    
57    const [storedValue, setStoredValue] = (function() {
58        try {
59            const item = storage.getItem(key);
60            return item ? serializer.parse(item) : initialValue;
61        } catch (error) {
62            return initialValue;
63        }
64    })();
65    
66    const setValue = function(value) {
67        try {
68            setStoredValue(value);
69            storage.setItem(key, serializer.stringify(value));
70        } catch (error) {
71            console.error('Storage error:', error);
72        }
73    };
74    
75    const removeValue = function() {
76        try {
77            storage.removeItem(key);
78            setStoredValue(initialValue);
79        } catch (error) {
80            console.error('Remove error:', error);
81        }
82    };
83    
84    return [storedValue, setValue, removeValue];
85}
86
87// Method 4: Storage hook with expiration
88function useStorageWithExpiry(key, initialValue, ttl) {
89    const [storedValue, setStoredValue] = (function() {
90        try {
91            const item = localStorage.getItem(key);
92            if (!item) return initialValue;
93            
94            const parsed = JSON.parse(item);
95            if (Date.now() > parsed.expiry) {
96                localStorage.removeItem(key);
97                return initialValue;
98            }
99            
100            return parsed.value;
101        } catch (error) {
102            return initialValue;
103        }
104    })();
105    
106    const setValue = function(value) {
107        try {
108            const item = {
109                value: value,
110                expiry: Date.now() + ttl
111            };
112            setStoredValue(value);
113            localStorage.setItem(key, JSON.stringify(item));
114        } catch (error) {
115            console.error('Storage error:', error);
116        }
117    };
118    
119    return [storedValue, setValue];
120}
121
122// Method 5: Storage hook with sync
123function useSyncedStorage(key, initialValue) {
124    const [storedValue, setStoredValue] = (function() {
125        try {
126            const item = localStorage.getItem(key);
127            return item ? JSON.parse(item) : initialValue;
128        } catch (error) {
129            return initialValue;
130        }
131    })();
132    
133    // Listen for changes from other tabs
134    window.addEventListener('storage', function(e) {
135        if (e.key === key) {
136            setStoredValue(JSON.parse(e.newValue));
137        }
138    });
139    
140    const setValue = function(value) {
141        try {
142            setStoredValue(value);
143            localStorage.setItem(key, JSON.stringify(value));
144        } catch (error) {
145            console.error('Storage error:', error);
146        }
147    };
148    
149    return [storedValue, setValue];
150}