Layui 引入jQuery.Cookie插件

使用

首先你需要下载jQuery.Cookie.js
下载地址

然后将
在这里插入图片描述
文件复制粘贴至你的项目的静态文件资源中,我和layui引入的jquery.js放在一起并将文件改名为了cookie.js,如下图所示
在这里插入图片描述
然后修改cookie.js的文件内容(后面有详细的修改好的js)

layui.define('jquery', function (exports) {   
    //依赖jQuery   
    var jQuery = layui.jquery;  
    //插件内容  
    将jquery.cookie.js文件的内容复制到此处  
  
    exports('jquery.cookie', null);  
});  
//使用方法  
layui.use('jquery.cookie', function () {});  

我修改后的完整的js文件,可以直接复制替换到你的jquery.cooki.js

layui.define(["jquery"], function (exports) {
	var jQuery = layui.jquery;
	(function ($) {
		/*!
        * jQuery Cookie Plugin v1.4.1
        * https://github.com/carhartl/jquery-cookie
        *
        * Copyright 2013 Klaus Hartl
        * Released under the MIT license
        */
		(function (factory) {
			if (typeof define === 'function' && define.amd) {
// AMD
				define(['jquery'], factory);
			} else if (typeof exports === 'object') {
// CommonJS
				factory(require('jquery'));
			} 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.
// If we can't parse the cookie, ignore it, it's unusable.
					s = decodeURIComponent(s.replace(pluses, ' '));
					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.setTime(+t + days * 864e+5);
					}

					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) {
					return false;
				}

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

		}));

	})(jQuery);
	exports('cookie', null);
});

然后进行cookie的路径配置(layui.config一定和 layui.use是同级,都放在最外层)

layui.config({
        base: '../lib/layui-v2.5.5/lay/modules/' //假设这是cookie.js所在的目录(本页面的相对路径)
    }).extend({ //设定模块别名
        //cookie: 'cookie' 如果cookie.js是在根目录,也可以不用设定别名,因为我cookie.js的是在根目录,所以这句话其实也不用写也行。
    });

    layui.use(['layer','form','jquery','cookie'], function () {
        var $ = layui.jquery,
            form = layui.form,
            cookie=layui.cookie,
            layer = layui.layer;
            
            //..... 不详细写了后面有我实际调用cookie的截图
            });

在这里插入图片描述
cookie的调用
在这里插入图片描述

中文乱码问题

cookie存取数据后出现中文乱码问题,这里我们利用js的escape,unescape
对存储的字符进行加密解密实现中文字符存取,但是我用了不太好使,然后利用js重新写了Setcookie方法和getCookie方法,发现可以实现中文字符存取,也是利用了escape,unescape进行加密解密

 //写入cookie
            function SetCookie(name, value) {
                var exp = new Date();
                exp.setTime(exp.getTime() + 7 * 24 * 60 * 60 * 1000); //7天过期
                document.cookie = name + "=" + escape(value) + ";expires=" + exp.toGMTString();
                return true;
            };

//读取cookie
        function getCookie(name) {
            var arr = document.cookie.match(new RegExp("(^| )" + name + "=([^;]*)(;|$)"));
            if (arr != null) return unescape(arr[2]); return null;
        }

学习过程中借鉴了https://www.studenty.cn/?p=1000 ,表示感谢

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值