JavaScript： Cookie 详解、实例与应用

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

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

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

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

document.cookie="userId=828";
2

document.cookie="userName=hulk";

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

构造通用的cookie处理函数：

/**//***
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

/**//* Cookie 过期时间 */
14

var expire = new Date();
15

/**//* 如果未设置nDays参数或者nDays为0，取默认值 1 */
17

if(nDays == null || nDays == 0)
18

nDays = 1;
19

/**//* 计算Cookie过期时间 */
21

expire.setTime(today.getTime() + nDays * 24 * 60 * 60 * 1000); //获取毫秒数
22

/**//* 设置Cookie值 */
24

document.cookie = cookieName + "=" + escape(cookieValue) + ";expires=" + expire.toGMTString();
25

}
26

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

// 登录函数
2

function login()
3

{
4

// 用户名
5

var username = $("user").value;
6

// 用户密码
8

var password = $("pass").value;
9

// 我们这里设置一额外条件，交友登录用户选择
11

// 是否7天内无需再登录，即可访问
12

var save = $("save").checked;
13

// 这里，假设一合法的用户名/密码是 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

// 通过验证，跳转到下一页面
24

document.location = "page2.html";
25

}
26

else
27

{
28

alert("用户名或密码错误！");
29

}
30

}
31

function $(id)
33

{
34

return document.getElementById(id);
35

}
36

</script>

调用（或称嵌入）以上Js代码的页面文件，如下：

//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方法）：

/**//***

* 读取指定的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 = "<a href='Page1.html'>请返回，登录！</a>";

}

function $(id)

{

return document.getElementById(id);

}

// HTML body部分

</body>

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

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

JavaScript： Cookie 详解、实例与应用相关推荐

[转自脚本之家] Javascript cookie 详解
cookie概述在上一节,曾经利用一个不变的框架来存储购物栏数据,而商品显示页面是不断变化的,尽管这样能达到一个模拟全局变量的功能,但并不严谨.例如在导航框架页面内右击,单击快捷菜单中的[刷新]命 ...
JavaScript正则表达式详解（一）正则表达式入门
JavaScript正则表达式是很多JavaScript开发人员比较头疼的事情,也很多人不愿意学习,只是必要的时候上网查一下就可以啦~本文中详细的把JavaScript正则表达式的用法进行了列表,希望 ...
JavaScript事件详解-jQuery的事件实现（三）
正文本文所涉及到的jQuery版本是3.1.1,可以在压缩包中找到event模块.该篇算是阅读笔记,jQuery代码太长.... Dean Edward的addEvent.js 相对于zepto的e ...
HTTP Cookie详解
HTTP Cookie详解 Cookie总是保存在客户端中,按在客户端中的存储位置,可分为内存Cookie和硬盘Cookie.内存Cookie由浏览器维护,保存在内存中,浏览器关闭后就消失了,其存在时 ...
JavaScript 数据类型详解（对象、set、map）
在上一篇博客中我已经详细介绍了JavaScript 中的字符串和数组,没看过的戳[JavaScript 数据类型详解(字符串.数组)]哦,现在我们来看看对象(Object)和 ES6 新增的 Set ...
cookie详解（含vue-cookie）
今天看到一篇cookie的文章,写的特别详细,感谢晚晴幽草轩的分享,原文链接http://mp.weixin.qq.com/s/NXrH7R8y2Dqxs9Ekm0u33w 原文如下,记录到此供以 ...
常用经典SQL语句大全完整版--详解+实例 (存)
常用经典SQL语句大全完整版--详解+实例转傻豆儿的博客 http://blog.sina.com.cn/shadou2012 http://blog.sina.com.cn/s/blog_84 ...
JavaWeb Cookie详解
代码地址如下: http://www.demodashi.com/demo/12713.html Cookie的由来首先我们需要介绍一下,在Web开发过程中为什么会引入Cookie.我们知道Http ...
Message,MessageQueue,Looper,Handler详解+实例
Message,MessageQueue,Looper,Handler详解+实例原文地址 Android的Handler使用(这篇简单介绍Handler的使用) 一.几个关键概念 1.Message ...
Javascript 函数详解
Javascript 函数详解 1)函数声明: 通过关键字function定义,把函数作为变量来声明函数声明后不会立即执行,会在我们需要的时候调用到. <script>function ...

JavaScript： Cookie 详解、实例与应用

JavaScript： Cookie 详解、实例与应用相关推荐

最新文章

热门文章