Introduction to the session cookie, sessionStorage and localStorage difference and application scenarios

The original address: www.cnblogs.com/cencenyue/p… The caching mechanism of the browser provides a way to store user data on the client, and can use cookies, sessions and other methods to interact with the server.

Cookies and Sessions

Cookies and sessions are sessions used to track the identity of a browser user.

The difference between:

1. Maintain state: Cookies are stored on the browser and sessions are stored on the server

2. Mode of use:

(1) Cookie mechanism: If the expiration time is not set in the browser, the cookie is stored in memory and its life cycle ends with the closing of the browser. This cookie is referred to as session cookie. If a cookie expiration time is set in the browser, the cookie is saved in the hard disk. After the browser is closed, the cookie data still exists until the expiration time ends.

A Cookie is a special message sent by the server to the client. The Cookie is saved in the form of text on the client and is carried with each request

(2) Session mechanism: When the server receives a request and needs to create a session object, it will first check whether the client request contains the SessionID. If there is a sessionID, the server returns the corresponding session object based on the ID. If the client request does not have a session ID, the server creates a new session object and returns the session ID to the client in the response. Generally, the sessionid is stored to the client in cookie mode, and the browser sends the sessionid to the server according to the rules during the interaction. If the user disables cookies, URL rewriting is required, which can be achieved through Response.encodeURL (URL). When the browser supports cookies, the URL does nothing. When the browser does not support cookies, the URL will be overwritten to concatenate the SessionID to the access address.

3, store content: cookie can only save string type, in the way of text; Sessions are stored in a data structure similar to Hashtable and can support any type of object (a session can contain multiple objects).

4. Storage size: Cookie: The data saved by a single cookie cannot exceed 4KB; There is no limit to the session size.

5, security: cookie: for the existence of cookie attacks: cookie deception, cookie interception; Session is more secure than cookie.

The reasons are as follows :(1) the sessionID is stored in the cookie. To break the session, the cookie must be broken first.

(2) sessionID is only available when someone logs in or starts session_start, so it is not necessarily possible to get sessionID by breaking cookies;

(3) After session_start is started for the second time, the previous sessionID is invalid. After the session expires, the sessionID is also invalid.

To sum up, an attacker must break the encrypted sessionID in a short time, which is difficult.

6. Application Scenarios:

Cookie: (1) Determine whether the user has logged in to the website, so that the next login can be realized automatically (or remember the password). If we delete the cookie, the login information must be refilled each time we log in.

(2) Save information such as the time of the last login.

(3) Save the page you viewed last time

(4) Browse count

Session: The session is used to store the special information of each user. The value of the variable is stored on the server side. The SessionID is used to distinguish different clients. (1) Shopping cart in online shopping mall

(2) Save user login information

(3) Put some data into session for different pages of the same user

(4) Prevent illegal login

7. Disadvantages: Cookie: (1) Limited size

(2) Users can operate (disable) cookies, so that the function is limited

(3) Low security

(4) Some states cannot be saved in the client.

(5) Cookies are sent to the server every time they are accessed, which wastes bandwidth.

(6) Cookie data has the concept of path, which can restrict cookies to only belong to a certain path.

Session: (1) The more things the session stores, the more the server memory will be occupied. For websites with a large number of online users, the server memory pressure will be relatively high. (2) rely on cookie (sessionID stored in cookie), if cookie is disabled, it will use URL rewriting, unsafe (3) create Session variable is very arbitrary, can be called at any time, do not need to do precise processing, so, Overusing session variables can result in unreadable and unmaintainable code.

Second, the WebStorage

The purpose of WebStorage is to overcome some of the limitations imposed by cookies. When data needs to be tightly controlled on the client, it does not need to continuously send data back to the server.

WebStorage has two main goals: (1) to provide a path to store session data in addition to cookies.

(2) Provide a mechanism for storing large amounts of data that can exist across sessions.

HTML5 WebStorage provides two apis: localStorage (localStorage) and sessionStorage (sessionStorage).

1, the life cycle: localStorage: localStorage lifecycle is permanent, close the page or browser data in localStorage will not disappear. LocalStorage data will never disappear unless it is actively deleted.

The sessionStorage lifetime is valid only for the current session. SessionStorage introduces the concept of a “browser window.” sessionStorage is data that is always present in the same window. As long as the browser window is not closed, the data remains even if the page is refreshed or another page is entered. However, sessionStorage is destroyed when the browser window is closed. At the same time independently open the same window the same page, sessionStorage is not the same.

2, storage size: localStorage and sessionStorage data size is generally: 5MB

3, storage location: localStorage and sessionStorage are stored in the client, do not interact with the server.

4. Store content types: localStorage and sessionStorage can only store strings. For complex objects, use stringify and Parse for JSON objects provided by ECMAScript

5. Acquisition method:

LocalStorage: window. LocalStorage; ; SessionStorage: window. SessionStorage; .

6. Application Scenarios:

LocalStoragese: Used for long-term login (+ to check whether a user has logged in). It is suitable for data stored locally for a long time.

SessionStorage: one-time login with sensitive accounts.

Advantages of WebStorage:

(1) Larger storage space: cookie is 4KB, while WebStorage is 5MB;

(2) save network traffic: WebStorage will not be transmitted to the server, stored in the local data can be directly obtained, not like cookies, the United States word request will be transmitted to the server, so reduce the client and server side interaction, save network traffic;

(3) sessionStorage is very convenient for data that only needs to be saved during browsing a set of pages but can be discarded after closing the browser;

(4) Fast display: some data stored in the WebStorage, plus the browser itself cache. It’s much faster to get data locally than it is to get data from the server.

(5) security: WebStorage will not be sent to the server with the HTTP header, so the security is relatively higher than the cookie, will not worry about interception, but there are still forged problems;