Client state maintenance is a commonplace issue. In the final analysis, tracking the browser's user identity and related data is nothing more than the following four methods: session, cookie, sessionStorage, localStorage. |
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 a session cookie. If the expiration time of the cookie is set in the browser, the cookie is saved in the hard disk. After closing the browser, the cookie data will still exist and will not disappear until the expiration time is over.
Cookie is a special information sent by the server to the client. The cookie is stored in the client in the form of text, and it is brought with each request.
Session mechanism
When the server receives a request to create a session object, it will first check whether the client request contains the 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 is required, 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.
Store 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)
Storage size
cookie: The data saved by a single cookie cannot exceed 4kb; there is no limit to the session size.
safety
Cookie: Attacks on cookies: 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 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, it is not easy for an attacker to break the encrypted sessionID in a short time.
Application scenarios
cookie:
(1) Judge 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 cookies, we must fill in the relevant information for each login.
(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
Disadvantage
cookie:
(1) Limited size
(2) The user can manipulate (disable) cookies to limit the functionality
(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) 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 saves, the more server memory is occupied. For websites with more users online, the server memory pressure will be greater.
(2) Rely on cookie (sessionID is stored in cookie), if cookie is disabled, URL rewriting must be 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.
To put it bluntly, these two ways of maintaining state are not satisfactory, so webStroage came into being.
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 a "browser window" concept, sessionStorage is data that always exists in windows of the same origin. As long as the browser window is not closed, the data will still exist even if you refresh the page or enter another page of the same origin. 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 side 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 stringify and parse of JSON objects 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 (token). sessionStorage: One-time login for sensitive accounts;
Advantages of WebStorage:
(1) Storage space is larger: cookie is 4KB, while WebStorage is 5MB;
(2) Save network traffic: WebStorage will not be transmitted to the server, the data stored locally can be obtained directly, and the beautiful words and requests like cookies will not be transmitted to the server, so the interaction between the client and the server is reduced, and the network is saved. flow;
(3) For 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 is 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 concern 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. Thoroughly figure out the difference between session, cookie, WebStorage and application scenarios
This article address: https://www.linuxprobe.com/session-cookie-webstorage.html