jquery-cookie插件的使用

什么是插件？

基于jquery的语法，按照一定规范书写，具有特定功能的脚本文件，称为插件。

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

在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是什么？

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>

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

    <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