一、JQuery插件: JQuery cookie
1、什么是cookie:Cookie就是保存在浏览器上的内容,用户在这次浏览页面的时候向Cookie中保存文本内容,下次再访问页面的时候就可以取出来上次保存的内容,这样就可以得到上次“记忆”的内容。Cookie不是JQuery特有的概念,只不过JQueryCookie把它简化的更好用而已。Cookie就是存储在浏览器里的一些数据。(不能在IE中存,FF中取)。
2、不讲概念,先来演示什么是Cookie。
3、Cookie需要浏览器的支持,浏览器的Cookie是可以禁用的,如果禁用了Cookie就不能使用了,不过一般不用考虑禁用Cookie的情况。Cookie的几个特征:Cookie是与域名相关的,所以163.com不能读取baidu.com记录的Cookie,正因为如此读取、设置Cookie的时候不用担心不同域名cookie的冲突;一个域名能写入的Cookie总尺寸是有限制的,一般是几千字节,能写入的Cookie总条数一般是几十条,超过以后浏览器自己会根据自己的策略移除一些Cookie;Cookie不是写入以后一定下次能读出来,浏览器可能会定期清除、用户也可能会手动清除。写到Cookie中的数据一定是可有可无的数据,像防止投票作弊就不能用Cookie。Cookie中存的都是文本。
4、可以把cookie看成Dictionary,用来跨浏览器会话保存值。
$.cookie(名字,值);//设置值
$.cookie(名字);//读取值
二、JQuery Cookie使用
1、使用方法,Cookie保存的是键值对:
- 1、添加对jquery.cookie.js
- 2、设置值,$.cookie('名字', '值')。cookie中保存的值都是文本。
- 3、读取值,var v=$.cookie('名字')
- alert($.cookie("用户名"));
- $.cookie(“用户名”,“tom”);在同域名的另外一个页面中也能读取到。
2、案例:定时保存用户写的邮件,下次进入页面的时候把上次保存的值读取出来。
3、设置值的时候还可以指定第三个参数,$.cookie(‘名字’, ‘值’, { expires: 7, path: ‘/’, domain: ‘itcast.cn’, secure: true }),expires表示要求浏览器保留Cookie几天,这个值只是给浏览器的建议,可能没到时间就已经被清除了。可以实现“勾选【记录我的用户名10天】”的功能。如果不设定expires在浏览器关闭以后就清除(会话Cookie),options参数用哪个设置哪个。Cookie存在哪?IE中是存在临时文件夹中以cookie开头的文件。
4、练习:实现“上次访问时间”功能;写到div上。
5、练习:允许用户点击不同颜色的色块设置网页的背景颜色,然后记住用户的选择,下次进入的时候是用用户上次设置的背景色。
6、练习:点击登录以后保存用户名,再登录的时候读取上次保存的用户名,帮用户填上。
var oldusername = $.cookie("username");
if (oldusername) {
$("#username").val(oldusername);
}
$("#btnLogin").click(function() {
$.cookie("username", $("#username").val());
});