Cookie插件的使用
程序员文章站
2024-01-29 15:43:28
jQuery-cookie插件的使用 什么是插件？ 基于jQuery的语法，按照一定规范书写，具有特定功能的脚本文件，称为插件。 插件除了js文件之外，有的还包含css文件，图片和字体等资源文件。 在jQuery的官网https://jquery.com/搜索和下载需要的插件。 1.引入cookie ......
jquery-cookie插件的使用
什么是插件？
基于jquery的语法，按照一定规范书写，具有特定功能的脚本文件，称为插件。
插件除了js文件之外，有的还包含css文件，图片和字体等资源文件。
在jquery的官网搜索和下载需要的插件。
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