Home >Web Front-end >JS Tutorial >Detailed explanation of jQuery's Cookie plug-in

Detailed explanation of jQuery's Cookie plug-in

高洛峰Original: 2016-12-05 15:37:381310browse

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>

　 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的值。

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　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

　 (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
 })

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>

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);　　　　　　　　//输反序列化出来的对象的姓名值
 }
 })

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Example of jQuery implementing ToolTip element positioning and display functionNext article：Example of jQuery implementing ToolTip element positioning and display function

See more

Detailed explanation of jQuery's Cookie plug-in

Related articles