一周以前,小华专门跑回公司问我一个cookie的问题,是一个购物网站,类似购物车或者对比功能,当再次打开的时候需要保留用户已选的商品。我答应他这段时间总结下,结果一拖再拖,一直拖到现在,实在抱歉的很,现在总结下,希望对大家有帮助。
cookie是浏览器提供的一种机制,用于暂存数据,或者说cookie是用来客户端保持状态的。于此相对应的,做后台开发比较熟悉的session,session采用的是在服务器段保持状态的方案。有后台开发经验的同学可以对比理解。
cookie可以用js进行控制,但它是存在客户端硬盘上的一个文件,cookie文件一般存储在documents and settings\userName\cookie\文件夹下。通常的命名格式为:userName@domain.txt。所以在浏览器关闭的时候依旧能够保存状态。cookie是跟一个域名绑定的,针对一个域名保存的状态和数据,下次访问这个域名的时候才可用。所以大家在测试cooke的时候要注意一点,特别是咱们都是前端出身,喜欢写个html直接双击打开的同学,一定要注意先起服务(比如用wamp起服务),可以使用http://localhost/ 来做测试。
因为cookie是存储在硬盘上的,并且可以被js操作,所以它在以下几种情况下会使用到。
第一:用于保存用户登录状态,在登录一个网站的时候,大家经常会看到这样的提示
cookie还可以设置过期时间,当超过时间限期后,cookie就会自动消失。
第二:跟踪用户行为,比如天气预报,根据用户选择的地区显示天气情况。当用户再次打开这个页面的时候,自动显示上次查看地。省掉很多繁琐的操作。不过现在大部分相关网站,比如地图,团购,赶集这些网站都会根据用户的IP来定位用户所在地,然后显示用户所在地的信息。所以这个优势逐渐被削弱。
第三:页面定制功能。现在大部分博客平台类网站都提供了定制功能,比如换肤,板块定制等等。可以使用cookie来记录用户的选择。不过存储在后台的方式实现这个功能更为可取。所以这个优势野不太明显。
第四:购物车或者货物对比功能,这个功能也是小华回来问我的问题涉及的功能,先把用户选择的商品保存,在用户最后提交前,存储在购物车或者对比框里,用户再次登录的时候还可以看到上次的选择。比如淘宝。这个可以说是现在cookie的最佳用武之地了。
cookie的最大缺点在于安全性和隐私保护,由于安全性不高,使用cookie会存在以下一些问题:
第一:cookie可能会被禁用,浏览器都有禁用cookie的选项。
第二:cookie是与浏览器和域名相关的,不同浏览器不同域名的cookie都不可以互相访问。
第三:cookie可以被删除,cookie是存在硬盘上的文件,用户可能会删掉它。
第四:cookie安全性不高,所有cookie都是以纯文本形式记录于文件中,所以保存用户名和密码等信息的时候,最好要事先加密。
设置cookie
设置cookie,也就是往cookie里存数据,每条数据都是名字和值对应的,可以想象成超级全局变量的赋值,当然又有不同,可以用下面的代码给cookie赋值。
document.cookie="userName=lzl";
也可以一次给cookie里放入几个值,用分号和空格隔开"; "。比如:
document.cookie="userName=lzl; userId=123";上面的赋值方式也可以用下面的方法实现:
document.cookie="userName=lzl";
document.cookie="userId=123";
这点跟我们平时的js赋值是有区别的,给cookie赋值的时候,后一个赋值不会覆盖掉前一个赋值,而是添加到cookie里。当然,你可以重复设置一个名对应的值,后一次赋值会覆盖掉前一个。比如我重新设置一个userId,那么后面的设置会覆盖到前面的设置。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>cookie test</title>
<meta name="keywords" content="">
<meta name="description" content="">
<script>
function setCookie() {
document.cookie="userName=lzl";
document.cookie="userId=123";
}
function showCookie() {
if (document.cookie)
{
alert(document.cookie)
}
else{alert("document.cookie 不存在");}
}
</script>
</head>
<body>
<input type="button" οnclick="setCookie()" value="设置cookie"/>
<input type="button" οnclick="showCookie()"value="显示cookie"/>
</body>先用这段简单的代码测试下,注意要起服务,本机测试可以通过localhost访问,先点下 显示cookie,会提示你document.cookie不存在,当你设置完cookie后,再点一次,就会弹出当前的cookie设置。
先写这些了,下篇文章继续~~
摘自:http://hi.baidu.com/kuntakinte/item/6a86ef80fd8e8fddd1f8cd1c?qq-pf-to=pcqq.group