Detailed explanation of Document.Cookie_javascript techniques

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 in fact it has other options. .

Set cookie

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 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, 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, 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, you only need to reassign it, for example:

 document.cookie="userId=929";

This sets the cookie value named userId to 929.

Get the cookie value

Here’s 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 name/value pairs include all cookies under the domain name. For example:

  <script language="JavaScript" type="text/javascript">
  <!--
  document.cookie="userId=828";
  document.cookie="userName=hulk";
  var strCookie=document.cookie;
  alert（strCookie）；
  //-->
  </script>

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:

 <script language="JavaScript" type="text/javascript">
  <!--
  //设置两个cookie
  document.cookie="userId=828";
  document.cookie="userName=hulk";
  //获取cookie字符串
  var strCookie=document.cookie;
  //将多cookie切割为多个名/值对
  var arrCookie=strCookie.split（"; "）；
  var userId;
  //遍历cookie数组，处理每个cookie对
  for（var i=0;i<arrCookie.length;i++）{
  var arr=arrCookie[i].split（"="）；
  //找到名称为userId的cookie，并返回它的值
  if（"userId"==arr[0]）{
  userId=arr[1];
  break;
  }
  }
  alert（userId）；
  //-->
  </script>

This way you get the value of a single cookie. Using a similar method, you can get the value of one or more cookies. The main technique is still the related operations of strings and arrays.

Set expiration date for cookie

So far, all cookies are single-session cookies, that is, these cookies will be lost after the browser 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 disappear and become 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 operating 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：'/'｝);

注：如果不设置有效路径，在默认情况下，只能在cookie设置当前页面读取该cookie，cookie的路径用于设置能够读取cookie的顶级目录。

创建一个持久并带有效路径和域名的cookie：

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

注：domain： 创建cookie所在网页所拥有的域名；secure：默认是false，如果为true，cookie的传输协议需为https；raw：默认为 false，读取和写入时候自动进行编码和解码（使用encodeURIComponent编码，使用decodeURIComponent解码），关闭 这个功能，请设置为true。

获取cookie：

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

删除cookie：

$.cookie(‘cookieName',null);

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