What Is the Difference Between Cookie, sessionStorage and localStorage?

When developing web pages, we sometimes need to store data on the client side (browser). Among the methods of saving data to the browser, the most commonly used ones are cookie, localStorage and sessionStorage, all three of which can be used to store data, but have different applicable scenarios and restrictions. The similarities and differences between the three are often tested in front-end interviews. In the following, we will analyze their similarities and differences from multiple perspectives such as usage, life cycle, storage space, and HTTP requests.

The similarities and differences of the three

How to use

• cookies: After the client browser sends the request for the first time, the server will add a Set-Cookie in the header of the response and put the cookie into the response, and send it back to the user's browser, which will be stored locally on the client side. In addition, the cookie will be carried and sent back to the server when the user's browser sends a request next time.
• localStorage and sessionStorage: Both of them are stored on the user's browser in the way of key-value.

// store data in localStorage
localStorage.setItem("memberName", "John");

// localStorage read data
localStorage.getItem("memberName");

// sessionStorage stores data
sessionStorage.setItem("memberName", "John");

// sessionStorage read data
sessionStorage.getItem("memberName");

When to use which

• cookies are automatically included in HTTP requests, so they are often used in scenarios where user identification is required.
• Since the capacity of localStorage is much larger than that of cookies and it will not be easily deleted, it is relatively wide, such as cross-page data transfer, or data that needs to be stored for a long time.
• sessionStorage is suitable for saving data that will be used for a single use because of its short life cycle, such as saving form data.

Life cycle

• cookies: You can use Expires to indicate the expiration time, or Max-Age to indicate the effective time length. If it is not set, the default is to expire after closing the browser.
• localStorage: Unless it is manually deleted on the client side, or the program code is cleared, it will be stored permanently.
• sessionStorage: It will be automatically cleared every time the page is closed or the browser is closed.

Stored data size

• cookies: about 4KB.
• localStorage and sessionStorage: about 5MB~10MB (depending on different browsers) (detailed).

HTTP request

• cookies: It will be attached in the HTTP header and sent with every request, so if it is used too much, it may cause performance issues.
• localStorage and sessionStorage: They only exist in the client's browser and are not sent with every request.

Bonus Question: How to improve cookie security?

Since cookies will be automatically sent with the HTTP request to the server, security issues need to be considered.

• Secure: With Secure, it ensures that only encrypted requests will be sent to the server when they are sent over the HTTPS protocol.
• HttpOnly: With HttpOnly, you can avoid JavaScript Document.cookie method to get HttpOnly cookies, HttpOnly cookies will only be sent to the server, this method can avoid cross-site scripting attacks (XSS ).