localStorage and sessionStorage with cookies

1. webstorage local storage 

webstorage is local storage == localStorage (local storage) and sessionStorage (local storage)

• The localStorage life cycle is permanent, which means that unless the user clears the localStorage information on the UI provided by the browser, the information will exist forever.

The size of the stored data is generally 5MB, and it is only saved in the client (ie browser), and does not participate in the communication with the server

Used for: often used for long-term login (+judging whether the user has logged in), suitable for long-term storage of local data, obtained by window.localStorage

• sessionStorage is only valid in the current session and will be cleared after closing the page or browser.

The size of stored data is generally 5MB, and it is only saved in the client (ie browser), and does not participate in communication with the server.

The original interface is acceptable, and it can also be re-encapsulated to have better support for Object and Array

Used for: one-time login of sensitive accounts, using window.sessionStorage;

Note: Different browsers cannot share information in localStorage or sessionStorage.

Different pages of the same browser can share the same localStorage (the pages belong to the same domain name and port), but sessionStorage information cannot be shared between different pages or tabs (restricted by the same-origin policy).

However, except that the tab page contains multiple iframe tags, sessionStorage can be shared

What they have in common: They are all stored on the client side and do not interact with the server.

The storage data size is generally: 5MB

Only string types can be stored, and complex objects can be processed by stringify and parse of JSON objects provided by ECMAScript

Pros: More storage space: 4KB for cookies vs. 5MB for WebStorage

Save network traffic: WebStorage will not be transmitted to the server, and the data stored locally can be obtained directly.

It will not be sent to the server like a cookie.

Therefore, the interaction between the client and the server is reduced, and network traffic is saved.
For the data that only needs to be saved while the user browses a set of pages and can be discarded after closing the browser,

Quick display: Some data is stored on WebStorage, plus the cache of the browser itself. When obtaining data, it can be obtained locally rather than from the server, so it is faster

Security: WebStorage will not be sent to the server with the HTTP header, so the security is relatively higher than that of cookies, and there is no worry about interception, but there are still forgery problems

Some usage methods:

• setItem (key, value) —— save data, and store information in the form of key-value pairs.
• getItem (key) —— Get the data, pass in the key value, and you can get the corresponding value.
• removeItem (key) —— Delete a single item, and remove the corresponding information according to the key value.
• clear () - delete all data
• key (index) - get the key of an index

Two, cookies

That is, HTTP Cookie, which sends the Set-Cookie HTTP header as part of the response in the HTTP request. Stored in the form of name=value

Function and composition: (mainly used to save login information)

• name: name (case insensitive, but it's best to think it is)
• Value: value (via URL encoding: encodeURIComponent)
• area
• path
• Expiration time: Generally, the default is that the browser is closed and invalid, and you can set the expiration time by yourself
• Security flag: After setting the security flag, it will only be sent to the server when the SSL connection is made

Lifetime: Only valid until the set cookie expiration time, even if the window or browser is closed. The stored data size is about 4K. There is a limit on the number (each browser is different), generally no more than 20.

Communication with the server: it will be carried in the HTTP header every time. If you use cookies to save too much data, it will cause performance problems

Advantages of cookies: extremely high scalability and usability

1. Through good programming, control the size of the session object saved in the cookie
2. Through encryption and secure transmission technology, reduce the possibility of cookie being cracked
3. Only store insensitive data in cookies, even if it is stolen, there will be no great loss
4. Control the lifetime of the cookie so that it will not be valid forever. In this case, the thief is likely to get an expired cookie

Cookie disadvantages:

1. Limits on the length and number of cookies. Each domain can only have up to 20 cookies, and the length of each cookie cannot exceed 4KB, otherwise it will be cut off
2. Security issues. If the cookie is blocked by someone, that person can get all session information. Encryption doesn't work
3. Some state cannot be saved on the client side. For example, in order to prevent repeated submission of forms, we need to save a counter on the server side. If the counter is saved on the client, it will have no effect

sessionStorage
1) sessionStorage is an object of Storage type, with clear(), getItem(name), key(index), removeItem(name), setItem(name, value) methods 2) sessionStorage object stores data specific to a certain
session , That is, the data is only kept until the browser is closed
3) Save the data in the session object. The so-called session refers to the period of time from entering the website to closing the browser when the user browses a certain website, that is, the time spent by the user browsing the website. The session object can be used to save any data that is required to be saved during this period of time
4) sessionStorage is a temporary storage of

