We’ll explore each storage type with a few key points in mind:
- How long the data lasts (Lifespan)
- How much data you can store (Size)
- How the data is accessed (Accessibility)
Let’s get to it.
LocalStorage
If we think of the browser as a mind, localStorage is its long-term memory. Anything you put in localStorage will stick around until you deliberately remove it or clear your browsing data. This makes it a great choice for data you want to persist across sessions, even after a browser restart.
- Lifespan: localStorage is persistent. The data stored here remains until it’s explicitly deleted, either by the user (in their browser settings) or through code.
- Size: localStorage provides around 5-10 MB of storage (varies by browser), which is significantly more than cookies. This makes it suitable for storing larger datasets.
- Accessibility: Data in localStorage is only accessible from the client side (within the browser). This means it’s not automatically sent to the server with each request, which helps reduce network load and improves efficiency.
When to use localStorage: You’ll want to use localStorage when you need to store non-sensitive data that persists over time. Think user preferences, game progress, or form settings. However, avoid storing sensitive information like passwords or tokens, since it lacks robust security controls.
Basic Example of localStorage
Here's how to use localStorage to save a user’s theme preference:
// Save theme preference
localStorage.setItem("theme", "dark");
// Retrieve theme preference
let theme = localStorage.getItem("theme");
console.log(theme); // Output: "dark"
// Remove theme preference
localStorage.removeItem("theme");
In this example:
- setItem stores data with a key ("theme") and a value ("dark").
- getItem retrieves data based on the key.
- removeItem deletes data associated with the key.
Cookies
Cookies have been around since the dawn of the internet and are still widely used for their unique ability to communicate with the server. Unlike localStorage and sessionStorage, cookies are sent with every HTTP request, which is especially useful for tracking sessions, authentication, and preferences that need server-side awareness.
- Lifespan: Cookies offer flexibility with an expiration setting. You can specify an expiry date (e.g., a week, month, or year), or you can create “session cookies” that disappear when the browser closes.
- Size: Cookies are quite limited in size, typically allowing around 4 KB of data. This limitation encourages minimal, efficient storage.
- Accessibility: Cookies are accessible to both the client (JavaScript) and the server, which makes them ideal for data that both need to access. The data in cookies is automatically sent with each server request, allowing seamless session management between client and server.
When to use cookies: Cookies are essential for tasks like authentication and session tracking where server access is required. They’re commonly used to keep users logged in, manage user sessions, or save user preferences that need server validation. However, avoid using cookies for larger datasets or data that doesn’t need server access, as they can increase request load and impact performance.
Setting Cookies in JavaScript
Here’s how to create, read, and delete cookies:
// Set a cookie
document.cookie = "username=JohnDoe; expires=Fri, 31 Dec 2024 23:59:59 GMT; path=/";
// Read cookies
let cookies = document.cookie;
console.log(cookies); // Output: "username=JohnDoe"
// Delete a cookie (set expiration date in the past)
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/";
In this example:
- The expires attribute sets when the cookie will expire, while path defines the scope of the cookie.
- document.cookie retrieves all cookies as a single string.
SessionStorage
If localStorage is like long-term memory, then sessionStorage is more like short-term memory. Data in sessionStorage only exists while the current browser tab or window is open. As soon as the user closes the browser or tab, the data vanishes, making it ideal for storing data that doesn’t need to persist beyond a single session.
- Lifespan: sessionStorage lasts only for the duration of the session. When the tab or window is closed, the stored data is erased.
- Size: Like localStorage, sessionStorage allows around 5-10 MB, which is generally plenty for temporary storage needs.
- Accessibility: sessionStorage data is only accessible to JavaScript running in the same browser tab. Unlike localStorage, each tab or window has its own sessionStorage, making it useful for isolated data handling across different windows.
When to use sessionStorage: It’s ideal for handling temporary data, like form data or one-time application settings that don’t need to persist beyond the session. Since each tab has its own sessionStorage, it’s also helpful when you need data separated across different browser windows or tabs (like in a multi-tab app).
Example of Using sessionStorage
Let’s see how to store and retrieve a shopping cart value in sessionStorage:
// Set a shopping cart item count
sessionStorage.setItem("cartItemCount", "3");
// Retrieve shopping cart item count
let cartItemCount = sessionStorage.getItem("cartItemCount");
console.log(cartItemCount); // Output: "3"
// Clear all items from sessionStorage
sessionStorage.clear();
Here:
- setItem saves data for the session, and getItem retrieves it.
- clear removes all items from sessionStorage, useful when the user logs out or the session ends.
Comparison of LocalStorage, Cookies, and SessionStorage
Deciding Which to Use in Your Project
- Use localStorage if you need data to persist across sessions and don’t require server access, such as theme settings or non-sensitive user preferences.
- Use cookies for data that needs to be accessible by both client and server, such as session tokens and user login status. Just remember to keep it lightweight!
- Use sessionStorage when you only need the data temporarily, like form data or short-term user actions that reset once the browser is closed.
