LocalStorage Basics in JavaScript

Store and retrieve data in localStorage

BeginnerLocalStorage/SessionStorageExample 1 of 10

localstorage-basics.js

1// Method 1: Set item
2localStorage.setItem('username', 'John');
3localStorage.setItem('age', '30');
4localStorage.setItem('isLoggedIn', 'true');
5
6// Method 2: Get item
7const username = localStorage.getItem('username');
8console.log('Username:', username); // "John"
9
10const age = localStorage.getItem('age');
11console.log('Age:', age); // "30" (string)
12
13// Method 3: Remove item
14localStorage.removeItem('age');
15
16// Method 4: Clear all
17// localStorage.clear();
18
19// Method 5: Check if key exists
20if (localStorage.getItem('username')) {
21    console.log('Username exists');
22}
23
24// Method 6: Get all keys
25const keys = Object.keys(localStorage);
26console.log('All keys:', keys);
27
28// Method 7: Get all items
29for (let i = 0; i < localStorage.length; i++) {
30    const key = localStorage.key(i);
31    const value = localStorage.getItem(key);
32    console.log(key + ':', value);
33}
34
35// Method 8: Store object (stringify)
36const user = {
37    name: 'John',
38    age: 30,
39    email: 'john@example.com'
40};
41
42localStorage.setItem('user', JSON.stringify(user));
43
44// Retrieve object (parse)
45const storedUser = JSON.parse(localStorage.getItem('user'));
46console.log('User:', storedUser);
47
48// Method 9: Store array
49const items = ['apple', 'banana', 'orange'];
50localStorage.setItem('items', JSON.stringify(items));
51
52const storedItems = JSON.parse(localStorage.getItem('items'));
53console.log('Items:', storedItems);
54
55// Method 10: Check storage availability
56function isLocalStorageAvailable() {
57    try {
58        const test = '__localStorage_test__';
59        localStorage.setItem(test, test);
60        localStorage.removeItem(test);
61        return true;
62    } catch (e) {
63        return false;
64    }
65}
66
67if (isLocalStorageAvailable()) {
68    console.log('LocalStorage is available');
69} else {
70    console.log('LocalStorage is not available');
71}

Output

Username: John
Age: 30
Username exists
All keys: ["username", "age", "isLoggedIn"]
username: John
age: 30
isLoggedIn: true
User: { name: 'John', age: 30, email: 'john@example.com' }
Items: ["apple", "banana", "orange"]
LocalStorage is available

What's going on

localStorage persists data across sessions.

Methods

setItem(key, value): Store data

getItem(key): Retrieve data

removeItem(key): Remove item

clear(): Remove all

key(index): Get key at index

length: Number of items

Important Notes

Stores strings only

Use JSON.stringify/parse for objects

Persists until cleared

Domain-specific

~5-10MB limit

Use Cases

User preferences

Shopping cart

Form data

Cache data

Best Practices

Check availability

Handle errors

Use try-catch

Validate data

NextSessionStorage Basics