JavaScript: Cookie 详解、实例与应用

Cookie(也)是JavaScript中的一种机制,可以实现严格的跨页面全局变量的要求。

Cookie是存于用户硬盘的一个文件,这个文件通常对应于一个域名,当浏览器再次访问这个域名时,便使这个cookie可用。因此,cookie可以跨越一个域名下的多个网页,但不能跨越多个域名使用。

在Cookie设置中,用escape()函数进行编码,可避免乱码和特殊字符问题; 当使用escape()编码后,在取出值以后需要使用unescape()进行解码才能得到原来的cookie值。

设置Cookie时可以直接给document.cookie赋值:

1document.cookie="userId=828";
2document.cookie="userName=hulk";


而且后面的值不会覆盖前面的值,它具有一种累加机制。
cookie的值可以由document.cookie直接获得,但这样获取的是所有的cookie值;要通过一指定cookie名称来获得所对应的值,则需做一些处理。

构造通用的cookie处理函数:

 1<script type="text/javascript">
 2 /**//***
 3 * 设置Cookie (通用函数)
 4 * @param {string} cookieName Cookie 名称
 5 * @param {string} cookieValue Cookie 值
 6 * @param {string} nDays Cookie 过期天数
 7 */

 8 function SetCookie(cookieName, cookieValue, nDays)
 9 {
10     /**//* 当前日期 */
11     var today = new Date();
12 
13     /**//* Cookie 过期时间 */
14     var expire = new Date();
15
16     /**//* 如果未设置nDays参数或者nDays为0,取默认值 1 */
17     if(nDays == null || nDays == 0
18        nDays = 1;
19     
20      /**//* 计算Cookie过期时间 */
21      expire.setTime(today.getTime() + nDays * 24 * 60 * 60 * 1000); //获取毫秒数
22       
23      /**//* 设置Cookie值 */
24      document.cookie = cookieName + "=" + escape(cookieValue) + ";expires=" + expire.toGMTString();
25 }
 
26

  
   下面我来编写一个登录函数,加强理解和应用

 1 // 登录函数
 2 function login()
 3 {
 4    // 用户名
 5    var username = $("user").value;
 6    
 7    // 用户密码
 8    var password = $("pass").value;
 9
10    // 我们这里设置一额外条件,交友登录用户选择
11     // 是否7天内无需再登录,即可访问
12     var save = $("save").checked;
13    
14    // 这里,假设一合法的用户名/密码是 admin/admin
15    if(username == "admin" && password == "admin")
16    {
17       // 在Cookie中保存用户名
18        if(save) 
19          SetCookie("username",username,7);
20       else
21          SetCookie("username",username,1);
22    
23       // 通过验证,跳转到下一页面
24        document.location = "page2.html";
25    }

26    else
27    {
28       alert("用户名或密码错误!");
29    }

30 }

31
32 function $(id)
33 {
34    return document.getElementById(id);
35 }

36
37</script>


调用(或称 嵌入)以上Js代码的页面文件,如下:

 1 //Page1.html 的 body 部分,其他省略
 2 <body>
 3  <div id="main">
 4    <div>
 5       <span>用户名:</span> <input type="text" id="user" />
 6    </div>
 7    <div>
 8       <span>密 码:</sapn> <input type="password" id="pass" />
 9    </div> 
10    <div>
11       <input type="checkbox" id="save" /> 七天内无需登录
12    </div>
13    <div>
14       <input type="button" onclick="login()" value="登 录" />
15    </div>
16 </body>


页面效果 如下所示:


前面讲到

设置Cookie时,可以直接给 document.cookie 赋值:
    document.cookie="userId=828";
    document.cookie="userName=hulk";
而且后面的值不会覆盖前面的值,它具有一种 累加机制


Page2.html内部页面(你可以先这样理解),必须在登录后才能使用。该页面需要对用户当前PC的Cookie进行判断,如果发现用户已经通过该机器登录过,该页面则显示 欢迎信息,否则显示“请登录”的链接。

Page2.html页面的代码如下(下面分开说明):
(1) Js代码 (通用读取Cookie方法):
 

 <script type="text/javascript">
 
/**//*** 
 * 读取指定的Cookie值
 * @param {string} cookieName Cookie名称
 
*/


 
// 方法一:
 function GetCookie(cookieName)
 
{
    
/**//* Cookie 字符串 */
    
var theCookie = "" + document.cookie;

    
/**//* 找到cookieName的位置 */
    
var ind = theCookie.indexOf(cookieName);

    
/**//* 如果未找到cookieName,返回空字符串 */
    
if(ind == -1 || cookieName == "")
       
return "";
    
     
/**//* 确定分号的位置 */
     
var ind1 = theCookie.indexOf(';', ind);
     
if(ind1 == -1
          ind1 
= theCookie.length;
     
     
/**//* 读取Cookie值 */
     
return unescape(theCookie.substring(ind+cookieName.length + 1, ind1));
 }


 
// 方法二:
 function GetCookie(cookieName)
 
{
    
var strCookie=document.cookie;

    
// 将多cookie切割为多个名/值对
    var arrCookie=strCookie.split(""); 

    
for(var i=0;i<arrCookie.length;i++)
   

      
// 遍历cookie数组,处理每个cookie对
       var arr=arrCookie[i].split("=");
     
      
// 找到名称为cookieName的cookie,并返回它的值
       if(arr[0]=="username")
      
return arr[1];
   }

     
return "";
}


(2) Page2.html HTML 代码部分:
    

  // Page2.html 页面初始加载执行的Js代码:
  function init()
  {
     // 从Cookie中读取用户名信息
      var username = GetCookie("username");
   
     // 如果用户已经登录过
      if(username && username.length >0)
     {
        // 显示欢迎信息
         $("msg").innerHTML = "
<h2>欢迎光临:"+ username + "!</h2>";
     }
     else
     {
        $("msg").innerHTML = "
<href='Page1.html'>请返回,登录!</a>";
     }
  }

   function $(id)
   {
      return document.getElementById(id);
   }

   // HTML body部分
   
<body onload="init()">
      
<div id="msg"></div>
   
</body>


另外,关于删除Cookie,可以使用以下方法:
该函数可以删除指定名称的cookie:

<script language="JavaScript" type="text/javascript">

   
function deleteCookie(username){
   
var date=new Date();
   
// // 删除一个cookie,就是将其过期时间设定为一个过去的时间
   date.setTime(date.getTime()-10000); 
   document.cookie
=name+"=v; expire=" + date.toGMTString();
}

</script> 

 

转载于:https://www.cnblogs.com/Dlonghow/archive/2008/07/10/1240109.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/381619.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

2013_warmup

感觉题目质量很差的一套&#xff0c;可能是不正式的原因。 4706 Childrens Day 签到题。 4707 Pet 签到题目&#xff0c;BFS或者DFS; 4708 Rotation Lock Puzzle 分析模拟题 4709 Herding 计算几何水题。 4710 Balls R…

cs模式下,显示网络图片一例

由于在cs模式中 显示图片很简单picturebox1.imageimage.fromfile(filename) 但是filename不能是url&#xff0c;所以不能显示网络图片&#xff0c;怎么办呢&#xff1f;其实 .net 为我们准备了一套很方便的方法。在.net中&#xff0c;网上的资源&#xff08;图片&#xff0c;动…

2013_chengdu_online

4728 A Game in the Hospital 4729 An Easy Problem for Elfness 4730 We Love MOE Girls 签到题目 4731 Minimum palindrome 规律构造 4732 Round Table 4733 G(x) 枚举dp 4734 F(x) 数位dp基础题目。…

【Vegas2008】7月19日-凉粉的做法

1&#xff09; 准备淀粉&#xff0c;1个量杯。2&#xff09; 盛出1杯淀粉到小锅里&#xff0c;倒6份凉水到小锅里。淀粉和水的比例是1&#xff1a;6&#xff0c;用什么工具来量并不重要&#xff0c;把比例弄好了就行。另外&#xff0c;关于比例&#xff0c;有人喜欢1&#xff1…

2013_hangzhou_online

4738 Caocaos Bridges 求无向图的桥中最小的那个&#xff0c;tarjan 4739 Zhuge Liangs Mines 状态压缩暴力 4740 The Donkey of Gui Zhou 求两个点在图上的相遇点&#xff0c;模拟dfs 4741 Save Labman No.004 计算几何&#xff0c;平面上的两条…

骑行封龙山

最近受不了luoluo和尚的鄙视加刺激(车子比我晚买好几个月&#xff0c;骑行路程快1000公里了-_-),中午心血来潮就随便选了个路线&#xff0c;跟刘兄一起骑行封龙山去了&#xff0c;本来预订的正常路程从二环到封龙山大概17公里&#xff0c;来回34&#xff0c;偏偏被我这天才路痴…

2013_nanjing_online

4748 Area 4749 Parade Show 贪心模式匹配/rk-hash 4750 Count The Pairs 最小瓶颈生成树&#xff0c;统计瓶颈>c的个数。 4751 Divide Groups BFS/DFS搜索/划分成二分图 4752 Polygon 简单计算几何&#xff0c;线和多边形的交辛…

SQL Server 2005异地备份

前几天做了数据库镜像&#xff0c;现在也要来做做数据库的备份。本方案采用备份至本地然后copy到文件服务器的方法。 SQL server 2005打了sp2的补丁后好像存储过程xp_cmdshell是不能直接用的 显示高级选项&#xff08;仅需执行一次&#xff09; EXEC sp_configure show advan…

2013_changchun_online

4759 Poker Shuffle 二进制规律枚举 4760 Good Firewall 稍加变化tire树 4761 Sky 4762 Cut the Cake 概率题目&#xff0c;yy&#xff0c;公式。 4763 Theme Section 简单kmp 4764 Stone 威做福博弈&a…

从控件开发的角度看几个editor控件,Freetextbox,radtoolbar,abouteditor,cuteeditor

今天控件的开发有了很大进展&#xff0c;写些东西。在开发之前&#xff0c;我看了几个控件的源代码&#xff0c;如Freetextbox,radtoolbr,abouteditor以及cuteeditor。今天凭会议总结一下他们的特点&#xff0c;能记下来的都是他们很独特的地方。 首先是FreeTextbox 此控件是生…

2014_hangzhou_onsite

4770 Lights Against Dudely 状态压缩枚举 4771 Stealing Harry Potters Precious 签到&#xff0c;压缩后直接BFS 4772 Zhuge Liangs Password 签到题目&#xff0c;模拟矩阵旋转即可 4773 Problem of Apollonius 4774 Random Number Generato…

C#与VB.NET代码互相转换在线工具

实用的在线工具---把 C# 代码转换成 VB.NET 代码在线工具--把C#代码转换成VB.NET代码有不少朋友在网上找资料时经常会遇到想要VB.NET的代码&#xff0c;但却只有C#的代码。 自己改又改不大来&#xff01; 本人不经意发现有一个在线工具&#xff0c;使用方便。 支持&#xff1a;…

Codeforce_732

A Buy a Shovel水题&#xff0c;问买鞋子的个数&#xff0c;直接暴力。 #include <bits/stdc.h> using namespace std;int main() {int k,r,ans0;scanf("%d%d",&k,&r);for (int i1;i<10000;i){if (i*k%100||i*k%10r){ansi;break;}}printf("…

苹果电脑可以装windows系统吗_不只是桌面,这个 Windows 皮肤可以帮你全局美化 Windows 系统

追求个性化是个永恒不变的需求&#xff0c;而在主题这件事情上&#xff0c;和 Windows XP 那个百花齐放的时代相比&#xff0c;我们在 Windows 10 下能够享受到的官方主题大多都只是换换壁纸、改改配色这么简单。而在千篇一律的官方主题之外&#xff0c;美化社区的 Windows 10 …

2013_chengdu_onsite

4781 Assignment For Princess 构造题目&#xff0c;可以先构造前n条边&#xff0c;然后对于剩下的m-n条边&#xff0c;一直构造搜索w%30。 4782 Beautiful Soup 直接模拟即可&#xff0c;不过要注意题面。 4783 Clumsy Algorithm 4784 Dinner …

SQL Server 2005: 存储过程签名

SQLSERVER 2005提供的对存储过程签名(signature)功能是我最喜欢的。如果我们要编写一个存储过程,执行该存储过程里的代码需要权限P,并且我们想要用户Alice可以执行这个存储过程&#xff0c;但是我们不想将权限P直接赋予给用户Alice&#xff0c; 我们可以用证书(certificate)对这…

手机能上wifi电脑不行_锦囊在此(电脑手机如何配置使用WIFI)

1.路由器接入电源(以下是以TP-LINK为例&#xff0c;其他路由器大同小异&#xff0c;重要是在于关闭DHCP服务器选项)2.打开电脑WIFI连接路由器(找对路由器名称&#xff0c;见路由器底标)(建议不要接入网线&#xff0c;配置好再接入网线)3.打开浏览器输入路由器后台网址(见路由器…

2013_changsha_onsite

4791 Alices Print Service 水&#xff0c;把价格处理出来然后二分。 4792 Bobs new toy 4793 Collision 带入两个方程&#xff0c;解一下就行了。 4794 Arnold 稍微转化一下&#xff0c;变成斐波那契%n的循环节&#xff0c; 4795 Easy …

【转】Sql server锁,独占锁,共享锁,更新锁,乐观锁,悲观锁

锁有两种分类方法。&#xff08;1&#xff09; 从数据库系统的角度来看锁分为以下三种类型&#xff1a; 独占锁&#xff08;Exclusive Lock&#xff09; 独占锁锁定的资源只允许进行锁定操作的程序使用&#xff0c;其它任何对它的操作均不会被接受。执行数据更新命令&#xff0…

8位可控加减法电路设计_100以内数的认知也加减法详解

一、100 以内数的认识1、10个十是100,读作一百。100 是由10个十或100个一组成,它是一个三位数。2、数数时,可以一个一个的数,也可以二个二个的数,五个五个的数,十个十个的数。3、从右边起,第一位是个位,第二位是十位,第三位是百位。4、读数和写数,都从高位起。当计数器上个位或…