Detailed explanation of setting and deleting JavaScript cookies_javascript skills

Set cookies

Each cookie is a name/value pair. You can assign the following string to document.cookie:
document.cookie="userId=828" ;

If you want to store multiple name/value pairs at one time, you can use semicolons and spaces (; ) to separate them, for example:
document.cookie="userId=828; userName=hulk";

Semicolons (;), commas (,), equal signs (=) and spaces cannot be used in cookie names or values. It's easy to do this in the name of the cookie, but the value to be saved is undefined. How to store these values? The method is to use the escape() function to encode, which can use hexadecimal representation of some special symbols. For example, spaces will be encoded as "20%", which can be stored in the cookie value, and Using this solution can also avoid the occurrence of Chinese garbled characters. For example:
document.cookie="str=" escape("I love ajax");

is equivalent to:
document.cookie="str=I love ajax";

When using escape() encoding, you need to use unescape() to decode after taking out the value to get the original cookie value, which has been introduced before.

Although document.cookie looks like a property and can be assigned different values. But it is different from general attributes. Changing its assignment does not mean losing the original value. For example, executing the following two statements continuously:
document.cookie="userId=828";

document .cookie="userName=hulk";

At this time, the browser will maintain two cookies, namely userId and userName, so assigning a value to document.cookie is more like executing a statement like this:
document. addcookie("userId=828");

document.addcookie("userName=hulk");

In fact, the browser sets cookies in this way. If you want to change The value of a cookie only needs to be reassigned, for example:
document.cookie="userId=929";

This will set the cookie value named userId to 929.

Get the value of the cookie

The following describes how to get the value of the cookie. The value of the cookie can be obtained directly from document.cookie:
var strcookie=document.cookie;

This will get a string consisting of multiple name/value pairs separated by semicolons. These names The / value pair includes all cookies under this domain name. For example:


Figure 7.1 shows The output cookie value. It can be seen that you can only obtain all cookie values ​​at once, but you cannot specify the cookie name to obtain the specified value. This is the most troublesome part of processing cookie values. Users must analyze this string themselves to obtain the specified cookie value. For example, to obtain the value of userId, you can do this:


This way you get the value of a single cookie

Use something like method, you can get the value of one or more cookies, and its main skill is still the related operations of strings and arrays.

Set an expiration date for cookies

Up to now, all cookies are single-session cookies, that is, these cookies will be lost after the browser is closed. In fact, these cookies Cookies are only stored in memory without creating corresponding hard disk files.

In actual development, cookies often need to be saved for a long time, such as saving the user's login status. This can be achieved using the following options:

document.cookie="userId=828; expires=GMT_String";

where GMT_String is a time string in GMT format, this statement It is to set the userId cookie to the expiration time represented by GMT_String. After this time, the cookie will disappear and become inaccessible. For example: If you want to set a cookie to expire after 10 days, you can do it like this:

Copy code The code is as follows:

Delete cookie

In order to delete a cookie, you can set its expiration time to a time in the past, for example:

Copy code The code is as follows:

Specify the path where the cookie can be accessed

By default, if a cookie is created on a page, other pages in the directory where the page is located can also access the cookie . If there are subdirectories under this directory, you can also access it in the subdirectories. For example, a cookie created in www.xxxx.com/html/a.html can be accessed by www.xxxx.com/html/b.html or www.xxx.com/html/some/c.html, but Cannot be accessed by www.xxxx.com/d.html.

In order to control the directories that cookies can access, you need to use the path parameter to set cookies. The syntax is as follows:
document.cookie="name=value; path=cookieDir";

where cookieDir means Directory of accessible cookies. For example:
document.cookie="userId=320; path=/shop";

means that the current cookie can only be used in the shop directory.

If you want to make cookies available throughout the website, you can specify cookie_dir as the root directory, for example:

document.cookie="userId=320; path="/";

Specify the host name that can access the cookie

Similar to the path, the host name refers to different hosts under the same domain, for example: www.google.com and gmail.google.com Just two different host names. By default, cookies created in one host cannot be accessed in another host, but they can be controlled through the domain parameter. The syntax format is:

document.cookie="name =value; domain=cookieDomain";

Take Google as an example. To achieve cross-host access, you can write:

document.cookie="name=value;domain=.google.com ";

In this way, all hosts under google.com can access the cookie.

Comprehensive example: Constructing a universal cookie processing function

The cookie processing process is relatively complex and has certain similarities. Therefore, several functions can be defined to complete common cookie operations, thereby achieving code reuse. Commonly used cookie operations and their function implementations are listed below.

1. Add a cookie: addcookie(name, value, expireHours)

This function receives 3 parameters: cookie name, cookie value, and how many hours it will expire. It is agreed here that when expireHours is 0, no expiration time is set, that is, the cookie disappears automatically when the browser is closed. The function is implemented as follows:

Copy code The code is as follows:

2. Get the cookie value of the specified name: getcookie(name)

This function returns the cookie value named name. If it does not exist, it returns empty. Its implementation is as follows:

Copy code The code is as follows:

3. Delete the cookie with the specified name: deletecookie(name)

This function can delete the cookie with the specified name. Its implementation is as follows:

Copy code The code is as follows: