JQ设置cookie、读取cookie、删除cookie（2）

最新推荐文章于 2024-04-24 12:00:04 发布

QQ_286115751

最新推荐文章于 2024-04-24 12:00:04 发布

阅读量1.5w

点赞数 3

文章标签： cookie 服务器插件 html5 javascript

本文链接：https://blog.csdn.net/qq_35515563/article/details/76513727

版权

之前有介绍过一片也是关于js的原生cookie的使用。
后来在工作和使用中发现了另外一个将常用的cookie的jq插件，下列本人将对其的使用方法进行简单的描述说明~

PS：
1.该jqueryCookie因是jq版本，切记使用时请先引入jq文件。
2.cookie的使用需要在服务器环境下测试方可查看到效果。

<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jquery.cookie.js"></script>

html：

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jquery.cookie.js"></script>
  <title>Document</title>
 </head>
 <body>
 <button id="setCookie" >设置cookie</button>
  <button id="lookCookie" >获取cookie值</button>
  <button id="clearCookie" >清除cookie</button>
 <div ><span>cookie的值:</span><span id="cookieValue"></span></div>
 </body>
</html>

js：

  <script>

  //设置cookie的值
  $("#setCookie").click(function(){
  
      $.cookie('the_cookie', 'the_value', { expires: 7 });
      $("#cookieValue").text($.cookie('the_cookie'));

  });


  //查看cookie的值
  $("#lookCookie").click(function(){

    $("#cookieValue").text($.cookie('the_cookie'));

  });


  //清除cookie的值
  $("#clearCookie").click(function(){

    $.cookie('the_cookie',null);

  });

  </script>

效果如下：

JQ Cookie 插件代码：

/*!
 * jQuery Cookie Plugin v1.4.0
 * https://github.com/carhartl/jquery-cookie
 *
 * Copyright 2013 Klaus Hartl
 * Released under the MIT license
 */
(function (factory) {
	if (typeof define === 'function' && define.amd) {
		// AMD. Register as anonymous module.
		define(['jquery'], factory);
	} else {
		// Browser globals.
		factory(jQuery);
	}
}(function ($) {

	var pluses = /\+/g;

	function encode(s) {
		return config.raw ? s : encodeURIComponent(s);
	}

	function decode(s) {
		return config.raw ? s : decodeURIComponent(s);
	}

	function stringifyCookieValue(value) {
		return encode(config.json ? JSON.stringify(value) : String(value));
	}

	function parseCookieValue(s) {
		if (s.indexOf('"') === 0) {
			// This is a quoted cookie as according to RFC2068, unescape...
			s = s.slice(1, -1).replace(/\\"/g, '"').replace(/\\\\/g, '\\');
		}

		try {
			// Replace server-side written pluses with spaces.
			// If we can't decode the cookie, ignore it, it's unusable.
			s = decodeURIComponent(s.replace(pluses, ' '));
		} catch(e) {
			return;
		}

		try {
			// If we can't parse the cookie, ignore it, it's unusable.
			return config.json ? JSON.parse(s) : s;
		} catch(e) {}
	}

	function read(s, converter) {
		var value = config.raw ? s : parseCookieValue(s);
		return $.isFunction(converter) ? converter(value) : value;
	}

	var config = $.cookie = function (key, value, options) {

		// Write
		if (value !== undefined && !$.isFunction(value)) {
			options = $.extend({}, config.defaults, options);

			if (typeof options.expires === 'number') {
				var days = options.expires, t = options.expires = new Date();
				t.setDate(t.getDate() + days);
			}

			return (document.cookie = [
				encode(key), '=', stringifyCookieValue(value),
				options.expires ? '; expires=' + options.expires.toUTCString() : '', // use expires attribute, max-age is not supported by IE
				options.path    ? '; path=' + options.path : '',
				options.domain  ? '; domain=' + options.domain : '',
				options.secure  ? '; secure' : ''
			].join(''));
		}

		// Read

		var result = key ? undefined : {};

		// To prevent the for loop in the first place assign an empty array
		// in case there are no cookies at all. Also prevents odd result when
		// calling $.cookie().
		var cookies = document.cookie ? document.cookie.split('; ') : [];

		for (var i = 0, l = cookies.length; i < l; i++) {
			var parts = cookies[i].split('=');
			var name = decode(parts.shift());
			var cookie = parts.join('=');

			if (key && key === name) {
				// If second argument (value) is a function it's a converter...
				result = read(cookie, value);
				break;
			}

			// Prevent storing a cookie that we couldn't decode.
			if (!key && (cookie = read(cookie)) !== undefined) {
				result[name] = cookie;
			}
		}

		return result;
	};

	config.defaults = {};

	$.removeCookie = function (key, options) {
		if ($.cookie(key) !== undefined) {
			// Must not alter options, thus extending a fresh object...
			$.cookie(key, '', $.extend({}, options, { expires: -1 }));
			return true;
		}
		return false;
	};

}));

原生写法：
http://blog.csdn.net/qq_35515563/article/details/59503415

QQ_286115751

关注

3
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
JQ设置cookie、读取cookie、删除cookie（2）

之前有介绍过一片也是关于js的原生cookie的使用。后来在工作和使用中发现了另外一个将常用的cookie的jq插件，下列本人将对其的使用方法进行简单的描述说明~PS：1.该jqueryCookie因是jq版本，切记使用时请先引入jq文件。2.cookie的使用需要在服务器环境下测试方可查看到效果。html：
复制链接

扫一扫