Understanding and using JavaScript Cookies

JavaScript Cookie plays an important role in caching. This article will give some introduction to it.

Cookies are pieces of data that are stored in text files on your computer.

When the web server sends a web page to the browser, the server will not record the user's information after the connection is closed.

The role of Cookie is to solve "how to record user information on the client":

When a user visits a web page, his name can be recorded in the cookie.

The next time the user visits this page, the user access record can be read in the cookie.

Cookies are stored as name/value pairs, as shown below:

username=John Doe

When the browser requests a web page from the server, the cookie belonging to the page will be added to the request. The server obtains user information in this way.

Use JavaScript to create cookies

JavaScript can use the document.cookie attribute to create, read, and delete cookies.

In JavaScript, create a cookie as follows:

document.cookie="username=John Doe";

You can also add an expiration time (in UTC or GMT time) to the cookie. By default, cookies are deleted when the browser is closed:

document.cookie="username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 GMT";

You can tell the browser the path to the cookie using the path parameter. By default, the cookie belongs to the current page.

document.cookie="username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 GMT; path=/";

Read Cookies using JavaScript

In JavaScript, you can use the following code to read cookies:

var x = document.cookie;

document.cookie will return all cookies in the form of strings, type format: cookie1=value; cookie2=value; cookie3=value;

Use JavaScript to modify Cookie

In JavaScript, modify Cookies are similar to creating cookies as follows:

document.cookie="username=John Smith; expires=Thu, 18 Dec 2013 12:00:00 GMT; path=/";

Old cookies will be overwritten.

Deleting Cookies Using JavaScript

Deleting cookies is very easy. You only need to set the expires parameter to the previous 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 that you do not have to specify the value of the cookie when you delete it.

Cookie String

The document.cookie property looks like an ordinary text string, but it is not.

Even if you write a complete cookie string in document.cookie, when you re-read the cookie information, the cookie information is displayed in the form of 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 re-read document.cookie you will get data like this:

cookie1=value; cookie2=value;

show All Cookies Create Cookie 1 Create Cookie 2 Delete Cookie 1 Delete Cookie 2

If you need to find a specific cookie value, you must create a JavaScript function to find the cookie value in the cookie string.

JavaScript Cookie Example

In the following example, we will create a cookie to store the visitor name.

First, when a visitor visits the web page, he will be asked to fill in his name. This name will be stored in the cookie.

The next time the visitor visits the page, he will see a welcome message.

In this example we will create 3 JavaScript functions:

Function to set cookie value

Function to get cookie value

Detect cookie value Function

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 analysis:

The above In the function parameters, the name of the cookie is cname, the value of the cookie is cvalue, and the expiration time of the cookie expires is set.

This function sets the cookie name, cookie value, and cookie expiration time.

Function to get cookie value

Then, we create a function user to return the value of the specified cookie:

function getCookie(cname){
  var name = cname + "=";
  var ca = document.cookie.split(';');
  for(var i=0; i<ca.length; i++) 
  {
    var c = ca[i].trim();
    if (c.indexOf(name)==0) return c.substring(name.length,c.length);
  }
  return "";}

Function analysis:

Parameters of cookie name for cname.

Create a text variable for retrieving the specified cookie:cname "=".

Use semicolons to split the document.cookie string, and assign the split string array to ca (ca = document.cookie.split(';')).

Loop through the ca array (i=0;i

If the cookie is found (c.indexOf(name) == 0), return the cookie value (c.substring(name.length,c.length).

If the cookie is not found, Returns "".

Function to detect cookie value

Finally, we can create a function that detects whether the cookie is created.

If the cookie is set, a greeting message will be displayed. .

If the cookie is not set, a pop-up window will be displayed to ask the visitor's name, and the setCookie function will be called to store the visitor's name for 365 days:

function checkCookie(){
  var username=getCookie("username");
  if (username!="")
  {
    alert("Welcome again " + username);
  }
  else 
  {
    username = prompt("Please enter your name:","");
    if (username!="" && username!=null)
    {
      setCookie("username",username,365);
    }
  }}

Complete example

Example

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 getCookie(cname){
    var name = cname + "=";    var ca = document.cookie.split(&#39;;&#39;);    for(var i=0; i<ca.length; i++) {
        var c = ca[i].trim();        if (c.indexOf(name)==0) { return c.substring(name.length,c.length); }
    }
    return "";}function checkCookie(){
    var user=getCookie("username");    if (user!=""){
        alert("欢迎 " + user + " 再次访问");    }
    else {
        user = prompt("请输入你的名字:","");          if (user!="" && user!=null){
            setCookie("username",user,30);        }
    }}

本篇对相关cookie的相关知识做出了一些了解，更多的学习资料清关注php中文网即可观看。

相关推荐：

JavaScript 弹窗事件的相关知识

JavaScript typeof, null, 和 undefined的相关知识

JavaScript RegExp 对象的使用介绍

The above is the detailed content of Understanding and using JavaScript Cookies. For more information, please follow other related articles on the PHP Chinese website!