JavaScript Web Storage

JavaScript Web Storage

JavaScript Web Storage allows you to store data locally in the browser.
It is more secure and easier to use than cookies.

Two main types:

LocalStorage – Permanent storage (data persists after closing the browser)
SessionStorage – Temporary storage (data deleted after closing the tab)

LocalStorage

Set Item

Get Item

Remove Item

Clear All Items

Store Object in LocalStorage

SessionStorage

Set Item

Get Item

Remove Item

Clear All Items

Data in sessionStorage is deleted automatically when the tab/window is closed.

Key Methods Comparison

Method	LocalStorage	SessionStorage
`setItem(key, value)`	Yes	Yes
`getItem(key)`	Yes	Yes
`removeItem(key)`	Yes	Yes
`clear()`	Yes	Yes
Data Lifetime	Permanent	Tab/session only

Loop Through Storage Items

Practical Example: Save Form Data

<input type="text" id="username" placeholder="Enter name">
<button onclick="saveData()">Save</button>

<script>
function saveData() {
let user = document.getElementById("username").value;
localStorage.setItem("username", user);
alert("Saved!");
}

// Load saved data
document.getElementById("username").value = localStorage.getItem("username") || "";
</script>

function saveData() {

let user = document.getElementById("username").value;

localStorage.setItem("username", user);

alert("Saved!");

}

// Load saved data

document.getElementById("username").value = localStorage.getItem("username") || "";

</script>

Best Practices

Use JSON.stringify and JSON.parse for objects/arrays.
Avoid storing sensitive info (passwords, tokens) in plain text.
Limit data size (LocalStorage usually ~5MB per domain).

Summary Table

Feature	LocalStorage	SessionStorage
Lifetime	Persistent	Only for current tab
Accessible across tabs	Yes	No
Methods	`setItem`, `getItem`, `removeItem`, `clear`	Same
Data Type	Strings (use JSON for objects)	Strings (use JSON for objects)

JavaScript Web Storage