zoukankan      html  css  js  c++  java
  • 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>
    
  • 相关阅读:
    SQL Server 用户管理:用 SQL 语句创建数据库用户(SQL Server 2005)
    主题:[Android API学习]AppWidget
    Android UriMatcher ContentUris
    Python的startswith和endswith
    Android编写测试数据库类时对AndroidMainfest文件进行配置
    Oracle数据库设置默认表空间问题
    Android 设置部分的字体的颜色
    Oralce函数经典 日期函数日期加减法
    PKU2593给出一串数字使得其中两个子段和最大
    边框小合集
  • 原文地址:https://www.cnblogs.com/ZengJiaLin/p/13361054.html
Copyright © 2011-2022 走看看