localStorage
1) localStorage is also an object of the Storage type
2) In HTML5, localStorage is replaced by a scheme that persists data stored on the client globalStorage (globalStorage must specify a domain name)
3) localStorage will permanently store session data, unless removeItem, otherwise session data will always exist
4) save the data in the client's local hardware device (usually refers to the hard disk, or other hardware devices), Even if the browser is closed, the data still exists, and it can still be used next time the browser is opened to visit the website
5) localStorage is permanently saved

Three, the difference

The difference between local storage localStorage and cookies
1) The cookie is passed back and forth between the browser and the server
sessionStorage and localStorage will not send the data to the server, but only save it locally
2) The validity period of the data is different.
The cookie is only valid until the set cookie expiration time , even if the window or browser is closed
sessionStorage: valid only before the current browser window is closed localStorage is
always valid and long-term storage It cannot exceed 4k. Although sessionStorage and localStorage also have storage size restrictions, they are much larger than cookies and can reach 5M or more. 4) The scope does not use sessionStorage and does not share in different browser windows. Shared cookies are also shared among all windows of the same origin. WebStorage supports an event notification mechanism, which can send notifications of data updates to listeners. The API interface of Web Storage is more convenient to use

The difference between cookie, session and localStorage

1) The content of the cookie mainly includes: name, value, expiration time, path and domain, and the path and domain together constitute the scope of the cookie.

If the time is not set, it means that the lifetime of this cookie is during the browser session, and the cookie will disappear when the browser window is closed. This kind of cookie whose lifetime is the browser session is called a session cookie 2) Session cookies are generally
not Stored in the hard disk but in memory, of course, this behavior is not specified by the specification. If the expiration time is set, the browser will save the cookie to the hard disk, and after closing and opening the browser, these cookies will still be valid until the set expiration time is exceeded.

For cookies stored in memory, different browsers have different processing session mechanisms.
3) When the program needs to create a session for a client's request, the server first checks whether the client's request already contains a session identifier (called session id),

If it is included, it means that a session has been created for this client before, and the server will retrieve the session according to the session id (if it cannot be retrieved, a new one will be created),

If the client request does not contain a session id, create a session for the client and generate a session id associated with this session. The value of the session id should be a character that is neither repeated nor easy to be found for imitation string,

This session id will be returned to the client in this response for storage. Cookies can be used to save the session id, so that the browser can automatically send this identifier to the server according to the rules during the interaction process.

The difference between cookie and session

1) The cookie data is stored on the client's browser, and the session data is stored on the server.
2) The cookie is not very secure. Others can analyze the cookie stored locally and cheat the cookie. Considering security, the session should be used
. It is stored on the server for a long time. When the number of visits increases, it will take up the performance of your server. Considering the reduction of server performance, you should use cookies 4) The data* saved by a single cookie cannot
exceed 4K. Many browsers limit a site to a maximum Save 20 cookies
5) It is recommended to store important information such as login information as a session. If you need to keep other information, you can put it in a cookie.
6) The session is saved on the server, and the client does not know the confidence in it; Can know the information
7) The object is saved in the session, and the string is saved in the cookie
8) The session cannot distinguish the path. During the same user visiting a website, all sessions can be accessed anywhere, and If the path parameter is set in the cookie, the cookies under different paths in the same website cannot access each other

The difference between web Storage and cookies

