First, the characteristics of each
1. cookie: size 4K;
The data is carried in the http request, and each time it will trigger an http request, wasting bandwidth.
Cookie data has the concept of path (path), which can limit the cookie to only belong to a certain path.
Cookies are valid until the set expiration date.
Cookies are shared across all windows of the same origin. (sessionstorage is not shared even if the same page)
2. The difference between cookies and sessions:
1. Storage method: cookie is stored on the browser side, session is stored on the server side
2. How to use:
Cookie: If the expiration time is not set, the cookie is stored in the memory, and the cookie will disappear when the browser is closed. This is called a callback cookie;
If the expiration time is set, it will be saved in the hard disk and will not disappear after the browser is closed.
session: When the server receives a request and needs to create a session object, it first checks whether there is a session id in the client object. If there is a sessionid, the server will return the corresponding session object according to the id . If the client does not have a sessionid, the server will create a new session object and return the sessionid to the client in this response. Generally, a cookie is used to store the sessionid to the client, and the browser sends the sessionid to the server according to the rules during the interaction. If the user disables cookies, URL rewriting needs to be used, which can be implemented by response.encodeURL(url); the API ends the encodeURL as if the browser supports cookies, the url does not do any processing; when the browser does not support cookies, the The URL will be rewritten and the sessionid will be spliced to the access address.
3. Storage content:
Cookies can only store string types in text form; sessions are stored through a data structure similar to Hashtable, which can support any type of object (sessions can contain multiple objects)
4. Storage size:
Cookies are stored in 4K; sessions have no size limit.
5. Security:
Attacks against cookies exist: cookie spoofing; cookie interception; session is more secure than cookie.
(1) The sessionid is stored in the cookie. To break the session, you first need to break the cookie.
(2) The sessionid requires someone to log in or start session_start, so breaking the cookie may not necessarily get the sessionid
(3) After starting session_start for the second time, the previous sessionid is invalid, and after the session expires, the sessionid will also be invalid.
(4) sessionid is encrypted.
(5) To sum up, the attacker must break the encrypted sessionid in a short time, which has certain difficulty.
6. Application scenarios:
Cookie: (1) Determine whether the user has logged in the website, so that the automatic login can be automatically realized when the user logs in next time. If we delete the cookie, it will need to be filled again.
(2) Save the time information of the last login, etc.
(3) Save the last viewed page
(4) View count
The Session is used to save the private information of each user, the value of the variable is saved on the server side, and different clients are distinguished by the SessionID.
(1) Shopping cart in the online mall
(2) Save user login information
(3) Put some data into the session for use by different pages of the same user
(4) Prevent users from logging in illegally
7. Disadvantages of cookies see top .
Disadvantages of session: (1) The more things a session saves, the more memory it occupies on the server. For websites with a large number of users online, the server memory pressure will be relatively large.
(2) Relying on cookies (storing cookie id), if only cookies are used, the URL needs to be rewritten, which is not safe.
(3) The creation of session variables is very arbitrary and can be called at any time, without the need for developers to do the essential processing, so transitioning session variables will lead to unreadable code and poor maintenance.
二、localstorage
Storage : localstorage.setItem(key,value)
localstorage.key=value
Get : localstorage.getItem(key)
const localstorage.key gets data directly
删除：localstorage.removeItem(key)
Get the total length : localstorage.length
清空：localstorage.clear()
1. Advantages of localstorage:
1. Expanded the 4K limit of cookies, about 5M.
2. The first request data can be stored locally, which saves bandwidth more than cookies.
2. Disadvantages of localstorage:
1. The size of different browsers is not uniform, and localstorage is only supported by IE8 or above
2. At present, all supported browsers will define the value as string, so json needs to perform data conversion.
3. localstorage is not readable in browser privacy mode.
4. In essence, it is to read the string. If the stored content is too much, it will be more stuck.
5. localstorage cannot be read by crawlers, without him completely replacing the URL
Third, Web Storage
The purpose of WebStorage is to overcome some of the limitations imposed by cookies, when data needs to be strictly controlled on the client side, and 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. localStorage data never goes away unless it is actively deleted.
The lifetime of sessionStorage is valid only under the current session. sessionStorage introduces the concept of a "browser window", and sessionStorage is data that always exists in a window of the same origin. As long as the browser window is not closed, the data persists even after refreshing the page or entering another page of the same origin. But sessionStorage will be destroyed after closing the browser window. At the same time, the same window and the same page are opened independently, and 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, stringify and parse of JSON objects provided by ECMAScript can be used to process them.
5、获取方式：localStorage：window.localStorage;；sessionStorage：window.sessionStorage;。
6. Application scenarios: localStoragese: commonly used for long-term login (+ to determine whether the user is 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, the data stored locally can be obtained directly, and the request for beautiful words will not be transmitted to the server like a cookie, so the interaction between the client and the server is reduced, saving the network flow;
(3) For the kind of data that only needs to be saved while the user is browsing a set 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 fetching data, it is much faster to fetch locally than from the server, so it 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 is still a forgery problem;
（6）WebStorage提供了一些方法，数据操作比cookie方便；
getItem (key, value) —— 保存数据，以键值对的方式储存信息。
getItem (key) —— 获取数据，将键值传入，即可获取到对应的value值。
removeItem (key) —— 删除单个数据，根据键值移除对应的信息。
clear () —— 删除所有的数据
key (index) —— 获取某个索引的key