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

Editor to share with you the example analysis of http front-end storage, I believe that most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!

Why does cookie have cookie?

Http protocol is stateless. The so-called stateless means that the server does not know whether this request and the last request are sent by the same client, just like you often go shopping in a supermarket, the boss does not remember who you are. But if you bring your membership card every time, then the boss can identify who you are, and the role of cookie is similar to that of membership cards.

Approximate process

When the server receives a HTTP request, the server can add a Set-Cookie option to the response header. The browser usually saves the Cookie after receiving the response, and then sends the Cookie information to the server through the Cookie request header in each request to the server. In addition, the expiration time, domain, path, validity period and applicable site of Cookie can be specified as needed.

Of course, the browser can also manipulate cookie, and [xss_clean] can get all the cookie of the current page.

Details domain, path

These two attributes determine which URL cookie will be sent to.

The Domain identity specifies which hosts can accept Cookie. If not specified, the default is the host of the current document (without subdomain names). If Domain is specified, the subdomain name is generally included.

For example, if you set Domain=mozilla.org, Cookie is also included in the subdomain name (for example, developer.mozilla.org).

The Path identity specifies which paths under the host can accept Cookie (the URL path must exist in the request URL). With the character% x2F ("/") as the path separator, the subpaths are also matched.

For example, domain=qq.com,path=/blog, the cookie is sent to:

Qq.com/blog

Wx.qq.com/blog

Wx.qq.com/blog/aa

....

Expires 、 max-age

These two attributes determine how long cookie is saved in the browser.

The details are as follows:

Expires sets an expiration date for the deletion of Cookie

Max-age sets the number of seconds that a Cookie will expire

IE browsers (ie6, ie7 and ie8) do not support max-age, and all browsers support expires

If both expires and max-age are set, browsers that support max-age will ignore the value of expires, and browsers that do not support max-age will ignore max-age and only support expires

If neither expires nor max-age is set, the cookie will become a session cookie, that is, it will be deleted automatically when the browser is closed

Secure and httpOnly

Cookie marked as Secure should only be sent to the server through requests encrypted by the HTTPS protocol. However, even if the Secure tag is set, sensitive information should not be transmitted through Cookie, because Cookie has its inherent insecurity, and Secure tags do not provide a definite security guarantee. Starting with Chrome 52 and Firefox 52, insecure sites (http:) cannot use Cookie's Secure tags

To avoid cross-domain scripting (XSS) attacks, Document.cookie API through JavaScript cannot access Cookie with HttpOnly tags, and they should only be sent to the server. If the Cookie that contains the server-side Session information does not want to be called by the client-side JavaScript script, you should set the HttpOnly tag for it.

How to set up the cookie server

The server set-cookie will be fine.

As shown in the following figure, the setting cookie of GitHub

browser

You can operate directly in JavaScript:

[xss_clean] = "age=12; expires=Thu, 26 Feb 2116 11:50:25 GMT; domain=github.com; path=/"

How to modify cookie

When modifying a cookie, make sure that the name-domain-path is consistent, otherwise the old value will not be modified, but a new cookie will be added.

How to delete a cookie

Make sure the name-domain-path is consistent and set the expires to a past point in time

SessionStorage usage

SetItem (key, val)

GetItem (key)

Details

Can only be used by setting the current domain of sessionStorage

Only page refresh will not clear sessionStorage. The rest will clean up the sessionStorage (such as opening a new tab, shutting down the current tab and opening a new tab, let alone closing the browser)

LocalStorage usage

SetItem (key, val)

GetItem (key)

Details

It can only be used by setting the current domain of localStorage, but the newly opened tab can still be used and the browser is closed and reopened

If the user does not delete it actively, it will be stored forever.

The size is 4m

LocalStorage can store data in the form of kmurv. The stored value needs to be a string type, so you cannot store the object directly, but you can serialize the object into a string and then store it. If it is forcibly stored in object, it will be called object.toString and tragically, the correct method should be JSON.stringify.

Websql

The Web SQL database API is not part of the HTML5 specification, but it is a separate specification that introduces a set of APIs that uses SQL to operate on client-side databases.

Use

Three core methods:

OpenDatabase: this method creates a database object using either an existing database or a newly created database.

Transaction: this approach allows us to control a transaction and perform a commit or rollback based on that situation.

ExecuteSql: this method is used to execute the actual SQL query.

The above is all the content of the article "sample Analysis of http Front-end Storage". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

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.