Jquery.Cookie 使用

前言

项目中需要使用cookie保存用户的信息。所以，选择了Jquery.cookie。插件的下载地址如下官网。

引用

<script src="js/jquery-1.12.4.min.js"></script>
<script src="js/jquery.cookie.js"></script>

注意:使用cookie的使用需要引用Jquery。

使用步骤

新增cookie

$.cookie('会话_key','会话_value');

设置cookie的有效时间

$.cookie('会话_Key','会话_value',{expires:7,path:''/});

注意：会话的有效时间单位为天。

默认的情况下，只有设置的cookie的页面才能使用cookie。如果让一个页面读取另外一个页面的cookie的话。就必须设置路径。

读取cookie

$.cookie('会话_key');

删除cookie

$.cookie('会话_key',null); //传递null作为`cookie`的值。

可选参数

$.cookie('会话_Key','会话_value',
{
   expires:7, //有效期；设置一个整数时，单位是天；也可以设置一个日期对象作为Cookie的过期日期；
   path:''/,  //创建该Cookie的页面路径；
   domain:'jquery.com', //创建该Cookie的页面域名；
   secure:true //如果设为true，那么此Cookie的传输会要求一个安全协议，例如：HTTPS；
});

使用layui表单设置cookie实例

添加引用

<link href="css/layui.css" rel="stylesheet" />
<script src="js/jquery-1.12.4.min.js"></script>
<script src="js/jquery.cookie.js"></script>
<script src="js/layui/layui.js"></script>

前端代码

<div class="layui-form layui-form-pane" lay-filter="bindloginvalue">
     <div class="layui-form-item">
         <label class="layui-form-label"><i class="layui-icon layui-icon-username"></i></label>
         <div class="layui-input-block">
            <input name="username" class="layui-input" type="text" placeholder="请输入账号"  autocomplete="off" />
         </div>
     </div>
      <div class="layui-form-item">
         <label class="layui-form-label"><i class="layui-icon layui-icon-username"></i></label>
         <div class="layui-input-block">
            <input name="username" class="layui-input" type="text" placeholder="请输入密码"  autocomplete="off" />
         </div>
     </div>
     <div class="layui-form-item">
         <input type="checkbox" pane name="remember" title="记住密码" lay-filter="rmb" lay-skin="primary">
         <a href="javascript:;" style="margin-top: 10px;float: right;color: #009688;" id="btnForget">忘记密码?</a>  
     </div>
     <div class="layui-form-item">
        <div class="layui-btn-container">
            <button class="layui-btn layui-btn-fluid" lay-submit lay-filter="login">
                <i class="layui-icon layui-icon-ok-circle"></i>登陆
            </button>
        </div>
     </div>
</div>

JS代码

<script>
       layui.use(['layer', 'form'], function () {
            var layer = layui.layer, form = layui.form, $ = layui.jquery;
            var check = false;
            if ($.cookie("name") != "null" && $.cookie("pwd") != "null") {
                form.val('bindloginvalue', {
                    "username": $.cookie("name"),
                    "userpassword": $.cookie("pwd"),
                    "remember": true,
                });
            }
            /*记住密码*/
            form.on('checkbox(rmb)', function (obj) {
                check = obj.elem.checked;
            });
            /*忘记密码*/
            $("#btnForget").click(function () {
                layer.alert("对不起，该功能正在开发中...");
            });
            /*登录*/
            form.on('submit(login)', function (data) {
                var username = data.field.username;
                var userpwd = data.field.userpassword;
                mSetCookie(check, username, userpwd);
                $.ajax({
                    url: "请求路径",
                    type: "post",
                    dataType: "json",
                    data: { username: username, userpwd: userpwd, Rm: check }
                }).done(function (msg) {
                    if (msg == 0) { layer.msg("登录失败!用户名或密码输入错误..."); return; }
                    else if (msg == 1) { window.location.href = "返回路径"; }
                });
            });
        })
        /*登陆按钮绑定回车*/
        function onEnter() {
            if (window.event.keyCode == 13) {
                document.getElementsByTagName("button")[0].click();
            }
        }
        /*设置会话*/
        function mSetCookie(check, name, pwd) {
            if (check == true) {
                $.cookie("name", name, { expires: 7 });
                $.cookie("pwd", pwd, { expires: 7 });
                //alert('存入cookie');
            }
            else {
                $.cookie("name", null);
                $.cookie("pwd", null);
            }
        }
</script>