cookie vs localStorage vs sessionStorage

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.

Lifecycle

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 (opens in a new tab).

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.

Improving 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).