Cookies, Local storage and Session storage-JS Tutorial-php.cn

Cookies, Local storage and Session storage

This is post #6 of Frontend Interview Questions series. If you're looking to level up your preparation or stay updated in general, consider signing up on Frontend Camp.

Cookies, Local Storage, and Session Storage are all used to store data on the client side. These mechanisms are particularly useful for storing authentication tokens or client-only states, such as themes or personalized settings. All three storage types share the following characteristics:

They store data as key-value pairs.
All values are stored in string format. If a value is not a string, it is serialized before being stored.
Data stored in these mechanisms is accessible to the client (except for HttpOnly cookies).

Cookies

Cookies cannot store large amounts of data; their storage is capped at approximately 4KB per domain. This limitation exists because cookies are automatically sent to the server with every request made by the browser. Storing excessive client-side data in cookies would increase the payload size, negatively impacting performance.

What kind of data should we store in Cookies?
Cookies are ideal for storing data that needs to be transmitted to the server, such as authentication tokens, session IDs, analytics IDs, and similar information. Additionally, cookies allow data sharing across different tabs or windows of the same domain or subdomain.

You can configure cookies using various flags to tweak their behavior or enforce security:

HttpOnly ensures cookies are inaccessible via JavaScript on the client side, mitigating the risk of XSS attacks.
maxAge/expires specifies an expiry date for the cookie. If no expiry date is set, the cookie is deleted when the browser is closed.

Want to learn more about cookie flags? Check out my LinkedIn post.

Unlike local storage and session storage, cookies can also be set (read: "added") by the server using the Set-Cookie header.

// Set a cookie for the key `token` that `expires` on 1st March 2025.
document.cookie =
  'token=a1-b2-c3; expires=Sat, 1 Mar 2025 23:59:59 GMT; path=/';

// Read all cookies. There's no way to read specific cookies using `document.cookie`.
// You have to parse the string yourself.
console.log(document.cookie); // token=a1-b2-c3

// Delete the cookie with the key `token` by setting an
// expiry date in the past. The value doesn't matter.
document.cookie = 'token=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/';

Copy after login

Local storage

Unlike cookies, localStorage offers a significantly larger storage capacity of approximately 5MB per domain. This is because localStorage is designed for storing long-term data. It retains data even when the browser is closed, making it ideal for persistent client-side storage needs.

What kind of data should we store in localStorage then?
localStorage is best suited for storing data that is used only on the client side and does not need to be sent to the server with every request. Some examples are the theme of a website or products added in cart before a used has signed in.

Data stored in localStorage persists indefinitely until the user deletes it manually or the website clears it using JavaScript.

Similar to cookies, data in localStorage is accessible across all tabs or windows of the same origin, making it useful for sharing client-side state within a domain.

// Set a cookie for the key `token` that `expires` on 1st March 2025.
document.cookie =
  'token=a1-b2-c3; expires=Sat, 1 Mar 2025 23:59:59 GMT; path=/';

// Read all cookies. There's no way to read specific cookies using `document.cookie`.
// You have to parse the string yourself.
console.log(document.cookie); // token=a1-b2-c3

// Delete the cookie with the key `token` by setting an
// expiry date in the past. The value doesn't matter.
document.cookie = 'token=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/';

Copy after login

Session storage

sessionStorage is used to store short-lived, client side data. Like localStorage, it provides a storage capacity of around 5MB per domain and shares the same API.

While both sessionStorage and localStorage share similar functionalities, they differ in two key aspects: Data persistence and Accessibility.
Unlike localStorage, sessionStorage does not retain data once the tab or browser is closed. Additionally, data stored in sessionStorage is isolated to the specific tab or window where it was created, meaning other tabs or windows from the same origin cannot access it.

What's the use case for sessionStorage then?
sessionStorage is ideal for storing data that is needed only for a single session. For instance, consider a user filling out a long form who accidentally refreshes the page. If the form data is stored in sessionStorage, it will persist through the refresh, allowing the user to continue without losing their progress.

However, it's important to note that this data will not be accessible in a different tab or once the tab is closed.

// Set a value in localStorage.
localStorage.setItem('theme', 'dark');

// Get a value from localStorage.
console.log(localStorage.getItem('theme')); // 'dark'

// Remove a value from localStorage.
localStorage.removeItem('theme');

// Clear all data in localStorage.
localStorage.clear();

Copy after login

While cookies are automatically included in every request sent by the browser, data stored in localStorage or sessionStorage can be manually transmitted to the server by writing custom code.

Summary

Cookies, localStorage and sessionStorage are used to store data on client side.
Cookies are the only form of storage which can be set by the server too using Set-Cookie response header.
Cookies are automatically sent to the server with every request.
localStorage and sessionStorage have a significantly large storage(5MB) compared to the cookies(4KB). Both of these storages share the same API interface.
Cookies have an expiry date, if not, they are cleared when the browser is closed.
localStorage data persists indefinitely unless manually cleared by the user or the website itself.
sessionStorage data is cleared after the session ends i.e. when the tab or the window is closed.

Like what you just read? Consider checking out Frontend Camp ✌️

The above is the detailed content of Cookies, Local storage and Session storage. For more information, please follow other related articles on the PHP Chinese website!