JavaScript页 Cookie ( 维护页状态)

分享于 

10分钟阅读

Web开发

  繁體 雙語

免责声明

作者不接受任何效果。否定或者否定的责任,这个代码可以能对你,你的计算机,你的狗。 用你自己的风险。 ( 似曾相识我也喜欢的disclaimer。)

快速而肮脏的旅行

所以你不喜欢阅读你在网上看到的所有文章,或者你没有时间? 然后下载源文件,打开你喜欢的浏览器上的" pageCookieDemo.htm"文件。

Background

尽管内部工作要求你成为高级web开发人员,但你只需要对HTML和JavaScript有基本知识。

介绍

有时你需要将用户从当前页面重定向到完成任务的一部分。 大多数人用弹出 Windows 来避免这种情况,但有时你只是不能做它的他任何事情。 无论如何,在导航之间保持页面控件状态确实是一个非常有用的工具。

保持状态( 和用户)

工具由两个 文件组成,一个处理浏览器 Cookies,另一个用于页面状态处理。

<html><head><title>Debug Demo</title><scripttype="text/javascript"src="debuggingtools.js"></script><scripttype="text/javascript"src="Cookie.js"></script><scripttype="text/javascript"src=" PageCookie.js"></script>...
 </head>

请参考 JavaScript调试工具文章了解有关它的信息。

饼干

你可能已经有了许多不同的cookie处理功能。 尽管面向对象的样式编码,但是没有多少消息是如何处理cookie的。 首先,我们创建将处理所有数据的cookie类。

var Cookie = function(name, value, path, expires, domain, secure)
{
 this.Name = name;
 this.Value = value;
 this.Path = path;
 this.Expires = expires;
 this.Domain = domain;
 this.Secure = secure;
}

现在,我们使用JavaScript方法添加一些控件来执行 static 方法: Prototype。记住,没有cookie可以大于 4 KB。 在大多数浏览器上保存一个cookie会在大多数浏览器上生成一个空 cookie,以避免失败。

Cookie.prototype.MaxSize = 4000; //size in KBCookie.prototype.toString = function()
{
 returnthis.Value;
}
Cookie.prototype.Append = function(newValue)
{
 this.Value += newValue;
}

toString() 函数可能会引起你的注意。 它只允许我们使用cookie对象,因为它是一个直接变量。 例如两种方法都是等效的:

alert( myCookie.Value );
alert( myCookie );

由于我不希望你如何提取cookie的值,内部函数 $GetValue 将为你执行任务并将值保存到 .Value 属性中。 .Load().Save().Delete() 方法完全按照它们的名称进行操作。 让我们来看看一些代码。 cookieDemo.htm 页面显示了如何创建。保存。加载和 Cookies。 按以下顺序尝试这些操作:

  • 加载:不存在具有该名称的cookie,值将为空。
  • DELETE: 没有指向 DELETE的cookie,但不会出现错误。
  • 保存:使用"myvalue"创建一个cookie作为它的值。
  • 加载:cookie应该存在,并且值将为"myvalue"。
  • DELETE: cookie将被删除。
  • 加载:不存在具有该名称的cookie,值将为空。
<button onclick="ShowMe('loadCookie');" ID="Button1">loadCookie</button> 
...
 function ShowMe(type)
 {
 try { 
 switch(type)
 {
 case"loadCookie":
 alert( new Cookie("demo").Load() ); 
 break;
 case"saveCookie":
 new Cookie("demo", "myValue").Save();
 alert("saved.");
 break; 
 case"deleteCookie":
 new Cookie("demo").Delete();
 alert("deleted.");
 break;
 }
 } 
 catch(ex)
 {
 debugHelper.Exception(ex.message, document.URL, 
 document.lastModified, document.referrer);
 }
 }
...

页面 Cookie

由于每个域( URL ) 有 20 Cookies 限制,所以不能将每个控件的状态保存在单独的cookie_name:cookie_value 样式中。 使用页面cookie很简单。

