cookie:存储在用户本地中端上的数据

某些网站为了辨别用户身份、进行 session 跟踪而储存在用户本地终端上的数据(通常经过加密)。

Cookie 在计算机中是个存储在浏览器目录中的文本文件,当浏览器运行时,存储在 RAM 中发挥作用 (此种 Cookies 称作 Session Cookies),一旦用户从该网站或服务器退出,Cookie 可存储在用户本地的硬盘上 (此种 Cookies 称作 Persistent Cookies)。


在同一个页面中设置 Cookie,实际上是按从后往前的顺序进行的。如果 要先删除一个 Cookie,再写入一个 Cookie,则必须先写写入语句,再写删除语句,否则会出现错误 。


Cookie是面向路径的。 缺省路径 (path) 属性时,Web 服务器页会自动传递当前路径给浏览器,指定路径强制服务器使用设置的路径 。在一个目录页面里设置的 Cookie 在另一个目录的页面里是看不到的 。


Cookie 必须在 HTML 文件的内容输出之前设置;不同的浏览器 (Netscape Navigator、Internet Explorer) 对 Cookie 的处理不一致,使用时一定要考虑;客户端用户如果设置禁止 Cookie,则 Cookie 不能建立。 并且在客户端,一个浏览器能创建的 Cookie 数量最多为 300 个,并且每个不能超过 4KB,每个 Web 站点能设置的 Cookie 总数不能超过 20 个。


读取cookie:
var strcookie = document.cookie; //获取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 "";
删除cookie:

设置expires为过期时间。

document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT";
cookie的属性值:


  • name:名称。
  • value:值。
  • domain:可以访问此cookie的域名。值是域名,比如www.china.com。这是对path路径属性的一个延伸。如果我们想让 www.china.com能够访问bbs.china.com设置的cookies,该怎么办? 我们可以把domain属性设置成“china.com”,并把path属性设置成“/”。
  • path:可访问次cookie的页面路径。
  • expires/max-age:cookie的超过时间,不设置默认为session。
  • size:cookie大小。
  • http:cookie的httpOnly属性,为true时js不可访问cookie,解决XSS。
  • secure:设置是否只能通过https来访问cookie。


cookie的不可跨域性:

Cookie具有不可跨域名性。根据Cookie规范,浏览器访问Google只会携带Google的Cookie,而不会携带Baidu的Cookie。Google也只能操作Google的Cookie,而不能操作Baidu的Cookie。

Cookie在客户端是由浏览器来管理的。浏览器能够保证Google只会操作Google的Cookie而不会操作Baidu的Cookie,从而保证用户的隐私安全。浏览器判断一个网站是否能操作另一个网站Cookie的依据是域名。Google与Baidu的域名不一样,因此Google不能操作Baidu的Cookie。


与携带cookie有关的头:

设置 withCredentials: true ,发送Ajax时,Request header中便会带上 Cookie 信息。服务器端通过在响应 header 中设置 Access-Control-Allow-Credentials = true 来运行客户端携带证书式访问。服务器端 Access-Control-Allow-Credentials = true时,参数Access-Control-Allow-Origin 的值不能为 '*'

session对象:


Session中文是“会话”的意思,在ASP中代表了 服务器与客户端之间的“会话” 。Session的作用时间从用户到达某个特定的Web页开始,到该用户离开Web站点,或在程序中利用代码终止某个Session结束。 引用Session 则可以让一个用户访问多个页面之间的切换也会保留该用户的信息 。


系统为每个访问者都设立一个独立的Session对象,用以存储Session变量,并且各个访问者的Session对象互不干扰。


SessionCookie是紧密相关的。 Session的使用要求用户浏览器必须支持Cookie,如果浏览器不支持使用Cookie,或者设置为禁用Cookie,那么将不能使用Session。


Session信息对客户来说, 不同的用户用不同的Session信息来记录 。当用户启用Session时,ASP自动产生一个SessionID.在新会话开始时,服务器将SessionID当做 cookie 存储在用户的浏览器中。


ASP(动态服务器页面):

ASP即Active Server Pages,是MicroSoft公司开发的服务器端脚本环境,可用来创建动态交互式网页并建立强大的web应用程序。当服务器收到对ASP文件的请求时,它会处理包含在用于构建发送给浏览器的HTML(Hyper Text Markup Language,超文本置标语言)网页文件中的服务器端脚本代码。除服务器端脚本代码外,ASP文件也可以包含文本、HTML(包括相关的客户端脚本)和com组件调用。




HTML5 提供了两种在客户端存储数据的新方法:localStorage,sessionStorage

localStorage:除非清除,否则永久保存。

sessionStorage:仅存在于当前会话。

两者的设置等方法是相同的:将sessionStorage改为localStorage即是localStorage的方法。

设置:sessionStorage.setItem('name'); / sessionStorage.name = 'Bob',

访问:sessionStorage.getItem('name');

删除:sessionStorage.removeItem('name');



三者的区别:

特性

cookie

localStorage

sessionStorage

数据生命期

服务器生成,可设置失效时间;若在浏览器端生成,则默认关闭页面后失效

除非清除,否则永久保存

仅存在于当前会话

存放数据大小

4K左右

一般为5MB

一般为5MB

易用性

需自己封装,源生接口不友好

源生接口可接受,亦可封装

源生接口可接受,亦可封装

与服务器端通信

每次携带在http头中,若保存过多数据性能不好

仅在客户端保存,不参与和服务器端的通信

仅在客户端保存,不参与和服务器端的通信

同源共享





作用域不同,sessionStorage不在不同的浏览器窗口中共享,即使是同一个页面;localStorage 在所有同源窗口中都是共享的;cookie也是在所有同源窗口中都是共享的。Web Storage 支持事件通知机制,可以将数据更新的通知发送给监听者。Web Storage 的 api 接口使用更方便。