1) The concept of Web Storage is similar to cookies, the difference is that it is designed for larger capacity storage, the size of cookies is limited, and cookies will be sent every time a new page is requested, which is an invisible waste In addition, the cookie needs to specify the scope and cannot be called across domains.
2) web storage has methods such as setItem, getItem, removeItem, clear, etc. Unlike cookies, front-end developers need to encapsulate setCookie and getCookie themselves.
3) But cookies are also indispensable Yes, the role of cookies is to interact with the server and exists as a part of the http specification, while web Storage is only for "storing" data locally. sessionStorage, localStorage, and cookies are all data stored on the browser side
. The concept of sessionStorage is very special, it introduces the concept of a "browser window",

sessionStorage is the data that always exists in the same window of the same source, that is to say, as long as the browser window is not closed, even if the page is refreshed or another page of the same source is entered, the data still exists.

After the window is closed, the sessionStorage will be destroyed. At the same time, different windows opened "independently", even for the same page, the sessionStorage objects are different
.
Request data from the server, thus reducing unnecessary data requests, reducing unnecessary data transfer between the browser and the server
Fast display data: good performance, reading data from the local is much faster than obtaining data from the server through the network, local The data can be obtained in time, and the webpage itself can also have a cache, so if the entire page and data are local, it can be displayed immediately. Temporary storage: In many cases, the
data only needs to be used while the user browses a group of pages. After closing the window, the data will be saved. It can be discarded, it is very convenient to use sessionStorage in this case

The difference between browser local storage and server-side storage

1) Data can be stored locally in the browser or on the server side
2) The browser can save some data and access it directly from the local when needed. sessionStorage, localStorage and cookies are all data stored locally by the browser
3) The server can also save all the data of all users, but the browser needs to request data from the server when needed.
4) The server can save the persistent data of the user, such as database and cloud storage. The server can also save the user's temporary session data. The server-side session mechanism, such as the session object of jsp, stores the data on the server. 5) The
server and the browser only need to pass the session id, and the server finds the corresponding user according to the session id The session object, the session data is only valid for a period of time, this time is the session validity period set by the server side
6) The server side saves all user data, so the overhead of the server side is relatively large, while the browser side saves the data that different users need The data of the user is stored separately in the user's respective browser,

The browser end is generally only used to store small data, and non-services can store large data or small data. The server stores data more safely, and the browser is only suitable for storing general data.

The difference between sessionStorage, localStorage and cookie

1) The same point is that they are all stored on the browser side and of the same origin.
2) The cookie data is always carried in the http request of the same origin (even if it is not required), that is, the cookie is passed back and forth between the browser and the server, while sessionStorage and localStorage will not automatically send data to the server,

Only saved locally. Cookie data also has the concept of path (path), which can limit the cookie to belong to a certain path.
3) The storage size limit is also different. The cookie data cannot exceed 4K. At the same time, because every HTTP request will carry the cookie, the cookie is only suitable for saving for a long time. Small data, such as session IDs.

Although sessionStorage and localStorage also have storage size limitations, they are much larger than cookies and can reach 5M or more.
4) The data validity period is different, sessionStorage: only valid before the current browser window is closed;

localStorage: is always valid, and is always saved when the window or browser is closed, so it is used as persistent data;

cookie: only valid until the set cookie expiration time, even if the window is closed or the browser is closed
5) The scope is different, sessionStorage is not shared in different browser windows, even if it is the same page;

localstorage is shared among all windows of the same origin;

Cookies are also shared in all windows of the same origin
6) web Storage supports an event notification mechanism, which can send notifications of data updates to listeners
7) the api interface of web Storage is more convenient to use

The difference between sessionStorage and page js data objects

1) The lifetime of the general js object in the page is only valid in the current page, so when the page is refreshed or switched to another page, the data will not exist. 2) sessionStorage only needs to be in the same window of the same source
, Refresh the page or enter a different page of the same origin, the data always exists, that is to say, as long as the browser is not closed, the data still exists