On the session, cookie, sessionStorage, localStorage difference and application scenarios
of browser caching can provide a way to store user data on the client, it can exchange data using the cookie, session and so on with the server.
One, cookie and session
Both cookie and session are session methods used to track the identity of the browser user.
the difference:
1. Keep state: the cookie is saved on the browser side, and the session is saved on the server side
2. How to use:
(1) Cookie mechanism: If the expiration time is not set in the browser, the cookie is stored in the memory, and the life cycle ends when the browser is closed. This kind of cookie is referred to as session cookie. If the cookie expiration time is set in the browser, the cookie is saved in the hard disk. After the browser is closed, the cookie data will still exist and will not disappear until the expiration time is over.
Cookie是服务器发给客户端的特殊信息，cookie是以文本的方式保存在客户端，每次请求时都带上它
(2) Session mechanism: When the server receives a request and needs to create a session object, it first checks whether the client request contains sessionid. If there is a sessionid, the server will return the corresponding session object according to the id. If there is no sessionid in the client request, the server will create a new session object and return the sessionid to the client in this response. The sessionid is usually stored to the client in the 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 can be used, which can be achieved through response.encodeURL(url); the API ends with encodeURL, when the browser supports cookies, the url does not do any processing; when the browser does not support cookies At that time, the URL will be rewritten and the SessionID will be spliced to the access address.
3. Storage content: cookie can only save string type, in the form of text; session is saved by a data structure similar to Hashtable, and can support any type of object (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: Attacks against cookie: cookie spoofing, cookie interception; session security is greater than cookie.
The reasons are as follows: (1) The sessionID is stored in the cookie. If you want to break the session, you must first break the cookie;
(2) The sessionID is only available when someone logs in or starts the session_start, so the sessionID may not be obtained by breaking the cookie;
(3) After the session_start is started for the second time, the previous sessionID is invalid, and after the session expires, the sessionID also becomes invalid.
(4) The sessionID is encrypted
(5) In summary, the 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 it can automatically log in (or remember the password) when logging in next time. If we delete the cookie, we must fill in the relevant information about the login every time we log in.
(2) Save information such as the time of last login.
(3) Save the last viewed page
(4) Browse count
Session: Session is used to save the dedicated information of each user, the value of the variable is saved on the server side, and different clients are distinguished by SessionID.
(1) Shopping cart in online mall
(2) Save user login information
(3) Put some data into the session for use on different pages of the same user
(4) Prevent users from logging in illegally
7. Disadvantages: cookie: (1) Limited size
(2) The user can manipulate (disable) cookies to restrict the function
(3) Low security
(4) Some states cannot be saved on the client.
(5) Cookies must be sent to the server for each visit, which wastes bandwidth.
(6) The cookie data has the concept of path, which can restrict the cookie to only belong to a certain path.
Session: (1) The more things a session saves, the more memory it will occupy on the server. For a website with a large number of users online, the memory pressure on the server will be greater.
(2) Rely on cookie (sessionID is stored in cookie), if cookie is disabled, URL rewriting is used, which is not safe
(3) There is a lot of arbitrariness in creating Session variables, which can be called at any time without the developer's precise processing. Therefore, excessive use of session variables will lead to unreadable code and difficult to maintain.
二、WebStorage
The purpose of WebStorage is to overcome some limitations caused by cookies. When data needs to be strictly controlled on the client side, there is no need to continuously send data back to the server.
WebStorage has two main goals: (1) Provide a way to store session data outside of cookies. (2) Provide a mechanism for storing large amounts of data that can exist across sessions.
HTML5 WebStorage provides two APIs: localStorage (local storage) and sessionStorage (session storage).
1. Life cycle: localStorage: The life cycle of localStorage is permanent, and the data in localStorage will not disappear after closing the page or browser. Unless localStorage actively deletes the data, the data will never disappear.
The life cycle of sessionStorage is valid only in the current session. sessionStorage introduces the concept of a "browser window", sessionStorage is data that always exists in windows of the same origin. As long as the browser window is not closed, even if you refresh the page or enter another page of the same source, the data will still exist. But sessionStorage will be destroyed after closing the browser window. At the same time, when the same window and the same page are opened independently, the sessionStorage is also different.
2. Storage size: The storage data size of localStorage and sessionStorage is generally 5MB
3. Storage location: Both localStorage and sessionStorage are stored on the client and do not interact with the server.
4. Storage content type: localStorage and sessionStorage can only store string types. For complex objects, you can use the stringify and parse of the JSON object provided by ECMAScript to process
5、获取方式：localStorage：window.localStorage;；sessionStorage：window.sessionStorage;。
6. Application scenario: localStoragese: often used for long-term login (+ to determine whether the user has logged in), suitable for long-term storage of local data. sessionStorage: One-time login for 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, and the data stored locally can be directly obtained, nor will the beautiful words and requests like cookies be transmitted to the server, so the interaction between the client and the server is reduced, and the network is saved. flow;
(3) For the kind of data that only needs to be saved while the user is browsing a group of pages and can be discarded after closing the browser, sessionStorage will be very convenient;
(4) Quick display: some data is stored on WebStorage, plus the cache of the browser itself. When data is obtained, it can be obtained locally faster than from the server side, so the speed is faster;
(5) Security: WebStorage will not be sent to the server with the HTTP header, so the security is higher than that of cookies, and there is no worry about interception, but there are still forgery problems;
(6) WebStorage provides some methods, data manipulation is more convenient than cookie;
setItem (key, value) —— save data, store information in the form of key-value pairs.
getItem (key) —— 获取数据，将键值传入，即可获取到对应的value值。
removeItem (key) —— 删除单个数据，根据键值移除对应的信息。
clear () —— 删除所有的数据
key (index) —— 获取某个索引的key
Reprint address: https://www.cnblogs.com/cencenyue/p/7604651.html
Specific usage method: This path contains a detailed introduction to the two usage methods of sessionStorage localStorage
https://developer.mozilla.org/zh- CN/docs/Web/API/Window/sessionStorage