(一)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都是一个名/值对,可以把下面这样一个字符串赋值给document.cookie:

将目录设置为根目录,就可以成为全局变量!

document.cookie="userId=320; path=/";

(二)设置cookie 
每个cookie都是一个名/值对,可以把下面这样一个字符串赋值给document.cookie:

document.cookie="userId=828"; 
如果要一次存储多个名/值对,可以使用分号加空格(; )隔开,例如:

document.cookie="userId=828; userName=hulk"; 
在cookie 的名或值中不能使用分号(;)、逗号(,)、等号(=)以及空格。在cookie的名中做到这点很容易,但要保存的值是不确定的。如何来存储这些值呢?方 法是用escape()函数进行编码,它能将一些特殊符号使用十六进制表示,例如空格将会编码为“20%”,从而可以存储于cookie值中,而且使用此 种方案还可以避免中文乱码的出现。例如:

代码如下:
document.cookie="str="+escape("I love ajax"); 

相当于:

代码如下:
document.cookie="str=I%20love%20ajax"; 

当使用escape()编码后,在取出值以后需要使用unescape()进行解码才能得到原来的cookie值,这在前面已经介绍过。

尽管document.cookie看上去就像一个属性,可以赋不同的值。但它和一般的属性不一样,改变它的赋值并不意味着丢失原来的值,例如连续执行下面两条语句:

代码如下:
document.cookie="userId=828"; 
document.cookie="userName=hulk"; 

这时浏览器将维护两个cookie,分别是userId和userName,因此给document.cookie赋值更像执行类似这样的语句:

代码如下:

document.addCookie("userId=828"); 
document.addCookie("userName=hulk"); 

事实上,浏览器就是按照这样的方式来设置cookie的,如果要改变一个cookie的值,只需重新赋值,例如:

document.cookie="userId=929"; 
这样就将名为userId的cookie值设置为了929。

(三)获取cookie的值 
下面介绍如何获取cookie的值。cookie的值可以由document.cookie直接获得:

var strCookie=document.cookie; 
这将获得以分号隔开的多个名/值对所组成的字符串,这些名/值对包括了该域名下的所有cookie。例如:

代码如下:
<script language="JavaScript" type="text/javascript"> 
<!-- 
document.cookie="userId=828"; 
document.cookie="userName=hulk"; 
var strCookie=document.cookie; 
alert(strCookie); 
//--> 
</script> 

从输出可知,只能够一次获取所有的cookie值,而不能指定cookie名称来获得指定的值,这正是处理cookie值最麻 烦的一部分。用户必须自己分析这个字符串,来获取指定的cookie值,例如,要获取userId的值,可以这样实现:

