Cookie, Session, Localstorage

Cookies:

  • “Little Cookie” – that is, its storage size is very small, only 4K
  • It is mainly used to save login information and user status, and to record the data that still needs to be saved after the page or browser is closed and refreshed
  • View method: document.cookie
  • It is usually generated by the Server (set-cookie) and can Set the expiration time.
  • It is always carried in a same-origin HTTP request, to some extent affecting the request speed.
  • The Client can access the modification. Stored on the client as a string.

Cookie usage:

// The Server sets the HTTP header to be sent: set-cookie:<cookie-name>=<cookie-value>; (Optional parameter 1). (Optional 2) //Client set Cookie: document. Cookie ="<cookie-name>=<cookie-value>; (Optional parameter 1). (Optional parameter 2)" // The options are: Expires=<date>: Indicates the maximum validity period of a cookie. If this parameter is not set, the cookie life is the same as the session life max-age =<non-zero-digit>: Number of seconds after the cookie is generated Domain=<domain-value>: Specifies the host domain name to which cookies can be delivered. If the level-1 domain name is set, the level-2 domain name can also be obtained. Path=<path-value>: Specify a URL, for example, path=/docs. Then /docs, /docs/Web/, and /docs/Web/Http meet the matching conditions. The cookie must be sent to the server only when SSL or HTTPS is used. HttpOnly: The client cannot change the cookieCopy the code

Session:

  • Size is 5 MB

  • A mechanism used by the server to identify a user when the user status is recorded under stateless HTTP

  • Session level storage, that is, only valid for the current session, cleared after closing the page or browser (session_id changed after refresh)

  • If the storage device is stored in the Server for a certain period of time, the Server performance may be affected.

  • The server uses the Session procedure:

    • Session_id = session_ID = session_ID = session_ID = session_ID = session_id
    • Session_id loads the cookie and is returned to the Client for storage in the response request

  • Stored on the server side as an object.

  • When cookies are disabled on the client, session_id(sid= XXXX) can be passed in the URL so that the user can still be identified without the need for client information.

Localstorage

  • The size is 5MB or larger
  • Can be permanently saved in the client, unless manually deleted
  • Does not participate in communication/requests with the server
  • Better API interface than cookie (removeItem,setItem, Clear)

The difference between the three:

features Cookie localStorage sessionStorage
The lifetime of the data Generally, it is generated by the server. You can set the expiration time. If cookies are generated on the browser side, they are invalid after the browser is closed by default It is stored permanently unless it is removed This parameter is valid only in the current session and is cleared after you close the page or browser
Data storage size About 4 k As a general rule, be 5 MB As a general rule, be 5 MB
Communicates with the server This is carried each time in HTTP headers, and using cookies to store too much data can cause performance problems It is saved only in the client (browser) and does not communicate with the server It is saved only in the client (browser) and does not communicate with the server
Ease of use Requires the programmer to encapsulate, the source Cookie interface is not friendly The source interface is acceptable and can be repackaged to provide better support for objects and arrays The source interface is acceptable and can be repackaged to provide better support for objects and arrays
storage Key/value pair Key/value pair Key/value pair

Usage Scenarios:

  • Cookies can be used to record a user’s simple login information
  • Seesion can be used to record information about multiple forms or pages filled in consecutively by users.
  • You can use LocalStorag to store other large pieces of user data, such as shopping carts, favorites, and so on.

Reference:

  • Cookie, LocalStorage and SessionStorage
  • LocalStorage, sessionStorage, Cookie, Session
  • Thoroughly understand the cookies, session, localStorage (with code)