JavaScript操作Cookie
|
admin
2010年9月2日 13:59
本文热度 3817
|
Cookie是保存在浏览器端的,因此浏览器具有操作Cookie的先决条件。浏览器可以使用脚本程序如JavaScript或者VBScript等操作Cookie。这里以JavaScript为例介绍常用的Cookie操作。例如下面的代码会输出本页面所有的Cookie。
- <script>document.write(document.cookie);</script>
各Cookie之间用分号";"隔开,例如:"cookie1=A;cookie2=B"。JavaScript中并没有专门处理Cookie的API,如果想单独获取某个Cookie值,只能手工写代码解析字符串。例如下面代码中的setCookie()与getCookie()方法。
代码5.7 javascript.jsp
- <%@ page language="java" pageEncoding="UTF-8"%>
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
- <html>
- <head>
- <script type="text/javascript">
- function getCookie(name){ // 返回名为name的Cookie
- var str = document.cookie; // 获取Cookie字符串
- if(!str || str.indexOf(name + "=") < 0) // 寻找name=
- return;
- var cookies = str.split("; "); // 用;将所有的Cookie分隔开
- for(var i=0; i<cookies.length; i++){ // 遍历每个Cookie
- var cookie = cookies[i]; // 当前Cookie
- if(cookie.indexOf(name + "=") == 0){ // 如果名字为name
- var value = cookie.substring(name.length + 1);
- // 获取value
- return decodeURI(value); // 将value解码,并返回
- }
- }
- }
- function setCookie(name, value){ // 设置Cookie
- document.cookie = name + "=" + encodeURI(value);
- // 直接设置即可
- }
- </script>
- </head>
- <body>
- <div align="center" style="margin:10px; ">
- <fieldset>
- <legend>当前有效的 Cookie</legend>
- <div id="cookieDiv"></div>
- <script type="text/javascript">
- cookieDiv.innerHTML = document.cookie;
- </script>
- </fieldset>
- <fieldset>
- <legend>欢迎您</legend>
- <table>
- <tr>
- <td>读取 Cookie: </td>
- <td><input name="name1" /> <input class="button"
type="button" value="读取" onclick="alert
- (getCookie(name1.value)); "></td>
- </tr>
- <tr>
- <td>设置 Cookie: </td>
- <td></td>
- </tr>
- <tr>
- <td align="right">Name 属性: </td>
- <td><input name="name2" /></td>
- </tr>
- <tr>
- <td align="right">Value 属性: </td>
- <td><input name="value2" /></td>
- </tr>
- <tr>
- <td> </td>
- <td><input type="button" value="设置" onclick=
- "setCookie(name2.value, value2.value); cookieDiv.
- innerHTML = document.cookie; " class="button"></td>
- </tr>
- </table>
- </fieldset>
- </div>
- </body>
- </html>
代码使用纯JavaScript代码实现了读写Cookie。运行效果如图5.6所示。
上面的setCookie()是个简化了的方法,只能设置name与value属性。如果要设置所有的Cookie属性,可以使用下面的完全版本。
- function setCookie(name, value){ // 设置Cookie
- var expires = (arguments.length > 2) ? arguments[2] : null;
- // 判断expires属性
- var path = (arguments.length > 3) ? arguments[3] : null;
- // 判断path属性
- var domain = (arguments.length > 4) ? arguments[4] : null;
- // 判断domain属性
- var secure = (arguments.length > 5) ? arguments[5] : false;
- // 判断secure属性
- document.cookie = name + "=" + encodeURI(value) + // 设置Cookie属性
- ((expires == null) ? "" : ("; expires=" + expires.toGMTString())) +
- ((path == null) ? "" : ("; path=" + path)) +
- ((domain == null) ? "" : ("; domain=" + domain)) +
- ((secure == true) ? "; secure" : "");
- }
由于JavaScript能够任意地读写Cookie,有些好事者便想使用JavaScript程序去窥探用户在其他网站的Cookie。不过这是徒劳的,W3C组织早就意识到JavaScript对Cookie的读写所带来的安全隐患并加以防备了,W3C标准的浏览器会阻止JavaScript读写任何不属于自己网站的Cookie。换句话说,A网站的JavaScript程序读写B网站的Cookie不会有任何结果。
该文章在 2010/9/2 13:59:24 编辑过