To read more good articles, please Punch GitHub Blog Hundreds of excellent articles a year are waiting for you!

In order to give back to the reader, Daqian World is held on an irregular basis (one to three times a month), a cash lottery, a bottom 200, plus user appreciation. Hope you can become a little brocade in Daqian World. Try it now

Cookie s provide a useful way for Web applications to store user-related information.For example, when a user visits our site, cookies can be used to save user preferences or other information so that the application can retrieve previously saved information the next time the user visits our site.

What is a Cookie?

Cookies are small pieces of text that are passed between Web servers and browsers along with user requests and pages.Each time a user visits the site, the Web application can read the information contained in the Cookie.

Cookie s appear to solve the problem of saving user information.for example

• When a user visits a Web page, the user's name can be stored in a cookie.
• The next time a user visits the page, the cookie remembers the user name.

cookie s can remember users'information on all web pages.It contains information as a string and is saved as a key-value pair, in the form of key=value.Individual cookies are generally separated by';'.

username = Daisy Green

Cookie Disadvantages

• Cookies may be disabled.When a user places great emphasis on privacy protection, he is likely to disable the cookie function of his browser.
• Cookies are browser-related.This means that even if you visit the same page, cookie s stored in different browsers cannot be accessed by each other.
• Cookies may be deleted.Because each cookie is a file on the hard disk, it is very likely that it will be deleted by the user.
• The cookie security is not high enough.All cookies are recorded in a file in plain text, so if you want to save information such as username password, it is best to encrypt it beforehand.

Cooke works

The server sends some data to the visitor's browser as a cookie.If the browser allows cookies.Store it as a plain text record on the visitor's hard drive.

When a visitor jumps to another page, the browser sends the same cookie to the server for retrieval.Once it is retrieved, your server knows or remembers what was previously stored.

Composition of Cookie s

Cookie In the Header information of HTTP, the Header format of HTTP Set-Cookie is as follows:

Set-Cookie: name=value; [expires=date]; [path=path];
[domain=domainname]; [secure];

A specific example in HTTP code is:

<meta http-equiv="set-cookie" content=" cookieName = cookieValue;
expires=01-Dec-2006 01:14:26 GMT; path=/" />

From the format above, you can see that cookies are made up of the following parts.

Name/Value pairs

Name/ValueSeparated by semicolons, oneCookieAt most20Yes, there is at most one page per pageCookie，ValueLength not exceeding4K. aboutValueValue, preferablyencodeURIComponentCode it.

Domain

DomainDomain names are alsoCookieBy default, the domain name of a Web page accessed by a user is stored inCookieMedium.If this is setCookieDomain name value means that all servers on the domain name, not just the server you are accessing, can access thisCookie，This is not normally done.Set the format of your domain name as follows:domain=http://xyz.com

path

Set which directory pages in a particular server have access to cookies, and set the path in the format path = /movies

Expires

Sets the Cookie's lifetime. By default, when the user closes the browser, the Cookie is automatically deleted. If no Cookie expires, the Cookie disappears when the user closes the browser.Setting this item will extend the life of the Cookie.Set the time in JS using the GMT form of the Date object in the following format: expires = date.toGMTString()

Secure

Take true or false values.If true, cookies must be sent through https.

JS Cookie

In JS, cookies can be manipulated using the cookie property of the Document object.JS can read, create, modify and delete cookies from the current web page to see specific sausage operations.

Create Cookie s

JS can use the document.cookie property to create cookies, which can be created in the following ways:

document.cookie = "username=Daisy Green";

You can also add a valid date (UTC time).By default, cookie s are deleted when the browser is closed:

document.cookie = "username=Daisy Green; expires=Mon, 26 Aug 2019 12:00:00 UTC";

The path parameter tells the browser which path the cookie belongs to.By default, cookies belong to the current page.

document.cookie = "username=Daisy Green; expires=Mon, 26 Aug 2019 12:00:00 UTC"; path=/";

Read Cookie s

With JS, cookie s can be read as follows:

var x = document.cookie;

Example:

<html>
   <head>   
      <script type = "text/javascript">
         <!--
            function ReadCookie() {
               var allcookies = document.cookie;
               document.write ("All Cookies : " + allcookies );
                
               // Get all the cookies pairs in an array
               cookiearray = allcookies.split(';');
                
               // Now take key value pair out of this array
               for(var i=0; i<cookiearray.length; i++) {
                  name = cookiearray[i].split('=')[0];
                  value = cookiearray[i].split('=')[1];
                  document.write ("Key is : " + name + " and Value is : " + value);
               }
            }
         //-->
      </script>      
   </head>
    
   <body>     
      <form name = "myform" action = "">
         <p> click the Button to View Result:</p>
         <input type = "button" value = "Get Cookie" onclick = "ReadCookie()"/>
      </form>      
   </body>
</html>

Function:

Change cookie s

By using JS, we can change it as if we were creating a cookie:

document.cookie = "username=Steve Jobs; expires=Sun, 31 Dec 2017 12:00:00 UTC; path=/";

This will overwrite the old cookie s.

Example:

<html>
   <head>   
      <script type = "text/javascript">
         <!--
            function WriteCookie() {
               var now = new Date();
               now.setMonth( now.getMonth() + 1 );
               cookievalue = escape(document.myform.customer.value) + ";"
                
               document.cookie = "name=" + cookievalue;
               document.cookie = "expires=" + now.toUTCString() + ";"
               document.write ("Setting Cookies : " + "name=" + cookievalue );
            }
         //-->
      </script>      
   </head>
    
   <body>
      <form name = "myform" action = "">
         Enter name: <input type = "text" name = "customer"/>
         <input type = "button" value = "Set Cookie" onclick = "WriteCookie()"/>
      </form>      
   </body>
</html>

Function:

Delete cookie s

Deleting a cookie is easy without specifying a cookie value: simply set the expires parameter to a date in the past:

document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";

The cookie path should be defined to ensure that the correct cookie is deleted.If you don't specify a path, some browsers won't let us delete cookies.

Example:

<html>
   <head>   
      <script type = "text/javascript">
         <!--
            function WriteCookie() {
               var now = new Date();
               now.setMonth( now.getMonth() - 1 );
               cookievalue = escape(document.myform.customer.value) + ";"
                
               document.cookie = "name=" + cookievalue;
               document.cookie = "expires=" + now.toUTCString() + ";"
               document.write("Setting Cookies : " + "name=" + cookievalue );
            }
          //-->
      </script>      
   </head>
    
   <body>
      <form name = "myform" action = "">
         Enter name: <input type = "text" name = "customer"/>
         <input type = "button" value = "Set Cookie" onclick = "WriteCookie()"/>
      </form>      
   </body>
</html>

BUGs that may exist after code deployment are not known in real time. In order to solve these BUGs afterwards, a lot of time has been spent debugging the log. By the way, a useful BUG monitoring tool is recommended. Fundebug.

Reference resources: https://www.w3schools.com/js/...

Communication

The dry goods series articles are summarized below, feel good to order Star, welcome to join the group to learn from each other.

https://github.com/qq44924588...

I am Xiao Zhi, the author of the public number "Move the World", a fan of keeping learning about front-end technology.I often share what I've learned and what I've seen. On the way to the next level, I'll reluctantly!

Focus on the public number and reply to the benefits in the background. You can see the benefits, you know.