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. OpenCV图像识别初探-50行代码教机器玩2D游戏【华为云技术分享】

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

  2. Plugin execution not covered by lifecycle configuration: org.codehaus.mojo:build-helper-maven-plugin:1.8:add-test-source (execution: add-functional-source, phase: generate-sources)

    在maven项目中使用add-source时,pom.xml报如下错误: Plugin execution not covered by lifecycle configuration: org.co ...

  3. 上手spring boot项目（一）之如何在controller类中返回到页面

    题记:在学习了springboot和thymeleaf之后,想完成一个项目练练手,于是使用springboot+mybatis和thymeleaf完成一个博客系统,在完成的过程中出现的一些问题,将这些 ...

  4. [Mathematics][BJTU][Calculus]Detailed explanations and proofs of the Dirac-Abel Discriminant Methods which deal with the conditional convergence

    So, today we will talk about the conditional convergence and two discriminant methods, namely Dirac- ...

  5. 压缩感知重构算法之SP算法python实现

    压缩感知重构算法之OMP算法python实现 压缩感知重构算法之CoSaMP算法python实现 压缩感知重构算法之SP算法python实现 压缩感知重构算法之IHT算法python实现 压缩感知重构 ...

  6. Word表格斜线怎么弄？这里有三种方法很实用

    有些时候我们也会在Word文档中插入表格,因为这样可以准确的表达出文档中的内容.大家应该都知道Excel表格斜线怎么弄,那么Word表格斜线怎么弄吗?今天呢小编就帮大家总结了三种方法哦,有需要的小伙伴 ...

  7. 【JS】388- 深入了解强大的 ES6 「 ... 」 运算符

    本文原载于 SegmentFault 社区 专栏:大前端  作者:皮小蛋 背景 ... 运算符,是 ES6 里一个新引入的运算法,也叫 展开/收集 运算符,我们每天都要和它打交道. 这篇文章,我就带你 ...

  8. Java中通过代码得到int类型数值的二进制形式

    一.完整代码 public class BigInteger { int sing; byte[] val; public BigInteger(int val){ // 将传递的初始值,按位取值,存 ...

  9. 建议2:注意Javascript数据类型的特殊性---(3)正确检测数据类型

    使用typeof预算符返回一个用于识别其运算数类型的字符串.对于任何变量来说,使用typeof预算符总是以字符串的形式返回一下6种类型之一 number string boolean object f ...

  10. CCF-CSP题解 201809-3 元素选择器

    题目要求写一个简易的CSS Selector. 首先用结构体\(<lev,label[],hasId,id[]>\)存储元素.其中\(lev\)表示元素在html树中的深度(这个是因为逻辑 ...