Modern web applications need to store data in the browser.

Examples:

• user preferences

• authentication state

• theme settings

• cart items

JavaScript provides multiple ways to store data on the client side.

In this article, you’ll learn:

• what browser storage is

• localStorage

• sessionStorage

• cookies

• differences between them

• common mistakes

• best practices

Let’s start from the basics.

---

What Is Browser Storage?

Browser storage allows web applications to save data in the user’s browser so it can be accessed later.

This data:

• persists across page reloads

• reduces server requests

• improves performance

---

localStorage

---

What Is localStorage?

localStorage stores data permanently (until manually cleared).

✔ Data persists after browser restart
✔ Stored as key–value pairs
❌ Only strings allowed

---

Basic Usage

localStorage.setItem("name", "Alex");

Retrieve data:

const name = localStorage.getItem("name");

Remove item:

localStorage.removeItem("name");

Clear all:

localStorage.clear();

---

Storing Objects in localStorage

You must convert objects to JSON.

const user = { name: "Alex", age: 25 };

localStorage.setItem("user", JSON.stringify(user));

Retrieve:

const storedUser = JSON.parse(localStorage.getItem("user"));

---

sessionStorage

---

What Is sessionStorage?

sessionStorage stores data for a single browser session.

✔ Cleared when tab is closed
✔ Same API as localStorage
✔ Useful for temporary data

---

Example

sessionStorage.setItem("token", "abc123");

When the tab closes, data is removed.

---

localStorage vs sessionStorage

---

Cookies

---

What Are Cookies?

Cookies store small pieces of data sent with every HTTP request.

✔ Used for authentication
✔ Can have expiration dates
❌ Limited size (~4KB)

---

Setting a Cookie

document.cookie = "username=Alex; expires=Fri, 31 Dec 2025 12:00:00 UTC; path=/";

---

Reading Cookies

console.log(document.cookie);

Cookies are returned as a string.

---

Deleting a Cookie

document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/";

---

Cookies vs localStorage

---

Security Considerations

---

❗ Never Store Sensitive Data

❌ Passwords
❌ Credit card info
❌ JWT tokens (in many cases)

Use:

• HttpOnly cookies

• server-side sessions

---

Common Mistakes

---

❌ Forgetting JSON conversion

localStorage.setItem("user", user); // wrong

---

❌ Storing large data

Browser storage is limited.

---

❌ Assuming storage is shared across domains

Storage is origin-specific.

---

Best Practices

✔ Use localStorage for preferences
✔ Use sessionStorage for temporary data
✔ Use cookies for server communication
✔ Always stringify objects
✔ Clear unused data

---

When to Use What?

---

Mental Model

Browser storage is like a small database inside the browser.

Use the right storage for the right job.

---

Conclusion

Understanding browser storage helps you:

• improve performance

• enhance user experience

• build modern web apps

Once you know the differences, choosing becomes easy.