一 : 前端开发中Cookie那些事儿：cookie属性详解
前段时间做了项目，在前端实现中频繁的操作cookie，记录几点供大家参考！
cookie操作在前端开发过程中经常遇到，当然如果只是用来存储一些简单用户数据，还是比较简单的，我们要做的可能只是设置cookie名，值，过期时间等，读取也只要根据cookie的名读取相应的cookie值就可以了。在复杂的应用中，光这些肯定就不够了。
cookie的属性
除了name（名）和value（值），cookie还有以下一些可选属性，用来控制cookie的有效期，作用域，安全性等：
expires属性
指定了cookie的生存期，默认情况下cookie是暂时存在的，他们存储的值只在浏览器会话期间存在，当用户退出浏览器后这些值也会丢失，如果想让 cookie存在一段时间，就要为expires属性设置为未来的一个用毫秒数表示的过期日期或时间点，expires默认为设置的expires的当前 时间。现在已经被max-age属性所取代，max-age用秒来设置cookie的生存期。
如果max-age属性为正数，则表示该cookie会在max-age秒之后自动失效。浏览器会将max-age为正数的cookie持久化，即 写到对应的cookie文件中。无论客户关闭了浏览器还是电脑，只要还在max-age秒之前，登录网站时该cookie仍然有效。
如果max-age为负数，则表示该cookie仅在本浏览器窗口以及本窗口打开的子窗口内有效，关闭窗口后该cookie即失效。max-age 为负数的Cookie，为临时性cookie，不会被持久化，不会被写到cookie文件中。cookie信息保存在浏览器内存中，因此关闭浏览器该 cookie就消失了。cookie默认的max-age值为-1。
如果max-age为0，则表示删除该cookie。cookie机制没有提供删除cookie的方法，因此通过设置该cookie即时失效实现删除cookie的效果。失效的Cookie会被浏览器从cookie文件或者内存中删除。
如果不设置expires或者max-age这个cookie默认是Session的，也就是关闭浏览器该cookie就消失了。
这里要说明一下：Session的cookie在ie6下，如果用户实在网页上跳转打开页面或新开窗口（包括target="_blank"，鼠标 右键新开窗口），都是在同一个Session内。如果用户新开浏览器程序或者说是进程再打开当前的页面就不是同一个Session。其他浏览器只要你 Session存在，还是同一个Session，cookie还能共享。在前段时间的项目中ie6下吃了很大一个亏。
domain属性
domain属性可以使多个web服务器共享cookie。domain属性的默认值是创建cookie的网页所在服务器的主机名。不能将一个cookie的域设置成服务器所在的域之外的域。
例如让位于a.sodao.com的服务器能够读取b.sodao.com设置的cookie值。如果b.sodao.com的页面创建的cookie把 它的path属性设置为"/"，把domain属性设置成".sodao.com"，那么所有位于b.sodao.com的网页和所有位于 a.sodao.com的网页，以及位于sodao.com域的其他服务器上的网页都可以访问这个cookie。
path属性
它指定与cookie关联在一起的网页。在默认的情况下cookie会与创建它的网页，该网页处于同一目录下的网页以及与这个网页所在目录下的子目录下的网页关联
secure属性
它是一个布尔值，指定在网络上如何传输cookie，默认是不安全的，通过一个普通的http连接传输；
HttpOnly属性
HttpOnly 属性限制了 cookie 对 HTTP 请求的作用范围。特别的，该属性指示用户代理忽略那些通过"非 HTTP" 方式对 cookie 的访问（比如浏览器暴露给js的接口）。注意 HttpOnly 属性和 Secure 属性相互独立：一个 cookie 既可以是 HttpOnly 的也可以有 Secure 属性。
在前段时间的项目中我就用js去读取一个cookie，结果怎么都取不到这个值，最后查证这个cookie是httpOnly的，花了近2个小时，悲剧了。
cookie的传输
浏览器将cookie信息以name-value对的形式存储于本地，每当请求新文档时，浏览器将发送Cookie，目的是让Server可以通过HTTP请求追踪客户。所以从WEB性能的角度来说我们要尽量的减小cookie，以达到传输性能的最大化。
cookie的编码和解码
由于cookie的名/值中的值不允许包含分号，逗号和空格符，为了最大化用户代理和服务器的兼容性，任何被存储为 cookie 值的数据都应该被编码，例如用我们前端熟知的js全局函数encodeURIComponent编码和decodeURIComponent解码。
cookie作为客户端存储
前面说了每当请求新文档时，浏览器将发送Cookie到服务器，导致WEB性能下降。所以不建议将cookie作为客户端存储一种实现方案，替代方案参见：JavaScript本地存储实践（html5的localStorage和ie的userData）等。
同名的 cookie
同名的 cookie，不同的 domain 或不同的 path，属不同的 cookie；同名的 cookie，相同的 domain 且相同的 path，不同的 expires，属同一个 cookie。
文章来源：搜道UED
二 : cookie 和session 的区别详解
这些都是基础知识，不过有必要做深入了解。［www.61k.com）先简单介绍一下。
二者的定义：
当你在浏览网站的时候，WEB 服务器会先送一小小资料放在你的计算机上，Cookie 会帮你在网站上所打的文字或是一些选择，
都纪录下来。当下次你再光临同一个网站，WEB 服务器会先看看有没有它上次留下的 Cookie 资料，有的话，就会依据 Cookie
里的内容来判断使用者，送出特定的网页内容给你。 Cookie 的使用很普遍，许多有提供个人化服务的网站，都是利用 Cookie
来辨认使用者，以方便送出使用者量身定做的内容，像是 Web 接口的免费 email 网站，都要用到 Cookie。
具体来说cookie机制采用的是在客户端保持状态的方案，而session机制采用的是在服务器端保持状态的方案。
同时我们也看到，由于采用服务器端保持状态的方案在客户端也需要保存一个标识，所以session机制可能需要借助于cookie机制
来达到保存标识的目的，但实际上它还有其他选择。
cookie机制。正统的cookie分发是通过扩展HTTP协议来实现的，服务器通过在HTTP的响应头中加上一行特殊的指示以提示
浏览器按照指示生成相应的cookie。然而纯粹的客户端脚本如JavaScript或者VBScript也可以生成cookie。而cookie的使用
是由浏览器按照一定的原则在后台自动发送给服务器的。浏览器检查所有存储的cookie，如果某个cookie所声明的作用范围
大于等于将要请求的资源所在的位置，则把该cookie附在请求资源的HTTP请求头上发送给服务器。
cookie的内容主要包括：名字，值，过期时间，路径和域。路径与域一起构成cookie的作用范围。若不设置过期时间，则表示这
个cookie的生命期为浏览器会话期间，关闭浏览器窗口，cookie就消失。这种生命期为浏览器会话期的cookie被称为会话cookie。
会话cookie一般不存储在硬盘上而是保存在内存里，当然这种行为并不是规范规定的。若设置了过期时间，浏览器就会把cookie
保存到硬盘上，关闭后再次打开浏览器，这些cookie仍然有效直到超过设定的过期时间。存储在硬盘上的cookie可以在不同的浏
览器进程间共享，比如两个IE窗口。而对于保存在内存里的cookie，不同的浏览器有不同的处理方式
session机制。session机制是一种服务器端的机制，服务器使用一种类似于散列表的结构（也可能就是使用散列表）来保存信息。
当程序需要为某个客户端的请求创建一个session时，服务器首先检查这个客户端的请求里是否已包含了一个session标识
（称为session id），如果已包含则说明以前已经为此客户端创建过session，服务器就按照session id把这个session检索出来
使用（检索不到，会新建一个），如果客户端请求不包含session id，则为此客户端创建一个session并且生成一个与此session相
关联的session id，session id的值应该是一个既不会重复，又不容易被找到规律以仿造的字符串，这个session id将被在本次响应
中返回给客户端保存。保存这个session id的方式可以采用cookie，这样在交互过程中浏览器可以自动的按照规则把这个标识发送给
服务器。一般这个cookie的名字都是类似于SEEESIONID。但cookie可以被人为的禁止，则必须有其他机制以便在cookie被禁止时
仍然能够把session id传递回服务器。
经常被使用的一种技术叫做URL重写，就是把session id直接附加在URL路径的后面。还有一种技术叫做表单隐藏字段。就是服务器
会自动修改表单，添加一个隐藏字段，以便在表单提交时能够把session id传递回服务器。比如：
<form name="testform" action="/xxx">
<input type="hidden" name="jsessionid" value="ByOK3vjFD75aPnrF7C2HmdnV6QZcEbzWoWiBYEnLerjQ99zWpBng!-145788764">
<input type="text">
</form>
实际上这种技术可以简单的用对action应用URL重写来代替。
cookie 和session 的区别：
1、cookie数据存放在客户的浏览器上，session数据放在服务器上。
2、cookie不是很安全，别人可以分析存放在本地的COOKIE并进行COOKIE欺骗
考虑到安全应当使用session。
3、session会在一定时间内保存在服务器上。当访问增多，会比较占用你服务器的性能
考虑到减轻服务器性能方面，应当使用COOKIE。
4、单个cookie保存的数据不能超过4K，很多浏览器都限制一个站点最多保存20个cookie。
5、所以个人建议：
将登陆信息等重要信息存放为SESSION
其他信息如果需要保留，可以放在COOKIE中
三 : 详解 CSS 属性 - :before && :after
现在我们经常在html源码中看到如下的写法：
这里的::after和::before就是我们今天来探讨的css伪元素之二 -:before && :after。[www.61k.com）
伪元素
首先我们要明白什么是伪元素，css设置伪元素是为了方便给某些选择器添加特殊的效果。伪元素的语法格式一般为：
selector:pseudo-element {property:value;}这里的property是指伪元素的属性。此外，css类也可以与伪元素配合使用，格式如下：
selector.class:pseudo-element {property:value;}伪元素就是这样通过赋值给自己属性从而给指定的选择器添加上样式的效果。
:before
如同对伪元素的名称一样，:before是用来给指定的元素的内容前面插入新的内容。举例说明：
.before:before{content:'you before'; color:red;}<div class="before"> me</div>在这里我们给伪元素:before添加了属性content，并赋值为you before。我们来看效果：
//在指定元素的内容me前添加了新内容you before
我们不难发现这里通过伪元素:before添加的新内容区域默认的display属性值为inline，那么我们可不可以修改新内容区域的属性，答案是肯定的。你可以像修改其他元素一样修改它的样式，我们来将它的display属性值来改为block。
.before:before{content:'you before'; display:block; color:red;}<div class="before"> me</div>现在我们再来看下效果：
//由伪元素:before生成新内容区域果然变为了块元素
content 属性
对于伪元素:before和:after而言，属性content是否为必选项呢？我们尝试把content移除。
.before:before{display:block; color:red;}<div class="before"> me</div>
//没有了content属性，新内容自然是为空的
//同时我们查看html源码会发现，:before是没有生效的
那么我们设为空呢？
.before:before{content:''; display:block; color:red;}<div class="before"> me</div>//新内容依然为空
//此时:before生效
所以我们明白，对于伪元素:before和:after而言，属性content是必须设置的，那么在上面的例子，我们知道属性的值可以为字符串，那么还可以为其他形式吗？答案是可以的，它还可以是指向一张图片的URL:
content: url( "img/icon.png" )配合其他伪元素使用
伪元素可以同时使用，这里举经常与:before配合使用的伪元素:hover为例：
.before:hover:before{content:'you before'; color:red;}<div class="before"> me</div>//无内容
//鼠标移至div上时，新内容出现。
这里需要注意两个伪元素使用的顺序，如果改为.before:before:hover是无效的。
:after
伪元素:after与 伪元素:before类型相同，只不过它指定的属性content值为出现在指定元素内容的后面，同样举例说明：
.after:after{content:'after you'; color:#F00;}<div class="after">I </div>
//伪元素:after生成的新内容区域出现在指定元素内容的而后面
:after其他特征与:before一致，可以参考上文，在此就不赘述。
参考
四 : js里面的document.cookie详解
设置cookie
每个cookie都是一个名/值对，可以把下面这样一个字符串赋值给document.cookie：
document.cookie="userId=828";
如果要一次存储多个名/值对，可以使用分号加空格（; ）隔开，例如：
document.cookie="userId=828; userName=hulk";
在cookie的名或值中不能使用分号（;）、逗号（,）、等号（=）以及空格。在cookie的名中做到这点很容易，但要保存的值是不确定的。如何来存储这些值呢？方法是用escape()函数进行编码，它能将一些特殊符号使用十六进制表示，例如空格将会编码为“20%”，从而可以存储于cookie值中，而且使用此种方案还可以避免中文乱码的出现。例如：
document.cookie="str="+escape("I love ajax");
相当于：
document.cookie="str=I%20love%20ajax";
当使用escape()编码后，在取出值以后需要使用unescape()进行解码才能得到原来的cookie值，这在前面已经介绍过。
尽管document.cookie看上去就像一个属性，可以赋不同的值。但它和一般的属性不一样，改变
它的赋值并不意味着丢失原来的值，例如连续执行下面两条语句：
document.cookie="userId=828";
document.cookie="userName=hulk";
这时浏览器将维护两个cookie，分别是userId和userName，因此给document.cookie赋值更像执行类似这样的语句：
document.addCookie("userId=828");
document.addCookie("userName=hulk");
事实上，浏览器就是按照这样的方式来设置cookie的，如果要改变一个cookie的值，只需重新赋值，例如：
document.cookie="userId=929";
这样就将名为userId的cookie值设置为了929。
获取cookie的值
下面介绍如何获取cookie的值。cookie的值可以由document.cookie直接获得：
var strCookie=document.cookie;
这将获得以分号隔开的多个名/值对所组成的字符串，这些名/值对包括了该域名下的所有cookie。例如：
<script language="JavaScript" type="text/javascript">
<!--
document.cookie="userId=828";
document.cookie="userName=hulk";
var strCookie=document.cookie;
alert(strCookie);
//-->
</script>
图7.1显示了输出的cookie值。由此可见，只能够一次获取所有的cookie值，而不能指定cookie名称来获得指定的值，这正是处理cookie值最麻烦的一部分。用户必须自己分析这个字符串，来获取指定的cookie值，例如，要获取userId的值，可以这样实现：
<script language="JavaScript" type="text/javascript">
<!--
//设置两个cookie
document.cookie="userId=828";
document.cookie="userName=hulk";
//获取cookie字符串
var strCookie=document.cookie;
//将多cookie切割为多个名/值对
var arrCookie=strCookie.split("; ");
var userId;
//遍历cookie数组，处理每个cookie对
for(var i=0;i<arrCookie.length;i++){
var arr=arrCookie[i].split("=");
//找到名称为userId的cookie，并返回它的值
if("userId"==arr[0]){
userId=arr[1];
break;
}
}
alert(userId);
//-->
</script>
这样就得到了单个cookie的值用类似的方法，可以获取一个或多个cookie的值，其主要的技巧仍然是字符串和数组的相关操作。
给cookie设置终止日期
到现在为止，所有的cookie都是单会话cookie，即浏览器关闭后这些cookie将会丢失，事实上这些cookie仅仅是存储在内存中，而没有建立相应的硬盘文件。
在实际开发中，cookie常常需要长期保存，例如保存用户登录的状态。这可以用下面的选项来实现：
document.cookie="userId=828; expires=GMT_String";
其中GMT_String是以GMT格式表示的时间字符串，这条语句就是将userId这个cookie设置为GMT_String表示的过期时间，超过这个时间，cookie将消失，不可访问。例如：如果要将cookie设置为10天后过期，可以这样实现：
<script language="JavaScript" type="text/javascript">
<!--
//获取当前时间
var date=new Date();
var expireDays=10;
//将date设置为10天以后的时间
date.setTime(date.getTime()+expireDays*24*3600*1000);
//将userId和userName两个cookie设置为10天后过期
document.cookie="userId=828; userName=hulk; expire="+date.toGMTString();
//-->
</script>
删除cookie
为了删除一个cookie，可以将其过期时间设定为一个过去的时间，例如：
<script language="JavaScript" type="text/javascript">
<!--
//获取当前时间
var date=new Date();
//将date设置为过去的时间
date.setTime(date.getTime()-10000);
//将userId这个cookie删除
document.cookie="userId=828; expire="+date.toGMTString();
//-->
</script>
指定可访问cookie的路径
默认情况下，如果在某个页面创建了一个cookie，那么该页面所在目录中的其他页面也可以访问该cookie。如果这个目录下还有子目录，则在子目录中也可以访问。例如在
www.xxxx.com/html/a.html中所创建的cookie，可以被www.xxxx.com/html/b.html或
www.xxx.com/ html/ some/c.html所访问，但不能被www.xxxx.com/d.html访问。
为了控制cookie可以访问的目录，需要使用path参数设置cookie，语法如下：
document.cookie="name=value; path=cookieDir";
其中cookieDir表示可访问cookie的目录。例如：
document.cookie="userId=320; path=/shop";
就表示当前cookie仅能在shop目录下使用。
如果要使cookie在整个网站下可用，可以将cookie_dir指定为根目录，例如：
document.cookie="userId=320; path=/";
61阅读请您转载分享：
指定可访问cookie的主机名
和路径类似，主机名是指同一个域下的不同主机，例如：www.google.com和gmail.google.com就是两个不同的主机名。默认情况下，一个主机中创建的cookie在另一个主机下是不能被访问的，但可以通过domain参数来实现对其的控制，其语法格式为：
document.cookie="name=value; domain=cookieDomain";
以google为例，要实现跨主机访问，可以写为：
document.cookie="name=value;domain=.google.com";
这样，所有google.com下的主机都可以访问该cookie。
综合示例：构造通用的cookie处理函数
cookie的处理过程比较复杂，并具有一定的相似性。因此可以定义几个函数来完成cookie的通用操作，从而实现代码的复用。下面列出了常用的cookie操作及其函数实现。
1．添加一个cookie：addCookie(name,value,expireHours)
该函数接收3个参数：cookie名称，cookie值，以及在多少小时后过期。这里约定expireHours为
0时不设定过期时间，即当浏览器关闭时cookie自动消失。该函数实现如下：
<script language="JavaScript" type="text/javascript">
<!--
function addCookie(name,value,expireHours){
var cookieString=name+"="+escape(value);
//判断是否设置过期时间
if(expireHours>0){
var date=new Date();
date.setTime(date.getTime+expireHours*3600*1000);
cookieString=cookieString+"; expire="+date.toGMTString();
}
document.cookie=cookieString;
}
//-->
</script>
2．获取指定名称的cookie值：getCookie(name)
该函数返回名称为name的cookie值，如果不存在则返回空，其实现如下：
<script language="JavaScript" type="text/javascript">
<!--
function getCookie(name){
var strCookie=document.cookie;
var arrCookie=strCookie.split("; ");
for(var i=0;i<arrCookie.length;i++){
var arr=arrCookie[i].split("=");
if(arr[0]==name)return arr[1];
}
return "";
}
//-->
</script>
3．删除指定名称的cookie：deleteCookie(name)
该函数可以删除指定名称的cookie，其实现如下：
<script language="JavaScript" type="text/javascript">
<!--
function deleteCookie(name){
var date=new Date();
date.setTime(date.getTime()-10000);
document.cookie=name+"=v; expire="+date.toGMTString();
}
//-->
</script>
61阅读请您转载分享：
五 : validaterequest属性解析
这个属性是用来验证客户端用户的输入的,用来验证用户的输入中是否有危险字符的,这个属性的默认值为true,微软之所以这么做是为了提高ASP.NET程序的安全性，所以很多程序员即使不知道怎么来防御黑客的攻击,ASP.NET的一些默认属性等内容已经对安全进行了控制,这也是为什么ASP.NET的程序相对来说比较安全的原因!
既然这个属性的默认值为true,而且ASP.NET页面的回发又很频繁,那么如果没有用户的交互的地方,这样ASP.NET 岂不是每次都要去严整呢,这样也是有可能会来回的损耗系统的执行时间的,至于:如果没有客户端的交互的话,到底ASP.NET会不会去验证这是微软的工程师的问题了,对于我们来说,如果没有客户端交互的地方,我感觉是应该将此属性设置为 false的,这样的话无论 微软的工程师怎样设计,对我们程序的本身是没有任何影响的!
但是当需要跟用户交互的地方,我们就要用它的默认值了,可是事情可能并没有我们想象的那么简单,也没有那么完美,当用户在使用一些html编辑器的时候,自己本身提交的字符里就有等这样的字符,这样就要求程序员必须要关闭validaterequest属性,这个时候我们又该怎样的来控制ASP.NET页面的安全性能呢?
当然了,这个地方我们可以来对一切危险字符进行过滤,这样可能提高一些安全性,但是我们防止用户的输入可能考虑的会有遗漏,这样就导致了安全还会是有问题的,我们可以反过来考虑我们到底需要提交多少特殊字符,然后对我们提交的特殊字符进行转义或替换,这样我们就又可以将 validaterequest属性设置为true了,这样既解决了程序的安全问题又满足了我们的需求!
有时候在与用户进行交互的时候,用户难免的会有输入特殊字符的时候,因为我们设置的validaterequest 的值为true所以页面会不给任何提示的前提下， 直接输出一大页的错误信息，这样可能就导致了用户的误解,他们可能认为是我们网站出了问题,用户不可能会想到他输入了非法的字符!
对于这种情况我们又该怎么办呢?
幸好微软的工程师们在page里又给出了一个Page_Error的处理事件,这样我们就可以用它来进行异常的捕获了
代码如下:
protected void Page_Error(object sender, EventArgs e)
{
Exception ex = Server.GetLastError();
if (ex is HttpRequestValidationException)
{
Response.Write("您¨2输o?入¨?的ì?字á?符¤?中D有?D非¤?法¤?§字á?符¤?!"); Server.ClearError();
}
}
本文标题：cookie的属性详解-前端开发中Cookie那些事儿：cookie属性详解61阅读| 精彩专题| 最新文章| 热门文章| 苏ICP备13036349号-1