Difference between Cookie, localStorage and sessionStorage and application examples

In front-end development, persistent data storage is a very common requirement. In order to achieve this, browsers provide a variety of ways, including cookies, localStorage and sessionStorage, each of which has its own advantages and disadvantages and is suitable for different scenarios

1. Cookie

Cookie A cookie is a mechanism for the browser to store a small amount of data, usually generated by the server and sent to the client. Each time a client makes a request for the same domain name, a cookie is automatically attached to the request header and sent to the server.

As shown:

Features:

• Data Size Limit: The data size limit for a single cookie is usually around 4KB.
• life cycle: Cookies can be setexpires maybemax-age attribute to control its expiration date; by default, cookies are deleted at the end of the session (i.e., when the browser is closed).
• scope (computing): Cookies are associated with specific domain names and paths and can be set by setting thedomain cap (a poem)path to control its range of action.
• safety: This can be done bySecure flag only allows cookies to be transmitted over an HTTPS connection, and can also be used via theHttpOnly Flags make cookies inaccessible to JavaScript for added security.

Application Scenarios:

• Session Management: e.g., login status maintenance.
• user preference: For example, save the user's language settings.
• Tracking User Behavior: For example, third-party analytics tools use cookies for user tracking.

Example:

// Setting a Cookie
 = "username=John; expires=Fri, 31 Dec 2024 23:59:59 GMT; path=/";

// Read Cookie
const cookies = ("; ");
(cookie => {
    const [key, value] = ("=");
    (`${key}: ${value}`);
});

// Delete Cookie
 = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/";

2. localStorage

localStorage is a web storage mechanism introduced in HTML5 for persisting client-side data. Its storage is based on key-value pairs and localStorage is independent for different domains.

Features:

• Data Size Limit: Usually 5MB.
• life cycle: Data in localStorage has no expiration time and will always exist unless manually deleted.
• scope (computing): localStorage can only be shared by all pages under the same domain.

Application Scenarios:

• Long-term retention of data: For example, user settings, theme selection, and other data that does not need to be changed frequently.
• Offline Web Applications: Can be used to save data generated by the user while offline.

Example:

// Setup Data
('theme', 'dark');

// retrieve data
const theme = ('theme');
(theme); // Output 'dark'

// Delete data
('theme');

// Clear all data
();

3. sessionStorage

sessionStorage It is also a Web storage mechanism introduced by HTML5, similar to localStorage, but its lifecycle is limited to the duration of the browser session. The data in sessionStorage is cleared when the browser tab or window is closed.

Features:

• Data Size Limit: Usually 5MB.
• life cycle: The data is valid for the duration of the page session and is deleted when the page is closed.
• scope (computing): sessionStorage can only be shared in the same window or tab, data between different windows or tabs do not affect each other.

Application Scenarios:

• Temporarily stored data: For example, temporary saving of form data to prevent data loss due to page refresh.
• Data transfer between pages: For example, in a multi-step form, passing data between steps.

Example:

// Setup Data
('sessionData', 'temporaryData');

// retrieve data
const data = ('sessionData');
(data); // Output 'temporaryData'

// Delete data
('sessionData');

// Clear all data
();

4. Summary of the distinction: