Web Storage
Web Storage API 提供了存储机制，通过该机制，浏览器可以安全地存储键值对，比使用 cookie 更加直观。
Web Storage 存储的值都是字符串类型（在处理 json 数据时，需要借助 JSON 类（JSON.parse() & JSON.stringify()）实现字符串与 json 转换）。
Window.sessionStorage
sessionStorage 属性允许访问一个 session Storage 对象。存储在 sessionStorage 里面的数据在页面会话结束时会被清除。页面会话在浏览器打开期间一直保持，并且重新加载或恢复页面仍会保持原来的页面会话。在新标签或窗口打开一个页面会初始化一个新的会话，这点和 session cookies 的运行方式不同。
应该注意的是，无论是 localStorage 还是 sessionStorage 中保存的数据都仅限于该页面的协议。
// 保存数据到sessionStorage
sessionStorage.setItem('key', 'value');
// 从sessionStorage获取数据
var data = sessionStorage.getItem('key');
// 从sessionStorage删除保存的数据
sessionStorage.removeItem('key');
// 从sessionStorage删除所有保存的数据
sessionStorage.clear();
/* 返回一个Storage对象 */Window.localStorage
只读的 localStorage 允许你访问一个Document 的远端（origin）对象 Storage；数据存储为跨浏览器会话。 localStorage 里面存储的数据没有过期时间设置。
语法同 sessionStorage
通过 StorageEvent 响应存储的变化
无论何时，Storage 对象发生变化时（即创建 / 更新 / 删除数据项时，重复设置相同的键值不会触发该事件，Storage.clear() 方法至多触发一次该事件），StorageEvent 事件会触发。在同一个页面内发生的改变不会起作用——在相同域名下的其他页面（如一个新标签或 iframe）发生的改变才会起作用。在其他域名下的页面不能访问相同的 Storage 对象。
window.addEventListener('storage', function(e) {
document.querySelector('.my-key').textContent = e.key;
document.querySelector('.my-old').textContent = e.oldValue;
document.querySelector('.my-new').textContent = e.newValue;
document.querySelector('.my-url').textContent = e.url;
document.querySelector('.my-storage').textContent = e.storageArea;
});上例为 window 对象添加了一个事件监听器，在当前域名相关的 Storage 对象发生改变时该事件监听器会触发。正如你在上面看到的，此事件相关的事件对象有多个属性包含了有用的信息——改变的数据项的键，改变前的旧值，改变后的新值，改变的存储对象所在的文档的 URL，以及存储对象本身。
Cookie
定义：
Cookie 就是浏览器储存在用户电脑上的一小段文本文件
Cookie 是纯文本格式，不包含任何可执行的代码
Cookie 由键值对构成，由分号和空格隔开
Cookie 虽然是存储在浏览器，但是 通常由服务器端进行设置
Cookie 的大小限制在 4kb 左右（4096字节）
属性
expires/max-age控制 Cookie 失效时刻的选项。如果没有设置这两个选项，则默认有效期为 session，即会话 Cookie。这种 Cookie 在浏览器关闭后就没有了。
expires 是 http/1.0 协议中的选项，必须是 GMT 格式 的时间（可以通过
new Date().toGMTString()或者new Date().toUTCString()来获得）在新的 http/1.1 协议中 expires 已经由 max-age 选项代替。如果同时设置了 max-age 和 expires，以 max-age 的时间为准。
如果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文件或者内存中删除。
Cookie对象的Expires属性设置为MinValue表示永不过期。
注意：从客户端读取Cookie时，包括maxAge在内的其他属性都是不可读的，也不会被提交。浏览器提交Cookie时只会提交name与value属性。maxAge属性只被浏览器用来判断Cookie是否过期。
domain和pathname、domain和path可以标识一个唯一的 Cookie。domain和path两个选项共同决定了 Cookie 何时被浏览器自动添加到请求头部中发送出去。domain的默认值为设置该 Cookie 的网页所在的域名，path默认值为设置该 Cookie 的网页所在的目录。path设置为“/”时允许所有路径使用Cookie。path属性需要使用符号“/”结尾。注意：修改、删除Cookie时，新建的Cookie除
value、maxAge之外的所有属性，例如name、path、domain等，都要与原Cookie完全一样。否则，浏览器将视为两个不同的Cookie不予覆盖，导致修改、删除失败。浏览器判断一个网站是否能操作另一个网站 Cookie 的依据是 域名。
secure属性
当设置为 true 时，表示创建的 Cookie 会被以安全的形式向服务器传输，也就是只能在 HTTPS 连接中被浏览器传递到服务器端进行会话验证，如果是 HTTP 连接则不会传递该信息，所以不会被窃取到Cookie 的具体内容。默认为 false，通过一个普通的HTTP连接传输。
目的：防止信息在传递的过程中被监听捕获后信息泄漏。
secure属性并不能对Cookie内容加密，因而不能保证绝对的安全性。如果需要高安全性，需要在程序中对Cookie内容加密、解密，以防泄密。
HttpOnly属性
如果在Cookie中设置了”HttpOnly”属性，那么通过程序（JS脚本、Applet等）将无法读取到Cookie信息，（不能通过document.cookie获取。）这样能有效的防止XSS攻击。默认情况下，cookie不会带 HttpOnly 选项（即为空）。
目的：防止程序获取cookie后进行攻击（XSS）。
在客户端是不能通过 js 代码去设置一个HttpOnly 类型的cookie的，这种类型的cookie只能通过服务端来设置。
注意：HttpOnly 属性和 Secure 属性相互独立：一个 cookie 既可以是 HttpOnly 的也可以有 Secure 属性。
创建和存储cookie
// 函数中的参数分别为 cookie 的名称、值以及过期天数
function setCookie( c_name, value, expiresday){
var exdate = new Date();
exdate.setDate( exdate.getDate() + expiresday );
document.cookie = c_name + "=" + escape(value) +
(( expiredays == null ) ? "" : ";expires=" + exdate.toGMTString());
}
setCookie('name','hhh',1); // cookie过期时间为1天。
// 如果要设置过期时间以秒为单位
function setCookie(c_name,value,expiressecond){
var exdate=new Date();
exdate.setTime(exdate.getTime()+expiressecond * 1000);
document.cookie = c_name + "=" + escape(value) +
(( expireseconds== null ) ? "" : ";expires=" + exdate.toGMTString());
}
setCookie('name','hhh',3600); //cookie过期时间为一个小时- 读取cookie值
// 函数中的参数为 要获取的cookie键的名称。
function getCookie(c_name){
if (document.cookie.length>0){
c_start=document.cookie.indexOf(c_name + "=");
if (c_start!=-1){
c_start = c_start + c_name.length+1;
c_end=document.cookie.indexOf(";",c_start);
if (c_end==-1){
c_end=document.cookie.length;
}
return unescape(document.cookie.substring(c_start,c_end));
}
}
return "";
}
var username= getCookie('name');
console.log(username);- 判断cookie是否存在
// 函数中的参数为，要判断的cookie名称
function checkCookie(c_name){
username=getCookie(c_name);
if (username!=null && username!=""){
// 如果cookie值存在，执行下面的操作。
alert('Welcome again '+username+'!');
}else{
username=prompt('Please enter your name:',"");
if (username!=null && username!=""){
//如果cookie不存在，执行下面的操作。
setCookie('username',username,365)
}
}
}- 删除cookie
function removeCookie(key) {
setCookie(key, '', -1);//这里只需要把Cookie保质期退回一天便可以删除
}Cookie满足同源策略
网站 images.google.com 与 www.google.com 域名不一样，二者同样不能互相操作彼此的Cookie。
访问完 zhidao.baidu.com 再访问 wenku.baidu.com 还需要重新登陆百度账号
解决办法：设置
document.domain = ‘baidu.com’;//跨子域
Session
Session是指一个终端用户与交互系统进行通信的时间间隔，通常指从注册进入系统到注销退出系统之间所经过的时间。
Session保存在服务器上。客户端浏览器访问服务器的时候，服务器把客户端信息以某种形式记录在服务器上。客户端浏览器再次访问时只需要从该Session中查找该客户的状态就可以了。
- 为了获得更高的存取速度，服务器一般把Session放在内存里。每个用户都会有一个独立的Session。如果Session内容过于复杂，当大量客户访问服务器时可能会导致内存溢出。因此，Session里的信息应该尽量精简。
当多个客户端执行程序时，服务器会保存多个客户端的Session。Session机制决定了当前客户只会获取到自己的Session，而不会获取到别人的Session。各客户的Session也彼此独立，互不可见。
Session的使用比Cookie方便，但是过多的Session存储在服务器内存中，会对服务器造成压力。
- 为防止内存溢出，服务器会把长时间内没有活跃的Session从内存删除。这个时间就是Session的超时时间。如果超过了超时时间没访问过服务器，Session就自动失效了。
Session在用户第一次访问服务器的时候自动创建。需要注意只有访问JSP、Servlet等程序时才会创建Session，只访问HTML、IMAGE等静态资源并不会创建Session。
Session保存在服务器，对客户端是透明的，但它的正常运行仍然需要客户端浏览器的支持。这是因为 Session 使用 Cookie 作为识别标志。
HTTP协议是无状态的，Session不能依据HTTP连接来判断是否为同一客户，因此服务器向客户端浏览器发送一个名为
SESSIONID的Cookie，它的值为该Session的id（也就是HttpSession.getId()的返回值）。Session依据该Cookie来识别是否为同一用户。该Cookie为服务器自动生成的，它的maxAge属性一般为–1，表示仅当前浏览器内有效，并且各浏览器窗口间不共享，关闭浏览器就会失效。
因此同一机器的两个浏览器窗口访问服务器时，会生成两个不同的Session。但是由浏览器窗口内的链接、脚本等打开的新窗口（也就是说不是双击桌面浏览器图标等打开的窗口）除外，这类子窗口会共享父窗口的Cookie，因此会共享一个Session。
URL地址重写
URL地址重写是对客户端不支持Cookie的解决方案。URL地址重写的原理是将该用户Session的id信息重写到URL地址中。服务器能够解析重写后的URL获取Session的id。这样即使客户端不支持Cookie，也可以使用Session来记录用户状态。
Cache
Cache用于在Http请求期间保存页面或者数据，存储于服务器的内存中，允许您自定义如何缓存项以及将它们缓存多长时间。
Cache允许将频繁访问的服务器资源存储在内存中，当用户发出相同的请求后，服务器不是再次处理而是将Cache中保存的数据直接返回给用户。不发生服务器-客户端数据传输。
当缺乏系统内存时，缓存会自动移除很少使用的或优先级较低的项以释放内存。该技术也称为清理，这是缓存确保过期数据不使用宝贵的服务器资源的方式之一。
Cache节省的是服务器处理时间。
Cache实例是每一个应用程序专有的，其生命周期==该应用程序周期。应用程序重启将重新创建其实例。
Cache不与会话相关，所以它是多会话共享的，因此使用它可以提高网站性能，但是可能泄露用户的安全信息，还由于在服务器缺乏内存时可能会自动移除，Cache因此需要在每次获取数据时检测该Cache项是否还存在。
Cache["ID"]="cc"; //或者Cache.Insert("ID","test");
String ID =Cache["ID"].ToString();几种存储方式的区别
通常使用最频繁的是Session。
Session缓存和Cache缓存的区别：
最大的区别是Cache提供缓存依赖来更新数据，而Session只能依靠定义的缓存时间来判断缓存数据是否有效。
即使应用程序终止，只要Cache.Add方法中定义的缓存时间未过期，下次开启应用程序时，缓存的数据依然存在。而Session缓存只是存在于一次会话中，会话结束后，数据也就失效了。
Session容易丢失，导致数据的不确定性，而Cache不会出现这种情况。
由于Session是每次会话就被加载，所以不适宜存放大量信息，否则会导致服务器的性能降低。而Cache则主要用来保存大容量信息，如数据库中的多个表。
用户停止使用应用程序之后，Session信息仍在内存中存留一段时间
Session 和 Cookie的区别：
cookie数据存放在客户的浏览器上，session数据放在服务器上。
session会在一定时间内保存在服务器上。当访问增多，会比较占用你服务器的性能。考虑到减轻服务器性能方面，应当使用COOKIE。
sessionStorage是当前对话的缓存，浏览器窗口关闭即消失，localStorage持久存在，除非清除浏览器缓存。
cookie在浏览器与服务器之间来回传递；sessionStorage和localStorage不会把数据发给服务器，仅在本地保存。
cookie数据还有路径的概念，可以限制cookie只属于某个路径下。
| 特性 | Cookie | localStorage | sessionStorage | session |
|---|---|---|---|---|
| 数据有效期 | 一般由服务器生成，可设置失效时间。如果在浏览器生成，默认是关闭浏览器之后失效 | 除非被清除，否则永久保存 | 仅在当前会话有效，关闭页面或浏览器后被清除 | 服务器会把长时间没有活动的Session从服务器内存中清除，此时Session便失效。Tomcat中Session的默认失效时间为20分钟。 |
| 存储数据大小 | 4KB | 一般 5MB | 一般 5MB | 20条Cookie |
| 作用域 | 在所有同源窗口共享 | 在所有同源窗口共享 | 不在不同的浏览器窗口中共享 | 20条Cookie |
2429
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