...
 function ShowMe(type)
 {
 try { 
 switch(type)
 {
 case"GetPageState":
 var pc = new PageCookie( document.URL);
 pc.GetPageState();
 pc.Save();
 alert("saved.");
 break;
 case"RestorePageState": 
 var pc = new PageCookie(document.URL);
 pc.Load();
 pc.RestorePageState();
 alert("restored.");
 break; 
 case"DeletePageState":
 new PageCookie(document.URL).Delete();
 alert("deleted.");
 break;
 case"RefreshPage": 
 window.location = window.location;
 break;
 }
 }
 catch(ex)
 {
 debugHelper.Exception(ex.message, document.URL, 
 document.lastModified, document.referrer);
 }
 }

这里我们做的就是专门化 Cookie 类以便它可以读取页面控件值并只在一个cookie中保存。 例如我们将用作cookie名称,因此每个页面都有自己的cookie,你可以安全地将&粘贴到其他页面上。

var PageCookie = function(pageName)
{
 this.base = Cookie;
 this.base(pageName);
 this.PageName = pageName;
}
PageCookie.prototype = new Cookie();
PageCookie.prototype.constructor = PageCookie;

因为本文是针对初学者的,所以我不打算解释 CookiePageCookie 方法的内部工作。 如果你需要更多信息,请在本页的底部发表评论。

永久性

这里推荐一个关于cookie持久性的。 你可能已经注意到,默认情况下,cookie的会话基于。 这意味着如果关闭浏览器,Cookies 将丢失。 如果需要在一段时间内保持 Cookies,则需要更改cookie属性 .Expires ( 以UTC时间格式)。 例如: myCookie.Expires ="Thu, 26 May 2006 12:17:25 UTC" 在Google上,你可以找到许多cookie过期的例子。

密码和文件字段( bv )

Constantine说:,总是有一个 catch,。 也是 true的。 由于安全原因,你无法通过JavaScript代码获取输入类型密码字段值。 最后,不做简单的方法,它确实推荐在中存储敏感数据。 另一个有趣的字段是输入类型文件,用于将文件上载到服务器。 这个字段值属性是只读的,这意味着没有脚本可以捕获机器上不想要的文件,并将它的上传到更为。

跨域脚本的一个

我想在使用 Cookies 时,需要添加一些关于一些警告的注释。 如果你使用cookie属性将cookie属性设置为你网站的root,那么在 [www.asp.net/ajax] 内部创建cookie时,这个cookie会被忽略。 例如打开 pageCookie.js 文件并编辑该文件,如代码 below:

var PageCookie = function(pageName)
{
 this.base = Cookie;
 this.base(pageName);
 this.Path = "/";
 //new line added to set cookie paththis.PageName = pageName;
}

此外,所有 Cookies 都有 Domain 属性。 为安全起见,[www.domainA.com] 中没有任何cookie可以访问 [ www.domainB.com]. but this also means that Cookies from [lib.library.com ]的Cookies,不能访问 [www.library.com],的Cookies,这可以能导致。
最后一个案例可以将页面 Cookies的Domain 属性设置为[ library.com].,不要认为可以伪造浏览器。 他们现在很聪明,不会让你使用你不在的领域。

...
 var pc = new PageCookie(document.URL);
 pc.Domain = "myDomain.com"; //use common domain for all cookies  pc.GetPageState();
 pc.Save();
...

注意,我在本文的源代码中修改了这一行为。 这些是浏览器的默认操作,当需要时,你应该根据自己的特定需要更改它们。

结束语

这就是JavaScript页面cookie工具的用途 ! 我希望你能找到很多用途。

引用

网络上的一些资源:

  • 学校的( 1999 )。。 11/06/2006上一次访问。
  • 美国的W3C ( 1994 )。万维网联盟联盟。 11/06/2006上一次访问。

历史记录

  • ::
    • 原始文章。
  • ::
    • 我注意到添加一些关于跨域问题( 路径和域属性)的词。 感谢 James Mendham。
  • ::
    • 添加了对选择多个( 列表框)的支持。 感谢 乔纳森 提醒 Romero。

JAVA  Javascript  STA  STAT  MAIN  State  
相关文章