What are cookies in javascript? And detailed explanation of Document.Cookie usage

Specifically, the cookie mechanism uses a solution that maintains state on the client side, while the session mechanism uses a solution that maintains state on the server side.

At the same time, we also see that since the solution of maintaining state on the server side also needs to save an identity on the client side, the session mechanism may need to use the cookie mechanism to achieve the purpose of saving the identity. , but it actually has other options.

Setting cookie

Each cookie is a name/value pair. You can assign the following string to the 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";

cannot be used in cookie names or values. Use semicolons (;), commas (,), equal signs (=), and spaces. 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 emergence of Chinese garbled characters. For example:

document.cookie="str="+escape（"I love ajax"）；

Equivalent to:

 document.cookie="str=I%20love%20ajax";

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

Although document.cookie looks like a property, it 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, just re- Assign a value, 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 obtain a string consisting of multiple name/value pairs separated by semicolons. These name/value pairs include the names under the domain name. All cookies. For example:

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. In a similar way, you can get a Or the value of multiple cookies, the main technique is still the related operations of strings and arrays.

Set the expiration date for cookies

Until now, all cookies are single-session cookies, that is, browsing These cookies will be lost after the server is closed. In fact, these 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 expressed in GMT format. This statement sets the userId cookie to the expiration time represented by GMT_String. After this time, the cookie will Disappeared and inaccessible. For example: If you want to set a cookie to expire after 10 days, you can do it like this:

 <script language="JavaScript" type="text/javascript">
  <!--
  //获取当前时间
  var date=new Date（）；
  var expireDays=10;
  //将date设置为10天以后的时间
  date.setTime（date.getTime（）+expireDays*24*3600*1000）；
  //将userId和userName两个cookie设置为10天后过期
  document.cookie="userId=828; userName=hulk; expire="+date.toGMTString（）；
  //-->
  </script>
 
  删除cookie
 
  为了删除一个cookie，可以将其过期时间设定为一个过去的时间，例如：
 
  <script language="JavaScript" type="text/javascript">
  <!--
  //获取当前时间
  var date=new Date（）；
  //将date设置为过去的时间
  date.setTime（date.getTime（）-10000）；
  //将userId这个cookie删除
  document.cookie="userId=828; expire="+date.toGMTString（）；
  //-->
  </script>

ps: Jquery Cookie operation parameters:

Create A session cookie:

<script language="JavaScript" type="text/javascript">
<!--
//获取当前时间
var date=new Date（）；
var expireDays=10;
//将date设置为10天以后的时间
date.setTime（date.getTime（）+expireDays*24*3600*1000）；
//将userId和userName两个cookie设置为10天后过期
document.cookie="userId=828; userName=hulk; expire="+date.toGMTString（）；
//-->
</script>

删除cookie

为了删除一个cookie，可以将其过期时间设定为一个过去的时间，例如：

<script language="JavaScript" type="text/javascript">
<!--
//获取当前时间
var date=new Date（）；
//将date设置为过去的时间
date.setTime（date.getTime（）-10000）；
//将userId这个cookie删除
document.cookie="userId=828; expire="+date.toGMTString（）；
//-->
</script>

Note: When the cookie time is not specified, the created cookie will be valid until the user's browser is closed by default, so it is called a session cookie.

Create a persistent cookie:

$.cookie(‘cookieName','cookieValue'，｛expires：7｝);

Note: When the time is specified, it is called a persistent cookie, and the validity time is days.

Create a persistent cookie with a valid path:

$.cookie(‘cookieName','cookieValue'，｛expires：7，path：'/'｝);

Note: If a valid path is not set, by default, the cookie can only be read on the current page where the cookie is set. , the path of the cookie is used to set the top-level directory that can read the cookie.

Create a persistent cookie with a valid path and domain name:

$.cookie(‘cookieName','cookieValue'，｛expires：7，path：'/'，domain: ‘chuhoo.com'，secure: false，raw:false｝);

Note: domain: The domain name owned by the web page where the cookie is created; secure: The default is false, if true , the cookie transmission protocol needs to be https; raw: defaults to false, automatically encodes and decodes when reading and writing (use encodeURIComponent to encode, use decodeURIComponent to decode), turn off this function, please set it to true.

Get cookie:

$.cookie(‘cookieName');   //如果存在则返回cookieValue，否则返回null。

删除cookie：

$.cookie(‘cookieName',null);

注：如果想删除一个带有效路径的cookie，如下：$.cookie(‘cookieName',null,{path:'/'});

The above is the detailed content of What are cookies in javascript? And detailed explanation of Document.Cookie usage. For more information, please follow other related articles on the PHP Chinese website!