Cookie插件的使用

jQuery-cookie插件的使用

什么是插件?

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

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

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

1.引入cookie插件

    <head>
        <meta charset="utf-8">
        <title>cookie插件的使用title>
        
        <script src="js/jquery-1.11.3.js" type="text/javascript" charset="utf-8">script>
        
        <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函数

 Cookie插件的使用_第1张图片

 

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()"/>

在控制台输出

Cookie插件的使用_第2张图片

 

 

 4.删除cookie

和读取类似

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

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

设置按钮并绑定

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

这里删除了username

Cookie插件的使用_第3张图片

 

你可能感兴趣的:(Cookie插件的使用)