Layui 引入jQuery.Cookie插件

小鱼儿 2023-01-08 02:06 476阅读 0赞

### 使用 ###

首先你需要下载jQuery.Cookie.js  
[下载地址][Link 1]

然后将  
![在这里插入图片描述][20210118134814550.png]  
文件复制粘贴至你的项目的静态文件资源中，我和layui引入的jquery.js放在一起并将文件改名为了cookie.js，如下图所示  
![在这里插入图片描述][2021011813500853.png]  
然后修改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的截图
                });

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoYW5nMTAwMTEx_size_16_color_FFFFFF_t_70]  
cookie的调用  
![在这里插入图片描述][20210118135533754.png]

### 中文乱码问题 ###

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 ，表示感谢

[Link 1]: https://plugins.jquery.com/cookie/
[20210118134814550.png]: /images/20221119/3d8de53da2924a2f9e1c9d90dde0a423.png
[2021011813500853.png]: /images/20221119/ee0df76811084e578e537f7f0057f2d1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoYW5nMTAwMTEx_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20210118135510853.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoYW5nMTAwMTEx,size_16,color_FFFFFF,t_70
[20210118135533754.png]: https://img-blog.csdnimg.cn/20210118135533754.png