Shulou(Shulou.com)06/02 Report--

This article mainly talks about "what is the cookie and webstora of JavaScript". Interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Next, let the editor take you to learn "what is the cookie and webstora of JavaScript?"

Cookie

Because http is a stateless protocol, once the data exchange between the client and the server is finished, it will disconnect, request again, and reconnect. The server has no way to know the identity of the user only from the network connection. Cookie is produced to solve this problem, each new user request, will be issued to the user a unique ID card, the next visit, must bring the ID card, so that the server will know which user visited, for different users, make different responses cookie is a very small plain text file (up to 4K), the browser is stored on the user's machine. Store some information needed by the server, each time the request site, will send the corresponding cookie, these cookie can be used to identify user identity information and other functions.

Property fields of cookie

As you can see from the above example, when assigning a value to cookie, it will not overwrite the original value of cookie. When the attribute name before the equal sign is the same, it will overwrite the original value of the same attribute name to the value set later. Note that the two fields of cookie are separated by a semicolon and a space, rather than just a semicolon

When you want to set a non-custom property field for cookie, you need to append it by string

For example:

Let expireDate = new Date (); [xss_clean] + = "; expires=" + expireDate.toString ()

Note: there must be a semicolon in "; expires=". If the field is not preceded by a semicolon, it will be considered a custom field.

Domain

For non-top-level domain names, such as second-level domain name or third-level domain name, the domain of cookie can only be top-level domain name or second-level domain name or third-level domain name itself, and the cookie of other second-level domain names cannot be set, otherwise cookie cannot be generated.

The top-level domain name can only be set to domain as the top-level domain name, not as the second-level domain name or the third-level domain name, otherwise cookie cannot be generated.

The second-level domain name can read the cookie that sets domain as the top-level domain or its own, but cannot read the cookie of other second-level domain names domain. So if you want cookie to be shared among multiple second-level domain names, you need to set domain as the top-level domain name, so that it can be in all second-level domain names or to the value of this cookie.

The top-level domain name can only get the cookie whose domain is set as the top-level domain name, and cannot be obtained if the other domain is set to the second-level domain name.

Generally speaking, the higher-level domain name cannot access the cookie of the lower-level domain name, the lower-level domain name can read the cookie of itself and the higher-level domain name, and the cookie of the peer domain name is not shared, that is, the peer domain name cannot access each other's cookie but can only access its own cookie.

Path

The path field is the page path where you can access this cookie. For example, if domain is abc.com,path and / test, only pages under the / test path can read this cookie.

Expires/Max-Age

The expires/Max-Age field timed out for this cookie. If its value is set to a time, the cookie becomes invalid when this time is reached. When this field is not set, the default value is Session, that is, when the browser is closed (note: not the browser tab, but the entire browser), this cookie is invalid.

Let expireDate = new Date ("2019-5-26T09:00:00")

[xss_clean] + = "; expires=" + expireDate.toString ()

To delete a cookie, set the expires of the cookie to the time before the current time

Let expireDate = new Date ("1970-01-01T00:00:00")

[xss_clean] + = "; expires=" + expireDate.toString ()

Size

Size field this cookie size.

HttpOnly

If this property is true, the information of this cookie will only be included in the http request header, and the cookie cannot be accessed through [xss_clean]. Setting it to true can reduce the risk of being exposed to Xss***.

Secure

The secure field sets whether this cookie can only be passed through https.

Localstorage/sessionstorage

Webstorage is not to replace cookie, but to make up for the shortcomings of cookie in storage limitation (storage capacity up to 4k) and security (plaintext transmission in http protocol) with the development of web.

The API of both is the same.

Function intro

SetItem (key, value) saves a piece of data in the form of key-value pairs

GetItem (key) gets the value based on the key

RemoveItem (key) deletes a piece of data based on the key

Key (index) gets the name of the key based on the index

Clear () deletes all data

Both have length attributes

SessionStorage.setItem ("name", "Jack"); sessionStorage.setItem ("phone", "18856894523"); console.log (sessionStorage.getItem ('name')); / / Jackconsole.log (sessionStorage.key (0)); / / nameconsole.log (sessionStorage.length); / / 2sessionStorage.removeItem (' phone'); console.log (sessionStorage.length); / / 1sessionStorage.clear (); console.log (sessionStorage.length); / / 0

A comparison between the two

Both localStorage and sessionStorage are objects used to store temporary information on the client. All of them can only store objects of string type, although objects of other native types can be stored in the specification, but so far no browser has implemented them.

The localStorage life cycle is permanent, and unless the user appears to clear the localStorage information on the UI provided by the browser, the information will last forever.

The sessionStorage life cycle is the current window or tab, and once the window or tab is permanently closed, the data stored by sessionStorage is emptied.

Different browsers cannot share information in localStorage or sessionStorage.

The same localStorage can be shared between different pages of the same browser (pages belong to the same domain name and port)

SessionStorage information cannot be shared between different pages or tag pages. Note that pages and tabs only refer to top-level windows, and if a tab contains multiple iframe tags and belongs to the same origin page, then sessionStorage can be shared between them.

The data inside sessionStorage can be obtained by using window.open to open the page and changing the localtion.href mode.

The difference between cookie and webstorage

Storage limit

A maximum of 20 pieces of cookie,cookie data can be stored in each domain, which cannot exceed 4K.

WebStorage also has a storage size limit, but it is much larger than cookie and can reach 5m or more

The validity period of the data

SessionStorage: valid for closing only in the current browser window

LocalStorage: always valid unless manually deleted by the user

Cookie:cookie is valid until the expiration time, even if the window and browser are closed

Scope

SessionStorage: not shared in different browser windows, even on the same page

LocalStorage: share the same origin window

Cookie: share the same origin window

At this point, I believe you have a deeper understanding of "what is JavaScript's cookie and webstora". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.