Detailed analysis of jquery.cookie usage

Cookie is generated by the server and sent to the User-Agent (usually a browser). The browser will save the key/value of the cookie to a text file in a certain directory and send it the next time the same website is requested. This cookie is given to the server (provided the browser is set to enable cookies).

For example, a shopping website stores product lists that users have browsed, or a portal website remembers what type of news a user likes to browse. With the user's permission, could it also be possible to store the user's login information so that the user does not have to type it in each time they visit the website?

How to handle cookies in js/jquery? Today I will share a cookie operation class - jQuery.Cookie.js, which is a lightweight cookie management plug-in.

Cookie download address: http://plugins.jquery.com/project/cookie.

Special reminder, a special error was discovered today. Google browser prompted: has no method $.cookie. Firefox browser prompts: $.cookie is not a function; After debugging for a long time, I finally found the reason. If the same page introduces the Jquery plug-in twice or multiple times, this error will be reported.

How to use:

1. Introduce jQuery and jQuery.Cookie.js plug-ins.

Copy code The code is as follows:

2. Write cookie to file

 var COOKIE_NAME = 'username';  
  if( $.cookie(COOKIE_NAME) ){  
    $("#username").val( $.cookie(COOKIE_NAME) );  
  }  
  $("#check").click(function(){  
    if(this.checked){  
      $.cookie(COOKIE_NAME, $("#username").val() , { path: '/', expires: 10 });  
      //var date = new Date();  
      //date.setTime(date.getTime() + (3 * 24 * 60 * 60 * 1000)); //三天后的这个时候过期  
      //$.cookie(COOKIE_NAME, $("#username").val(), { path: '/', expires: date });  
    }else{  
      $.cookie(COOKIE_NAME, null, { path: '/' }); //删除cookie  
    }  
  });

Copy after login

Function.

Syntax: $.cookie(name, value, [option])

　(1) Read cookie value

$.cookie(cookieName) cookieName: The name of the cookie to be read.

Example: $.cookie("username"); Read the value of username stored in the cookie.

　(2) Write the set cookie value:

$.cookie(cookieName,cookieValue); cookieName: the name of the cookie to be set, cookieValue represents the corresponding value.

Example: $.cookie("username","admin"); Write the value "admin" into the cookie named username.

$.cookie("username",NULL); Destroy the cookie named username

　(3) [option] Parameter description:

Expires: Limited date, which can be an integer or a date (unit: days). You should also pay attention here. If you don’t set this thing, the cookie will become invalid after the browser is closed

Path: The path where the cookie value is saved. By default, it is consistent with the path of the created page.

domin: cookie domain name attribute, the default is the same as the domain name of the created page. You should pay great attention to this place. The concept of cross-domain. If you want the primary domain name and the secondary domain name to be valid, you must set ".xxx.com"

secure: A Boolean value indicating whether a security protocol is required when transmitting cookie values.

Example:

Copy code The code is as follows:

$.cookie("like", $(":radio[checked]").val(), { 

Path: "/", expiress: 7 

         })

A complete page code for setting and reading cookies:

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
  <title>jQuery学习2</title> 
  <script src="jQuery.1.8.3.js" type="text/javascript"></script> 
  <script src="jquery.cookie.js" type="text/javascript"></script> 
  <script type="text/javascript"> 
    $(function () { 
      $("#username").val($.cookie("username")); 
      if ($.cookie("like") == "刘德华") { 
        $(":radio[value='刘德华']").attr("checked", 'checked') 
      } 
      else { 
        $(":radio[value='张学友']").attr("checked", 'checked') 
      } 
      $(":button").click(function () { 
        $.cookie("username", $("#username").val(), { 
          path: "/", expires: 7 
        }) 
        $.cookie("like", $(":radio[checked]").val(), { 
          path: "/", expiress: 7 
        }) 
      }) 
    }) 
  </script> 
</head> 
<body> 
  <p><input type="text" id="username" value="" /></p> 
  <p> 
    <input type="radio" name="like" value="刘德华" />刘德华 
    <input type="radio" name="like" value="张学友" />张学友 
  </p> 
  <p><input type="button" value="保存" /></p> 
</body> 
</html>

Copy after login

A cookie is essentially a txt text, so it can only be stored in a string. The object usually needs to be serialized before it can be stored in the cookie, and when retrieved, it must be deserialized to get the object again.

$(function () { 
     if ($.cookie("o") == null) { 
       var o = { name: "张三", age: 24 }; 
       var str = JSON.stringify(o);　　//对序列化成字符串然后存入cookie 
       $.cookie("o", str, { 
         expires:7  //设置时间，如果此处留空，则浏览器关闭此cookie就失效。 
       }); 
       alert("cookie为空"); 
     } 
     else { 
       var str1 = $.cookie("o"); 
       var o1 = JSON.parse(str1);　　//字符反序列化成对象 
       alert(o1.name);　　　　　　　　//输反序列化出来的对象的姓名值 
     } 
   })

Copy after login

쿠키를 읽고, 쓰고, 삭제할 수 있는 경량 쿠키 플러그인입니다.

jquery.cookie.js 구성

jQuery 라이브러리 파일을 먼저 포함시킨 후 jquery.cookie.js 라이브러리 파일을 포함하세요

사용방법

새 세션 쿠키 추가:

$.cookie('the_cookie', 'the_value');

참고: 쿠키 유효 기간을 지정하지 않으면 생성된 쿠키는 기본적으로 사용자가 브라우저를 닫을 때까지 유효하므로 이를 "세션 쿠키"라고 합니다.

쿠키를 생성하고 유효 기간을 7일로 설정하세요:

$.cookie('the_cookie', 'the_value', { 만료일: 7 });

참고: 쿠키 유효 기간이 지정되면 생성된 쿠키를 "영구 쿠키"라고 합니다.

쿠키를 생성하고 쿠키에 대한 유효한 경로를 설정합니다: