HTML5培训

js操作cookie存取数据实例与分析(一)

发布时间:2013年 08月 20日   |  作者:唐菜也

  一周以前,小华专门跑回公司问我一个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" onclick="setCookie()" value="设置cookie"/>
 <input type="button" onclick="showCookie()"value="显示cookie"/>
</body>先用这段简单的代码测试下,注意要起服务,本机测试可以通过localhost访问,先点下 显示cookie,会提示你document.cookie不存在,当你设置完cookie后,再点一次,就会弹出当前的cookie设置。



先写这些了,下篇文章继续~~


相关文章
js操作cookie存取数据实例与
其他文章
提高网页加载速度---CSS
less语言特性(二) ——
less语言特性(一) ——
JavaScript中的一些坑
移动端性能大比拼:CSS
推荐大家使用的CSS书写规
 
 

版权所有:北京博看文思科技有限责任公司|(0.0521628856659s)