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

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

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

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

1JavaScript: Cookie 详解、实例与应用document.cookie="userId=828";
2JavaScript: Cookie 详解、实例与应用document.cookie="userName=hulk";


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

构造通用的cookie处理函数:

 1JavaScript: Cookie 详解、实例与应用<script type="text/javascript">
 2

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

 1JavaScript: Cookie 详解、实例与应用 // 登录函数
 2JavaScript: Cookie 详解、实例与应用 function login()
 3script>


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

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


页面效果 如下所示:
JavaScript: Cookie 详解、实例与应用

前面讲到

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


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

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

}


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

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


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

JavaScript: Cookie 详解、实例与应用<script language="JavaScript" type="text/javascript">
JavaScript: Cookie 详解、实例与应用

 

相关文章:

  • 2021-09-11
  • 2021-06-06
  • 2021-08-25
  • 2022-12-23
  • 2022-02-05
  • 2021-09-25
猜你喜欢
  • 2021-09-02
  • 2021-09-29
  • 2022-02-25
  • 2021-12-05
  • 2022-12-23
  • 2021-11-29
  • 2022-12-23
相关资源
相似解决方案