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. HDU3849-By Recognizing These Guys, We Find Social Networks Useful(无向图的桥)

    By Recognizing These Guys, We Find Social Networks Useful Time Limit: 2000/1000 MS (Java/Others)     ...

  2. 【JS】小工具

    带天数的倒计时 function countDown(dateline){ var timer=null, //倒计时 current_time=Math.floor(new Date().getTi ...

  3. 测底稳定NIOS开发之一：将nios产生的编程文件转换成jic （连载）

    将nios产生的编程文件转换成jic 前言: 基于某种原因,自从开始fpga开发和nios项目开发中,均为正常使用EDS IDE自带的flash programmer 进行成功的下载固化epcs程序. ...

  4. 【HTML5】296- 重新复习 HTML5 的 5大存储方式

    点击上方"前端自习课"关注,学习起来~ 一.介绍 在 HTML5 规范之前,存储主要是用 cookies . cookies 的缺点有: 在请求头上带着数据: 大小是 4k 之内: ...

  5. 一次框架性能的比较，引起了我对搭建web框架的兴趣

    背景 一次无意的访问,点击到了一个专门做PHP性能测试的网站,看这里PHP Benchmarks. 在里面发现了框架性能测试的结果,发现Laravel的框架性能尽然是最低的.瞬间受到了一万点的暴击,谁 ...

  6. 深入解析http协议

    当今web程序的开发技术真是百家争鸣,ASP.NET, PHP, JSP,Perl, AJAX 等等. 无论Web技术在未来如何发展,理解Web程序之间通信的基本协议相当重要, 因为它让我们理解了We ...

  7. ssm整合——Spring配置（2）

    配置Spring 1. 环境准备 使用之前搭建Mabatis的环境 1.1 新建目录 新建spring的service业务逻辑包 在resources目录下新建spring的配置文件:applicat ...

  8. 基于TCP协议之socket编程

    #服务端 #导入一个socket模块 import socket #想象成买手机打电话:socket.SOCK_STREAM 表示建立tcp连接 ,udp连接socket.SOCK_DGRAM #买了 ...

  9. Django模型层—ORM

    目录 一.模型层(models) 1-1. 常用的字段类型 1-2. 字段参数 1-3. 自定义char字段 1-4. 外键关系 二.Django中测试脚本的使用 三.单表操作 3-1. 添加记录 3 ...

  10. C# 利用AForge进行摄像头信息采集

    概述 AForge.NET是一个专门为开发者和研究者基于C#框架设计的,提供了不同的类库和关于类库的资源,还有很多应用程序例子,包括计算机视觉与人工智能,图像处理,神经网络,遗传算法,机器学习,机器人 ...