jQuery-cookie插件的使用

什么是插件？

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

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

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

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

Cookie插件的使用的更多相关文章

  1. jquery插件的用法之cookie 插件

    一．使用cookie 插件 插件官方网站下载地址:http://plugins.jquery.com/cookie/ cookie 插件的用法比较简单,直接粘贴下面代码示例: //生成一个cookie ...

  2. 为什么目前没有"成熟"的cookie插件？

    一.序言 最近真是挺忙的啊,导致也挺久没有时间来看看园中各位大神的文章,只能感慨业务真尼玛的多,所以在此写下一篇文章来大话最近工作和学习上面的一点点收获体会,希望大家能够有所收获,这篇文章虽然说是一篇 ...

  3. jQuery插件之Cookie插件使用方法~

    一.介绍 1-1.jQuery.Cookie.js插件是一个轻量级的Cookie管理插件.下载地址:jQuery-cookie.js  有需要的朋友,右键另存为即可! 二.使用方法 2-1.引入jQu ...

  4. jQuery：cookie插件的使用

    Jquery插件就是在Jquery基础之上,开发的基于Jquery的javascript库. 在Jquery中,引入cookie插件后,可以很方便的定义某个cookie的名称,并设置cookie值.通 ...

  5. jQuery之换肤与cookie插件

    有时候一个网页可以有多个皮肤进行选择,也就是不同的背景,或是一整套新的css,能使整个页面变成另一种风格. 这个功能可以用jQuery来实现.外加cookie插件.有了cookie,就可以长时间的保存 ...

  6. jQuery cookie插件保存用户登陆信息

    通过jquery cookie插件保存用户登录信息. 代码: <html>  <head>  <title>cookies.html</title>  ...

  7. 20151224jquery学习笔记---cookie插件

    hello,祝自己平安夜快乐. Cookie 是网站用来在客户端保存识别用户的一种小文件.一般来用库可以保存用户登录信息.购物数据信息等一系列微小信息.一． 使用 cookie 插件官方网站: htt ...

  8. jquery cookie插件

    jquery-cookie下载地址:http://www.bootcdn.cn/jquery-cookie/ 使用方法: 1.引入jQuery.Cookie.js插件. <script src= ...

  9. 知问前端——cookie插件

    Cookie是网站用来在客户端保存识别用户的一种小文件.一般可以保存用户登录信息.购物数据信息等一系列微小信息. 一.使用cookie插件 官方网站:http://plugins.jquery.com ...

  10. 第一百八十七节，jQuery，知问前端--cookie 插件，注册成功后生成cookie，显示登录状态

    jQuery,知问前端--cookie 插件 学习要点: 1.使用 cookie 插件 2.注册直接登录 Cookie 是网站用来在客户端保存识别用户的一种小文件.一般来用库可以保存用户登 录信息.购 ...

随机推荐

  1. MySQL数据库开发的36条原则【华为云技术分享】

    版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/devcloud/article/detai ...

  2. DevOps on DevCloud|如何采用流水线践行CI/CD理念【华为云技术分享】

    [摘要] 持续集成/持续交付(CI/CD,Continuous Integration/Continuous Deployment)在DevOps CMALS理念中具有支柱性地位,因而CI/CD流水线 ...

  3. ajax异步请求的三种常见方式

    首先先介绍下ajax,ajax(ASynchronous JavaScript And XML)为异步的javascript和xml.所谓的异步和同步是指: 同步:客户端必须等待服务器的响应,在等待期 ...

  4. Charles Fiddler使用

    http://blog.devtang.com/2015/11/14/charles-introduction/ Charles 从入门到精通 http://www.infoq.com/cn/arti ...

  5. WWDC 2016 盛宴

    转自:http://www.jianshu.com/p/72dd8306c817 整理和维护人:pmstGitHub 链接:WWDC-2016-Feast目前只是整理官方给出的 WWDC 2016 视 ...

  6. THML第一天学习！

    又迎来了新一轮的周末,学习的耗时光呀!这周呢学了一点点数据库,暂时还不想写下自己的感受(这学期在 学习数据库,等学期末的时候在总结一下数据库的相关学习). 目前呢,我是打算跟着sunck学习观pyth ...

  7. iSensor APP 之 摄像头调试 MT9D001 MT9P031 测试小结 200万像素和500万像素摄像头

    iSensor APP 之 摄像头调试  MT9D001 MT9P031 测试小结 iSensor app 非常适合调试各种摄像头,已测试通过的sensor有: l  OV7670.OV7725.OV ...

  8. base64编码的字符串与图片相互转换

    #region 图片转为base64编码的字符串---ImgToBase64String /// <summary> /// 图片转为base64编码的字符串 /// </summa ...

  9. 【Eclipse】Spring Tool Suite插件

    Spring Tool Suite插件 最新下载地址:https://spring.io/tools3/sts/all 以前下载地址:https://spring.io/tools3/sts/lega ...

  10. 在MSSQL中的简单数据类型递归

    在某些特定的项目需求中,我们需要实现树状数据结构, 由此,我们需要用递归将数据查询出来. WITH T AS ( SELECT ID,PID FROM TableName WHERE ID=1 UNI ...