JavaScript和JQuery中的Cookie即页面数据缓存基本用法

什么是Cookie

Cookie是浏览器提供的一种机制，它将document对象的cookie属性提供给JavaScript。可以由JavaScript对其进行控制，而并不是JavaScript本身的性质。cookie是存于用户硬盘的一个文件，这个文件通常对应于一个域名，当浏览器再次访问这个域名时，便使这个cookie可用。因此，cookie可以跨越一个域名下的多个网页，但不能跨域多个域名使用。

cookie机制将信息存储于用户硬盘，因此可以作为全局变量，这是它最大的一个优点。它可以用于以下几种场合。

1、保存用户登录状态。例如将用户id存储于一个cookie内，这样当用户下次访问该页面就不需要重新登录了，现在很多论坛和社区都提供这样的功能。cookie还可以设置过期时间，当超过时间期限后，cookie就会自动消失。因此，系统往往可以提示用户保持登录状态的时间：常见选项有一个月、三个月、一年等。

2、跟踪用户行为。例如一个天气预报网站，能够根据用户选择的地区显示当地的天气情况。如果每次都需要选择所在地是繁琐的，当利用了cookie后就会显得很人性化了，系统能够记住上一次访问的地区，当下次再打开该页面时，它就会自动显示上次用户所在地区的天气情况。因为一切都是在后台完成，所以这样的页面就像为某个用户所定制的一样，使用起来非常方便。

3、定制页面。如果网站提供了换肤或更换布局的功能，那么可以使用cookie来记录用户的选项，例如：背景色、分辨率等。当用户下次访问时，仍然可以保存上一次访问的界面风格。

4、创建购物车。正如在前面的例子中使用cookie来记录用户需要购买的商品一样，在结账的时候可以统一提交。例如淘宝网就使用cookie记录了用户曾经浏览过的商品，方便随时进行比较。

当然，上述应用仅仅是cookie能完成的部分应用，还有更多的功能需要全局变量。cookie的缺点主要集中于安全性和隐私保护。主要包括以下几种：

1、cookie可能被禁用。当用户非常注重个人隐私保护时，他很可能禁用浏览器的cookie功能

2、cookie是与浏览器相关的。这意味着即使访问的是同一个页面，不同浏览器之间所保存的cookie也是不能互相访问的；

3、cookie可能被删除。因为每个cookie都是硬盘上的一个文件，因此很有可能被用户删除

4、cookie安全性不够高。所有的cookie都是以纯文本的形式记录于文件中，因此如果要保存用户名密码等信息时，最好事先经过加密处理。

Cookie实战示例：苹果cms整合带记忆播放功能最新版Dplayer-v1.27播放器

Cookie使用方法

JavaScript原生设置、读取、删除Cookie：

//设置：cookie名称=name  cookie值=value   cookie时效七天=expires: 7
Cookies.set('name', 'value', {expires: 7,});

//读取cookie
Cookies.get('name');

//删除cookie
Cookies.remove('name');

JavaScript原生Cookie简单封装：

var cookie = {
    'set': function(name, value, days) {
        var exp = new Date();
        exp.setTime(exp.getTime() + days * 24 * 60 * 60 * 1000);
        var arr = document.cookie.match(new RegExp('(^| )' + name + '=([^;]*)(;|$)'));
        document.cookie = name + '=' + escape(value) + ';path=/;expires=' + exp.toUTCString();
    },
    'get': function(name) {
        var arr = document.cookie.match(new RegExp('(^| )' + name + '=([^;]*)(;|$)'));
        if (arr != null) return unescape(arr[2]);
    },
    'put': function(urls) {
        var cookie = urls.replace(/[^a-z]+/ig, '');
        var cookie = cookie.substring(cookie.length - 32);
        return cookie;
    }
};

//调用
var a = cookie.set(name);
var b = cookie.get(name);
if(cookie.get(name) > 0) {
   ...
};

JQuery插件Cookie使用方法

引入插件

<script type="text/javascript" src="js/JQuery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jquery.cookie.js"></script>

设置cookie：

cookieName-------给所设置的cookie一个名称；

cookieValue-------让cookie想要保存的值，例如：$("#password").val();

{ expires: 7 }-------设置cookie的有效时间为7天，时间自己规定。

示例：

//设置cookie
 function setCookie(){
       $.cookie("cookieName", "cookieValue", { expires: 7 });//第一种
       $.cookie('the_cookie', 'the_value', { expires: 7, path: '/' });//第二种，增加路径
       $.cookie("COOKIE_PASSWORD", $("#password").val(), "/",1/144);//示例
 };

读取cookie

直接获取cookie值， 若cookie存在则返回所保存的’cookieValue’；若cookie不存在则返回null。

示例：

//读取cookie
function getCookie(){
   var cookieWord=$.cookie("cookieName");
};