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. 关于Python的随机数模块，你必须要掌握！

    所谓七夕 前几天的文章这个七夕节,用Python为女友绘制一张爱心照片墙吧!收获了最近以来最高的浏览量,没枉费我熬到夜里3点赶出来的热点文章.有付出就总会有所回报,只是看这天来的早晚而已.七夕一个人看 ...

  2. Sring+mybatis模拟银行转账

    实体类: package com.bjsxt.pojo; import java.io.Serializable; public class Account implements Serializab ...

  3. MyBatis三个查询方法_selectList_selectOne_selectMap

    mybatis-cfg.xml的配置: <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE co ...

  4. Orleans的深入

    1.序列化  序列化配置有几个坑这里我写出来 2.负载均衡 3.定时器与提醒 4.服务启动执行代码 5.监控 序列化 新建实体类 引用的包 Microsoft.Orleans.Core V2.12 M ...

  5. 【Java笔试】对数据库中的分解是否为无损连接和是否保持函数依赖的判定-由牛客网试题引申-保姆式教学

    [牛客网数据库原理题目]设关系模式R(A,B,C),F是R上成立的FD集,F={A→B,C→B},ρ={AB,AC}是R的一个分解,那么分解ρ()? 正确答案:C你的答案:A(错误) ( A ) 保持 ...

  6. NodeJS4-6静态资源服务器实战_range范围请求

    range范围请求:向服务器发起请求可以申明我想请求判断内容的范围,从多少个字节到多少个字节,一次要求把所有的内容拿回来,服务器在得到相应的请求之后,从拿到对应的文件,拿到对应的字节返回给客户端.要实 ...

  7. 深度理解return具体用法

    ''' 下面我们来更加深度的理解return具体用法!!! return 默认返回None return 可以返回任意数据类型的数据 return 返回多个值的时候,会以元祖的形式把多个值包在一起 ' ...

  8. 在线HTTP POST/GET模拟请求api接口http请求测试工具https://post.jsonin.com/

    在线HTTP POST/GET模拟请求api接口http请求测试工具 在线POST/GET接口测试工具https://post.jsonin.com/ Json在线解析及格式化校验工具 https:/ ...

  9. 《Java基础知识》Java正则表达式

    正则表达式定义了字符串的模式. 正则表达式可以用来搜索.编辑或处理文本. 正则表达式并不仅限于某一种语言,但是在每种语言中有细微的差别. 正则表达式实例 一个字符串其实就是一个简单的正则表达式,例如  ...

  10. 利用sklearn对多分类的每个类别进行指标评价

      今天晚上,笔者接到客户的一个需要,那就是:对多分类结果的每个类别进行指标评价,也就是需要输出每个类型的精确率(precision),召回率(recall)以及F1值(F1-score).   对于 ...