JQuery(34)——JQuery插件： JQuery cookie

一、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());
        });