YouTip

--- Cookie is used to store user information of web pages. --- ## What is Cookie? Cookie is some data, stored in a text file on your computer. When the web server sends a web page to the browser, after the connection is closed, the server does not record the user's information. The purpose of Cookie is to solve 'how to record client user information': * When the user visits a web page, his name can be recorded in the cookie. * When the user visits the page again, the user's visit record can be read from the cookie. Cookie is stored in name/value pairs, as shown below: username=John Doe When the browser requests a web page from the server, the cookie belonging to that page is added to the request. The server obtains user information in this way. --- ## Using JavaScript to Create Cookie JavaScript can use the **document.cookie** property to create, read, and delete cookies. In JavaScript, creating a cookie is shown as follows: document.cookie="username=John Doe"; You can also add an expiration time to a cookie (in UTC or GMT time). By default, the cookie is deleted when the browser is closed: document.cookie="username=John Doe; expires=Thu, 18 Dec 2043 12:00:00 GMT"; You can use the path parameter to tell the browser the cookie's path. By default, the cookie belongs to the current page. document.cookie="username=John Doe; expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/"; --- ## Using JavaScript to Read Cookie In JavaScript, you can use the following code to read a cookie: var x = document.cookie; | ![Image 1: Note]( | document.cookie returns all cookies as a string in the format: cookie1=value; cookie2=value; cookie3=value; | | --- | --- ## Using JavaScript to Modify Cookie In JavaScript, modifying a cookie is similar to creating a cookie, as shown below: document.cookie="username=John Smith; expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/"; The old cookie will be overwritten. --- ## Using JavaScript to Delete Cookie Deleting a cookie is very simple. You only need to set the expires parameter to a past time, as shown below, set to Thu, 01 Jan 1970 00:00:00 GMT: document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT"; Note: when deleting, you do not need to specify the cookie's value. --- ## Cookie String The document.cookie property looks like a plain text string, but it is not. Even if you write a complete cookie string into document.cookie, when you reread the cookie information, the cookie information is displayed as name/value pairs. If you set a new cookie, the old cookie will not be overwritten. The new cookie will be added to document.cookie, so if you reread document.cookie, you will obtain the following data: cookie1=value; cookie2=value; If you need to find a specific cookie value, you must create a JavaScript function to search for the cookie value in the cookie string. --- ## JavaScript Cookie Example In the following example, we will create a cookie to store the visitor's name. First, when the visitor accesses the web page, he will be prompted to enter his name. This name will be stored in the cookie. When the visitor visits the page again, he will see a welcome message. In this example, we will create 3 JavaScript functions: 1. Function to set cookie value 2. Function to get cookie value 3. Function to detect cookie value --- ## Function to Set Cookie Value First, we create a function to store the visitor's name: function setCookie(cname,cvalue,exdays){var d = new Date(); d.setTime(d.getTime()+(exdays*24*60*60*1000)); var expires = "expires="+d.toGMTString(); document.cookie = cname + "=" + cvalue + "; " + expires; } **Function explanation:** In the function parameters above, the cookie's name is cname, the cookie's value is cvalue, and the cookie's expiration time is set to expires. This function sets the cookie name, cookie value, and cookie expiration time. --- ## Function to Get Cookie Value Then, we create a function to return the value of a specified cookie: function getCookie(cname){var name = cname + "="; var ca = document.cookie.split(';'); for(var i=0; i<ca.length; i++){var c = ca.trim(); if(c.indexOf(name)==0)return c.substring(name.length,c.length); }return""; } **Function explanation:** The parameter for cookie name is cname. Create a text variable to retrieve the specified cookie: cname + "=". Use semicolon to split the document.cookie string, and assign the resulting string array to ca (ca = document.cookie.split(';')). Loop through the ca array (i=0;i<ca.length;i++), then read each value in the array and trim leading/trailing spaces (c=ca.trim()). If cookie is found (c.indexOf(name) == 0), return the cookie's value (c.substring(name.length,c.length). If cookie