代码如下:
<script language="JavaScript" type="text/javascript"> 
<!-- 
//设置两个cookie 
document.cookie="userId=828"; 
document.cookie="userName=hulk"; 
//获取cookie字符串 
var strCookie=document.cookie; 
//将多cookie切割为多个名/值对 
var arrCookie=strCookie.split("; "); 
var userId; 
//遍历cookie数组,处理每个cookie对 
for(var i=0;i<arrCookie.length;i++){ 
var arr=arrCookie[i].split("="); 
//找到名称为userId的cookie,并返回它的值 
if("userId"==arr[0]){ 
userId=arr[1]; 
break; 


alert(userId); 
//--> 
</script> 

这样就得到了单个cookie的值。

用类似的方法,可以获取一个或多个cookie的值,其主要的技巧仍然是字符串和数组的相关操作。

(四)给cookie设置终止日期 
到现在为止,所有的cookie都是单会话cookie,即浏览器关闭后这些cookie将会丢失,事实上这些cookie仅仅是存储在内存中,而没有建立相应的硬盘文件。

在实际开发中,cookie常常需要长期保存,例如保存用户登录的状态。这可以用下面的选项来实现:

document.cookie="userId=828; expiress=GMT_String"; 
其中GMT_String是以GMT格式表示的时间字符串,这条语句就是将userId这个cookie设置为GMT_String表示的过期时间,超过这个时间,cookie将消失,不可访问。例如:如果要将cookie设置为10天后过期,可以这样实现:

代码如下:

<script language="JavaScript" type="text/javascript"> 
<!-- 
//获取当前时间 
var date=new Date(); 
var expiresDays=10; 
//将date设置为10天以后的时间 
date.setTime(date.getTime()+expiresDays*24*3600*1000); 
//将userId和userName两个cookie设置为10天后过期 
document.cookie="userId=828; userName=hulk; expires="+date.toGMTString(); 
//--> 
</script> 

(五)删除cookie 
为了删除一个cookie,可以将其过期时间设定为一个过去的时间,例如:

代码如下:
<script language="JavaScript" type="text/javascript"> 
<!-- 
//获取当前时间 
var date=new Date(); 
//将date设置为过去的时间 
date.setTime(date.getTime()-10000); 
//将userId这个cookie删除 
document.cookie="userId=828; expires="+date.toGMTString(); 
//--> 
</script> 

cookies如何成为全局变量以及设置,删除,获取的更多相关文章

  1. Cookies设置,获取,删除

    之前的博客,整理了下Session的存储方式和原理http://www.cnblogs.com/chinaagan/p/3200456.html. 本篇再次整理下Cookies的使用和原理. 参考博客 ...

  2. JavaScript Dom基础-9-Dom查找方法; 设置DOM元素的样式; innerHTML属性的应用; className属性的应用; DOM元素上添加删除获取属性;

    JavaScript Dom基础 学习目标 1.掌握基本的Dom查找方法 domcument.getElementById() Domcument.getElementBy TagName() 2.掌 ...

  3. Redis 过期键的设置、获取和删除过期时间

    Redis 过期键的设置.获取和删除过期时间 转自http://blog.51cto.com/littledevil/1813956 设置过期 默认情况下键是没有生存时间的,也就是永不过期,除非清空内 ...

  4. php设置和获取cookie

    php设置和获取cookie setcookie()调用只带有name参数的setcookie(); ()使失效时间为time()或time-; <?php setcookie(); PHP提供 ...

  5. django设置并获取cookie/session,文件上传,ajax接收文件,post/get请求及跨域请求等的方法

    django设置并获取cookie/session,文件上传,ajax接收文件等的方法: views.py文件: from django.shortcuts import render,HttpRes ...

  6. vuex之仓库数据的设置与获取

    如果你之前使用过vue.js,你一定知道在vue中各个组件之间传值的痛苦,在vue中我们可以使用vuex来保存我们需要管理的状态值,值一旦被修改,所有引用该值的地方就会自动更新,那么接下来我们就来学习 ...

  7. js设置、获取单值cookie和多值cookie

    js设置.获取单值cookie和多值cookie,代码如下: var CookieUtil = (function () { var Cookie = function () { // 获取单值coo ...

  8. 设置与获取Cookie

    自己编写的一个Cookie设置与获取函数,大家有什么感觉需要改进的地方,请告知与我,我一定虚心接受. JavaScript - Code: function setCookie(name,value, ...

  9. js设置与获取Cookie

    /*设置与获取Cookie*/ var Cookie ={} Cookie.write = function(key, value, duration){ var d = new Date(); d. ...

随机推荐

  1. npm 私有模块的管理使用

    你可以使用 NPM 命令行工具来管理你在 NPM 仓库的私有模块代码,这使得在项目中使用公共模块变的更加方便. 开始前的工作 你需要一个 2.7.0 以上版本的 npm ,并且需要有一个可以登陆 np ...

  2. Travis CI用来持续集成你的项目

    这里持续集成基于GitHub搭建的博客为项目 工具: zqz@ubuntu:~$ node --version v4.2.6 zqz@ubuntu:~$ git --version git versi ...

  3. Objective-C中block的底层原理

    先出2个考题: 1. 上面打印的是几,captureNum2 出去作用域后是否被销毁?为什么? 同样类型的题目: 问:打印的数字为多少? 有人会回答:mutArray是captureObject方法的 ...

  4. Vue-Router 页面正在加载特效

    Vue-Router 页面正在加载特效 如果你在使用 Vue.js 和 Vue-Router 开发单页面应用.因为每个页面都是一个 Vue 组件,你需要从服务器端请求数据,然后再让 Vue 引擎来渲染 ...

  5. sql的那些事(一)

    一.概述 书写sql是我们程序猿在开发中必不可少的技能,优秀的sql语句,执行起来吊炸天,性能杠杠的.差劲的sql,不仅使查询效率降低,维护起来也十分不便.一切都是为了性能,一切都是为了业务,你觉得你 ...

  6. CSS知识总结(八)

    CSS常用样式 8.变形样式 改变元素的大小,透明,旋转角度,扭曲度等. transform : none | <transform-function> <transform-fun ...

  7. 搭建QQ聊天通信的程序:(1)基于 networkcomms.net 创建一个WPF聊天客户端服务器应用程序 (1)

    搭建QQ聊天通信的程序:(1)基于 networkcomms.net 创建一个WPF聊天客户端服务器应用程序 原文地址(英文):http://www.networkcomms.net/creating ...

  8. 手把手教你做个人 app

    我们都知道,开发一个app很大程度依赖服务端:服务端提供接口数据,然后我们展示:另外,开发一个app,还需要美工协助切图.没了接口,没了美工,app似乎只能做成单机版或工具类app,真的是这样的吗?先 ...

  9. iOS之绘制虚线

    /*   ** lineFrame:     虚线的 frame   ** length:        虚线中短线的宽度   ** spacing:       虚线中短线之间的间距   ** co ...

  10. java中的内部类总结

    内部类不是很好理解,但说白了其实也就是一个类中还包含着另外一个类 如同一个人是由大脑.肢体.器官等身体结果组成,而内部类相当于其中的某个器官之一,例如心脏:它也有自己的属性和行为(血液.跳动) 显然, ...