Detailed explanation of jQuery's Cookie plug-in-JS Tutorial-php.cn

Detailed explanation of jQuery's Cookie plug-in

高洛峰

Release： 2016-12-05 15:37:38

Original

1274 people have browsed it

1. The jQuery.Cookie.js plug-in is a lightweight Cookie management plug-in.

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 jQuery plug-in is introduced twice or multiple times on the same page, this error will be reported.

Usage:

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

<script src="jQuery.1.8.3.js" type="text/javascript"></script>
<script src="jquery.cookie.js" type="text/javascript"></script>

Copy after login

　 2. Function.

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

　　 (1) Read the cookie value

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

示例：$.cookie("username");　　　　　 读取保存在cookie中名为的username的值。

Copy after login

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　erated in in in me in in on CookieValue >> $.cookie(cookieName,cookieValue); CookieName: The name of the cookie to be set, cookieValue represents the corresponding value.

示例: $.cookie("username","admin");　 将值"admin"写入cookie名为username的cookie中。
 
　　　　　 $.cookie("username",NULL);　　　销毁名称为username的cookie

Copy after login

　 (3) [option] Parameter description:

　 Expires: Limited date, which can be an integer or a date (unit: day).

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

示例： $.cookie("like", $(":radio[checked]").val(), {
　 　path: "/", expiress: 7
 })

Copy after login

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=&#39;刘德华&#39;]").attr("checked", &#39;checked&#39;)
 }
 else {
 $(":radio[value=&#39;张学友&#39;]").attr("checked", &#39;checked&#39;)
 }
 $(":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 strings. Objects usually need to be serialized before they can be stored. cookie, and when retrieving it, you need to deserialize it to get the object.

$(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