Cookie插件的使用

时间 2019-12-09

标签 cookie 插件使用栏目 HTML 繁體版

原文原文链接

jQuery-cookie插件的使用

什么是插件？javascript

基于jQuery的语法，按照必定规范书写，具备特定功能的脚本文件，称为插件。css

插件除了js文件以外，有的还包含css文件，图片和字体等资源文件。java

在jQuery的官网https://jquery.com/搜索和下载须要的插件。jquery

1.引入cookie插件

    <head>
        <meta charset="utf-8">
        <title>cookie插件的使用</title>
        <!-- 首先引入jQuery -->
        <script src="js/jquery-1.11.3.js" type="text/javascript" charset="utf-8"></script>
        <!-- 插件基于jQuery，而后再引入下载的cookie插件 -->
        <script src="../js/cookie/jquery.cookie.js" type="text/javascript" charset="utf-8"></script>
    </head>

cookie是什么？web

cookie就是浏览器存储在用户电脑上的一小段文本文件。一个web页面或服务器会告知浏览器按照必定规范来存储这些信息，并在以后的请求中将这些信息发送至服务器。web服务器就能够使用这些信息来识别不一样的用户。例如，访问一个网站输入帐号密码，如保存密码则在cookie的有效期内再次访问网站时不会再输入帐号密码。浏览器

2.建立cookie

在jQuery的官网，下载插件的页面都会有相应的使用文档。服务器

        <script type="text/javascript">
            function doAdd(){
                //cookie的名字的属性
                $.cookie("username",$("#userName").val());//未指定过时时间，则会在关闭浏览器或过时。
                $.cookie("password",$("#passWord").val(),{expires:7});//指定有效期,7表明的是7天
            
            }
        </script>

设置输入框和按钮框并绑定。cookie

    <body>
        用户名:<input type="text" name="" id="userName" value="" />
        密码:<input type="password" name="" id="passWord" value="" />
        <hr >
        <input type="button" name="" id="" value="添加cookie" onclick="doAdd()" />
    </body>

当在input中输入用户名密码后点击按钮调用doAdd函数函数

3.读取cookie

            //读取cookie
            function doRead(){
                //读取指定名字的cookies
                console.log($.cookie("username"));//直接调用cookie方法获取名字
            }

读取全部cokkie,须要使用each()方法遍历字体

        <script type="text/javascript">
            function doAdd(){
                //cookie的名字的属性
                $.cookie("username",$("#userName").val());//未指定过时时间，则会在关闭浏览器或过时。
                $.cookie("password",$("#passWord").val(),{expires:7});//指定有效期,7表明的是7天
            
            }
            //读取cookie
            function doRead(){
                //读取全部cookie
                var cookies = $.cookie();
                $.each(cookies,function(key,value){
                    console.log(key+ "=" +value);
                });
            }
        </script>

设置按钮并绑定

        <input type="button" name="" id="" value="读取cookie" onclick="doRead()"/>

在控制台输出

4.删除cookie

和读取相似

        <script type="text/javascript">
            //删除
            function removeDel(){
                $.removeCookie("username");
            }
        </script>

调用方法获取到想要删除的cookie名字

设置按钮并绑定

        <input type="button" name="" id="" value="删除cookie" onclick="removeDel()"/>

这里删除了username