javascript cookie实例

最新推荐文章于 2022-07-01 17:09:21 发布

好人永远平安

最新推荐文章于 2022-07-01 17:09:21 发布

阅读量544

点赞数

分类专栏： JAVA资料文章标签： java jsp

本文链接：https://blog.csdn.net/u011683001/article/details/26590049

版权

JAVA资料专栏收录该内容

21 篇文章 0 订阅

订阅专栏

cookie是存于用户硬盘的一个文件，这个文件通常对应于一个域名，当浏览器再次访问这个域名时，便使这个cookie可用。因此，cookie可以跨越一个域名下的多个网页，但不能跨越多个域名使用。不同的浏览器对cookie的实现也不一样，但其性质是相同的。例如在Windows 2000以及Windows xp中，cookie文件存储于documents and settings/userName/cookie/文件夹下。通常的命名格式为：userName@domain.txt 。

cookie是用来识别用户，每当同一台计算机通过浏览器请求某个页面时，就会发送这个 cookie。你可以使用 JavaScript 来创建和取回 cookie 的值。

cookie机制将信息存储于用户硬盘，因此可以作为全局变量，这是它最大的一个优点。同时加入了一些限制确保cookie不会被恶意使用，同时不会占据太多磁盘空间，每个域的cookie总数是有限制的。 IE6 每个域名最多20个cookie ; IE7以及以上的版本和 Firefox 浏览器限制每个域最多50个，Oprea限制每个域最多30多个，Safari 和 Chrome没有硬件规定。

cookie的成分：名称，值，域，路径，失效时间，安全标志。

它可以用于以下几种场合。

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

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

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

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

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

下面一段代码是对cookie的设置，获取以及删除操作。

 
 //新建cookie。    
        
 //hours为空字符串时,cookie的生存期至浏览器会话结束。hours为数字0时,建立的是一个失效的cookie,这个cookie会覆盖已经建立过的同名、同path的cookie（如果这个cookie存在）。   
        
 function setCookie(name, value, hours, path) { 
        
     var name = escape(name);//escape() 来编码字符串：就把name编码成%3F%21%3D%28%29%23%25%26这种格式，以便在所有的计算机上读取该字符串 
        
     var value = escape(value); 
        
     var expires = new Date(); 
        
     expires.setTime(expires.getTime() + hours * 3600000); 
        
     path = path == "" ? "" : ";path=" + path; 
        
     _expires = (typeof hours) == "string" ? "" : ";expires=" 
        
             + expires.toUTCString(); 
        
     document.cookie = name + "=" + value + _expires + path; 
        
 } 
        
 // 获取cookie值 
        
 function getCookieValue(name) { 
        
     var name = escape(name); 
        
     // 读cookie属性，这将返回文档的所有cookie 
        
     var allcookies = document.cookie; 
        
     // 查找名为name的cookie的开始位置 
        
     name += "="; 
        
     var pos = allcookies.indexOf(name); 
        
     // 如果找到了具有该名字的cookie，那么提取并使用它的值 
        
     if (pos != -1) { // 如果pos值为-1则说明搜索"version="失败 
        
         var start = pos + name.length; // cookie值开始的位置 
        
         var end = allcookies.indexOf(";", start); // 从cookie值开始的位置起搜索第一个";"的位置,即cookie值结尾的位置 
        
         if (end == -1) 
        
             end = allcookies.length; // 如果end值为-1说明cookie列表里只有一个cookie 
        
         var value = allcookies.substring(start, end); // 提取cookie的值 
        
         return unescape(value); // 对它解码 
        
     } else 
        
         return ""; // 搜索失败，返回空字符串 
        
 } 
        
 // 删除cookie 
        
 function deleteCookie(name, path) { 
        
     var name = escape(name); 
        
     var expires = new Date(0); 
        
     path = path == "" ? "" : ";path=" + path; 
        
     document.cookie = name + "=" + ";expires=" + expires.toUTCString() + path; 
        
 }

