cookie，localStorage，sessionStorage的概念，使用及区别

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对象互不干扰。

Session与Cookie是紧密相关的。 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 接口使用更方便。