`
JamesQian
  • 浏览: 55731 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

JavaScript Cookie的应用

阅读更多

-------------以下文章只谈在客户端如何用js去控制cookie,这跟servlet的cookie(以后有机会再写)对象截然不同-------------

我们已经知道,在 document 对象中有一个 cookie 属性。但是 Cookie 又是什么?“某些 Web 站点在您的硬盘上用很小的文本文件存储了一些信息,这些文件就称为 Cookie。”—— MSIE 帮助。一般来说,Cookies 是 CGI 或类似,比 HTML 高级的文件、程序等创建的,但是 javascript 也提供了对 Cookies 的很全面的访问权利。

  我们先要学一学 Cookie 的基本知识。

  每个 Cookie 都是这样的:<cookie名>=<值>

   <cookie名>的限制与 javascript 的命名限制大同小异,少了“不能用 javascript 关键字”,多了“只能用可以用在 URL 编码中的字符”。后者比较难懂,但是只要你只用字母和数字命名,就完全没有问题了。<值>的要求也是“只能用可以用在 URL 编码中的字符”。

  每个 Cookie 都有失效日期,一旦电脑的时钟过了失效日期,这个 Cookie 就会被删掉。我们不能直接删掉一个 Cookie,但是可以用设定失效日期早于现在时刻的方法来间接删掉它。

   每个网页,或者说每个站点,都有它自己的 Cookies,这些 Cookies 只能由这个站点下的网页来访问,来自其他站点或同一站点下未经授权的区域的网页,是不能访问的。每一“组”Cookies 有规定的总大小(大约 2KB 每“组”),一超过最大总大小,则最早失效的 Cookie 先被删除,来让新的 Cookie“安家”。

  现在我们来学习使用 documents.cookie 属性。

   如果直接使用 documents.cookie 属性,或者说,用某种方法,例如给变量赋值,来获得 documents.cookie 的值,我们就可以知道在现在的文档中有多少个 Cookies,每个 Cookies 的名字,和它的值。例如,在某文档中添加“document.write(documents.cookie)”,结果显示:

name=kevin; email=kevin@kevin.com; lastvisited=index.html

这 意味着,文档包含 3 个 Cookies:name, email 和 lastvisited,它们的值分别是 kevin, kevin@kevin.com 和 index.html。可以看到,两个 Cookies 之间是用分号和空格隔开的,于是我们可以用 cookieString.split('; ') 方法得到每个 Cookie 分开的一个数组(先用 var cookieString = documents.cookie)。

  设定一个 Cookie 的方法是对 documents.cookie 赋值。与其它情况下的赋值不同,向 documents.cookie 赋值不会删除掉原有的 Cookies,而只会增添 Cookies 或更改原有 Cookie。赋值的格式:

documents.cookie = 'cookieName=' + escape('cookievalue')
+ ';expires=' + expirationDateObj.toGMTString();

是 不是看到头晕了呢?cookieName 表示 Cookie 的名称,cookievalue 表示 Cookie 的值,expirationDateObj 表示储存着失效日期的日期对象名,如果不需要指定失效日期,则不需要第二行。不指定失效日期,则浏览器默认是在关闭浏览器(也就是关闭所有窗口)之后过 期。

  首先 escape() 方法:为什么一定要用?因为 Cookie 的值的要求是“只能用可以用在 URL 编码中的字符”。我们知道“escape()”方法是把字符串按 URL 编码方法来编码的,那我们只需要用一个“escape()”方法来处理输出到 Cookie 的值,用“unescape()”来处理从 Cookie 接收过来的值就万无一失了。而且这两个方法的最常用途就是处理 Cookies。其实设定一个 Cookie 只是“documents.cookie = 'cookieName=cookievalue'”这么简单,但是为了避免在 cookievalue 中出现 URL 里不准出现的字符,还是用一个 escape() 好。
  然后“expires”前面的分号:注意到就行了。是分号而不是其他。
  最后 toGMTString() 方法:设定 Cookie 的时效日期都是用 GMT 格式的时间的,其它格式的时间是没有作用的。

  现在我们来实战一下。设定一个“name=rose”的 Cookie,在 3 个月后过期。

var expires = new Date();
expires.setTime(expires.getTime() + 3 * 30 * 24 * 60 * 60 * 1000);
/* 三个月 x 一个月当作 30 天 x 一天 24 小时
x 一小时 60 分 x 一分 60 秒 x 一秒 1000 毫秒 */
documents.cookie = 'name=rose;expires=' + expires.toGMTString();

为 什么没有用 escape() 方法?这是因为我们知道 rose 是一个合法的 URL 编码字符串,也就是说,'rose' == escape('rose')。一般来说,如果设定 Cookie 时不用 escape(),那获取 Cookie 时也不用 unescape()。

  再来一次:编写一个函数,作用是查找指定 Cookie 的值。

function getCookie(cookieName) {
var cookieString = documents.cookie;
var start = cookieString.indexOf(cookieName + '=');
// 加上等号的原因是避免在某些 Cookie 的值里有
// 与 cookieName 一样的字符串。
if (start == -1) // 找不到
return null;
start += cookieName.length + 1;
var end = cookieString.indexOf(';', start);
if (end == -1) return unescape(cookieString.substring(start));
return unescape(cookieString.substring(start, end));
}

这 个函数用到了字符串对象的一些方法,如果你不记得了(你是不是这般没记性啊),请快去查查。这个函数所有的 if 语句都没有带上 else,这是因为如果条件成立,程序运行的都是 return 语句,在函数里碰上 return,就会终止运行,所以不加 else 也没问题。该函数在找到 Cookie 时,就会返回 Cookie 的值,否则返回“null”。

  现在我们要删除刚才设定的 name=rose Cookie。

var expires = new Date();
expires.setTime(expires.getTime() - 1);
documents.cookie = 'name=rose;expires=' + expires.toGMTString();

可以看到,只需要把失效日期改成比现在日期早一点(这里是早 1 毫秒),再用同样的方法设定 Cookie,就可以删掉 Cookie 了。

function CookieUtil(){};

/**
 * Sets a Cookie with the given name and value.
 *
 * name       Name of the cookie
 * value      Value of the cookie
 * [expires]  Expiration date of the cookie (default: end of current session)
 * [path]     Path where the cookie is valid (default: path of calling document)
 * [domain]   Domain where the cookie is valid
 *              (default: domain of calling document)
 * [secure]   Boolean value indicating if the cookie transmission requires a
 *              secure transmission
 */
CookieUtil.setCookie = function(name, value, expires, path, domain, secure)
{
 	var domain = "alisoft.com";
    document.cookie= name + "=" + escape(value) +
        ((expires) ? "; expires=" + expires.toGMTString() : "") +
        ((path) ? "; path=" + path : "; path=/") +
        ((domain) ? "; domain=" + domain : "domain=alisoft.com") +
        ((secure) ? "; secure" : "");
}

/**
 * Gets the value of the specified cookie.
 *
 * name  Name of the desired cookie.
 *
 * Returns a string containing value of specified cookie,
 *   or null if cookie does not exist.
 */
CookieUtil.getCookie = function(name,defaultvalue)
{
    var dc = document.cookie;
    var prefix = name + "=";
    var begin = dc.indexOf("; " + prefix);
    if (begin == -1)
    {
        begin = dc.indexOf(prefix);
        if (begin != 0) {
			if (defaultvalue) {return defaultvalue;}else{return null;}
		}
	}
	else
	{
		begin += 2;
	}
	var end = document.cookie.indexOf(";", begin);
    if (end == -1)
    {
        end = dc.length;
    }
    return unescape(dc.substring(begin + prefix.length, end));
}

/**
 * Deletes the specified cookie.
 *
 * name      name of the cookie
 * [path]    path of the cookie (must be same as path used to create cookie)
 * [domain]  domain of the cookie (must be same as domain used to create cookie)
 */
CookieUtil.deleteCookie = function(name, path, domain)
{
    if (CookieUtil.getCookie(name))
    {
        document.cookie = name + "=" + 
            ((path) ? "; path=" + path : "") +
            ((domain) ? "; domain=" + domain : "") +
            "; expires=Thu, 01-Jan-70 00:00:01 GMT";
    }
}
 
分享到:
评论

相关推荐

    Javascript Cookie操作类的封装

    在JavaScript中,Cookie是一种在客户端存储少量数据的机制,它对于网页应用的用户状态管理和临时存储信息具有重要作用。本文将详细讲解如何封装一个Cookie操作类,实现对Cookie的增删改查功能。 首先,理解Cookie的...

    javascript cookie 操作框架 XCookie

    JavaScript Cookie 操作框架 XCookie 是一个用于方便地管理和操作浏览器cookies的工具,它简化了JavaScript中处理cookie的复杂性。在Web开发中,cookies经常被用来存储用户状态、会话信息或其他临时数据,而XCookie...

    cookie应用(javascript)

    在这个"cookie应用(javascript)"的压缩包中,包含了一个JS文件和两个HTML文件,显然是为了演示如何使用JavaScript来创建、读取和管理Cookie。 首先,我们需要理解Cookie的基本概念。Cookie是由服务器端发送到浏览器...

    javascript 文本框下拉提示与cookie应用实例

    在这个实例中,我们结合了JavaScript和Cookie技术来实现这一功能。 首先,HTML部分定义了一个输入框(`&lt;input id="txt" type="text"&gt;`)以及相关的CSS样式来创建下拉菜单的效果。CSS通过`.Menu`和`.Menu2`类设置了...

    javascript cookie 的应用

    javascript操作cookie的三个函数非常方便。验证过的,实践过的。

    cookie 在javascript中的应用

    cookie javascript 应用 详解: 添加该cookie" onclick="add()" /&gt; 读取所有cookie" onclick="getall()" /&gt; 读取该名称cookie的值" onclick="get()" /&gt; 删除该名称cookie" onclick="del()" /&gt; &lt;/div&gt;

    CookiesjsJavaScript客户端的Cookie操作库

    "CookiejsJavaScript客户端的Cookie操作库" 指的是一种JavaScript库,专门用于在客户端(即用户浏览器)进行Cookie的操作。Cookiejs是这个库的名称,它提供了一组简单易用的API,帮助开发者方便地管理用户的Cookie。...

    JavaScript环境中网络课程开发之cookie技术应用研究.pdf

    JavaScript环境中网络课程开发之cookie技术应用研究 一、什么是Cookie? Cookie是由Netscape开发的作为持续保存状态信息和其他信息的方式。其本质是以一定格式存储特定信号的文本文件。Cookie首先是为CGI程序设计...

    C#和javascript操作cookie

    在ASP.NET环境中,结合C#和JavaScript,我们可以实现跨语言的Cookie操作,以便于实现用户会话管理、个性化设置等功能。本文将详细探讨如何在C#后端和JavaScript前端中操作Cookie。 首先,C#在ASP.NET中处理Cookie...

    javascript实现cookie功能

    在网页中实现Cookie功能是JavaScript的一个常见应用场景。Cookie是一种存储在用户浏览器上的小型文本文件,常用于管理用户会话、保存用户设置或者跟踪用户行为。在这个Java工程中,尽管主要编程语言是Java,但...

    cookiejs一个用于处理浏览器cookie的简单轻量级JavaScriptAPI

    在实际应用中,这些功能使得Cookie.js非常灵活,无论是简单的会话管理、用户偏好设置还是更复杂的Web应用程序状态跟踪,都能胜任。由于它没有依赖其他库,所以它可以无缝集成到现有的JavaScript环境中,无论项目已经...

    JavaScript数据存储 Cookie篇

    JavaScript中的Cookie是客户端数据存储的一种常见方式,主要用来在用户浏览器端存储小量信息,尤其适用于维护用户会话状态。本文将深入探讨Cookie的基本概念、组成部分、操作方法以及相关注意事项。 1. **Cookie的...

    javascript.cookie

    总结,JavaScript Cookie是Web开发中不可或缺的一部分,用于在客户端持久化存储数据,理解其工作原理和使用方式对提升Web应用的功能和用户体验至关重要。在实际开发中,应合理利用Cookie,并注意相关的安全和性能...

    JavaScript入门之事件、cookie、定时等

    JavaScript作为网页开发中最广泛使用的脚本语言之一,其事件处理机制、cookie的应用、定时任务的执行是前端开发的重要知识点,对于初学者来说,理解这些概念对于学习JavaScript至关重要。 ### 事件 (Event) 在Web...

    使用JavaScript实现Cookie的增删改查操作

    在实际应用中,我们还可以考虑添加更多的功能,如处理多个Cookie、设置路径和域、处理特殊字符等。通过封装这些操作,可以创建更高级的Cookie管理工具,方便在项目中使用。了解和熟练掌握这些基本操作对于Web开发者...

    cookie中设置了HttpOnly属性,那么通过js脚本将无法读取到cookie信息,这样能有效的防止XSS攻击.zip_js设置cookie值

    HttpOnly属性是提升Web应用安全性的有效手段,它可以阻止JavaScript对Cookie的访问,降低XSS攻击的危害。无论是Java还是PHP,设置HttpOnly属性都是相对简单的过程,只需在创建Cookie时指定相应的选项即可。为了确保...

    JavaScript cookie详解及简单实例应用

    本文详细介绍了JavaScript中cookie的概念、基本属性以及如何在实际开发中应用cookie。cookie是一种能够让web浏览器存储小量数据并将其在浏览器和服务器之间传递的技术。其重要性在于能够在用户浏览器中持久化存储...

    cookie--javascript记录用户之前是否访问本页面

    标题中的“cookie--javascript记录用户之前是否访问本页面”指的是JavaScript中使用Cookie技术来追踪用户访问历史的一个常见应用场景。在Web开发中,Cookie是服务器发送到用户浏览器并存储的一小块数据,它可以在...

    Javascript中关于Cookie存储Array集合

    本文主要讨论的是如何在Cookie中存储Array集合,这在实际应用中很常见,比如保存用户的购物车信息或者记录多条设置。在JavaScript中,由于Cookie的大小限制(通常为4KB)和只能存储字符串的特性,直接存储Array可能...

    cookie通信_javascript_

    在本文中,我们将深入探讨JavaScript中的Cookie通信,包括它的原理、使用方法以及在实际应用中的案例,如七天免登录、商品结算页和添加到购物车功能。 一、Cookie基本概念 Cookie是由服务器端生成,发送到客户端...

Global site tag (gtag.js) - Google Analytics