具体实例：用户登录勾选记住密码的一个效果

  1 <!DOCTYPE HTML>
  2 <html>
  3 <head>
  4 <title>login</title>
  5 </head>
  6 <body>
  7 
  8 <form>
  9 用户名：<input type="text" id="username"/><br/>
 10 密码：<input type="passwd" id="pwd"/><br/>
 11 <input type="checkbox" id = "rempwd" checked=""/>记住密码
 12 <input type="button" value="登录" id="btn"/>
 13 </form>
 14 <script type="text/javascript">
 15     window.onload =function() {
 16     
 17 var btn = DocGetId("btn");
 18         
 19         btn.onclick =function() {
 20 var rempwd = DocGetId("rempwd");
 21 var userName = DocGetId("username").value, pwd = DocGetId("pwd").value;
 22 if(rempwd.checked){
 23                 setCookie(userName,userName,2);
 24                 setCookie(userName+"_pwd",pwd,2);
 25 //alert(userNameValue +"|"+passwordValue)
 26             }
 27 else{
 28                 deleteCookie(userName);
 29                 deleteCookie(pwd);
 30             }
 31             checkLogin(userName, pwd);
 32         }
 33         
 34         DocGetId("username").onblur =function() {
 35 var user = DocGetId("username").value;
 36 var userNameValue = getCookieValue(user);
 37 var passwordValue = getCookieValue(user+"_pwd"); 
 38 if( userNameValue == user) {
 39                 DocGetId("pwd").value = passwordValue;
 40             }
 41         }
 42     
 43     }
 44 function DocGetId(id) {
 45 return document.getElementById(id);
 46     }
 47 function checkLogin(str1,str2) {
 48 //var reg = /^[A-Za-z0-9]+{3,21}$/;
 49 var reg=/[(\￥)(\~)(\!)(\@)(\#)(\$)(\%)(\^)(\&)(\*)(\()(\))(\-)(\_)(\+)(\=)(\[)(\])(\{)(\})(\|)(\\)(\;)(\:)(\')(\")(\,)(\.)(\/)(\<)(\>)(\?)(\)]+/ ;
 50 
 51 if(str1 ==""|| str1 ==null) {
 52             alert("请您先填写用户名");
 53 returnfalse;
 54         }elseif(reg.test(str1)){
 55             alert("用户名不能为非法字符");
 56 returnfalse;
 57         } elseif(str2 ==""|| str2 ==null) {
 58             alert("密码不能为空");
 59 returnfalse;
 60         } 
 61 else {
 62             alert("弄对了");
 63 returntrue;
 64         }
 65     }
 66     
 67 //新建cookie
 68 //hours为空字符串时,cookie的生存期至浏览器会话结束。hours为数字0时,建立的是一个失效的cookie,这个cookie会覆盖已经建立过的同名、同path的cookie（如果这个cookie存在）。
 69 function setCookie(name,value,hours) {
 70 var name = escape(name);
 71 var value = escape(value);
 72 var expires =new Date();
 73         expires.setTime(expires.getTime() + hours*3600000);
 74         _expires = (typeof hours) =="string"?"" : ";expires="+ expires.toUTCString(); 
 75         document.cookie = name +"="+value + _expires ;    
 76     }
 77 //获取cookie
 78 function getCookieValue(name) {
 79 var name = escape(name);
 80 //读cookie属性，这将返回文档的所有cookie  
 81 var allcookies = document.cookie;
 82 //查找名为name的cookie的开始位置  
 83         name +="=";
 84 var pos = allcookies.indexOf(name);
 85 //如果找到了具有该名字的cookie，那么提取并使用它的值 
 86 if(pos !=-1 ) { 
 87 var start = pos + name.length; 
 88 var end = allcookies.indexOf(";", start);
 89 if (end ==-1) end = allcookies.length; 
 90 var value = allcookies.substring(start,end);
 91 return unescape(value);
 92             
 93         } elsereturn"";    
 94     }
 95 //删除cookie
 96 function deleteCookie(name){  
 97 var name = escape(name);
 98 var expires =new Date(0);
 99 
100         document.cookie = name +"="+";expires="+ expires.toUTCString() ;  
101     }
102     
103 </script>
104 </body>
105 </html>

好人永远平安

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript cookie实例

cookie是存于用户硬盘的一个文件，这个文件通常对应于一个域名，当浏览器再次访问这个域名时，便使这个cookie可用。因此，cookie可以跨越一个域名下的多个网页，但不能跨越多个域名使用。不同的浏览器对cookie的实现也不一样，但其性质是相同的。例如在Windows 2000以及Windows xp中，cookie文件存储于documents and settings/userName
复制链接

扫一扫

专栏目录