cookie、localStorage、sessionStorage的有效期和作用域

cookie，localStorage，sessionStorage都可以实现客户端存储

cookie，localStorage，sessionStorage三者的区别分别为：

1、cookie：

cookie作为最早期的被设计web浏览器存储少量数据，从底层看，它是作为http协议的一种扩展实现。cookie数据会自动在web浏览器和web服务器之间传输数据。

1-1、cookie有效期：

cookie默认有效期非常短暂，存在于web浏览器会话期间，当浏览器关闭，cookie也就消失了。如果要延长cookie的有效期，可以设置max-age属性（单位秒）

1-2、cookie作用域：

cookie作用域是通过domain文档源和path文档路径来确定的。默认情况下，cookie和创建它的web页面有关，并对web页面和该web页面同目录或者子目录的其他web页面可见。当设置path="/"，它的作用域就变成文档源级别的了。

1-3、cookie的用法,

使用cookie的时候我们需要先设置cookie：

function setCookie(name, value) {

var Days = 30;//cookie的存储时间为30天

var exp = new Date();

exp.setTime(exp.getTime() + Days * 24 * 60 * 60 * 1000);

document.cookie = name + "=" + escape(value) + ";expires=" + exp.toGMTString();

}

setCookie("性别", "男"); //存储name为性别,value为男的cookie

如果使用则需要获取cookie：

function getCookie(name) {

var arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");

if(arr = document.cookie.match(reg))

return unescape(arr[2]);

else

return null;

}

var a=getCookie("性别");//获取名为性别的cookie

console.log(a);

删除cookie：

function delCookie(name) {

var exp = new Date();

exp.setTime(exp.getTime() - 1);

var cval = getCookie(name);//在删除cookie之前我们需要先获取cookie

if(cval != null)

document.cookie = name + "=" + cval + ";expires=" + exp.toGMTString();

}

delCookie("性别");//删除名为性别的cookie

1-4、cookie的优点：具有极高的扩展性和可用性

1-4-1、通过良好的编程，控制保存在cookie中的session对象的大小；

1-4-2、通过加密和安全传输技术，减少cookie被破解的可能性；

1-4-3、只有在cookie中存放不敏感的数据，即使被盗取也不会有很大的损失；

1-4-4、控制cookie的生命周期，使之不会永远有效，这样的话偷盗者很可能拿到的就是一个过期的cookie；

1-5、cookie的缺点：

1-5-1、cookie的长度和数量限制，每个domain最多只能有20条cookie，每个cookie的长度不能超过4KB，否则会被截掉；

1-5-2、安全性问题，如果cookie被人拦掉了，那个人就可以获取到所有的session信息，加密的话也不能起到相对的作用；

1-5-3、有些状态不可能保存在客户端，例如：为了防止重复提交表单，我们需要在服务器端保存一个计数器，如若吧计数器保存在客户端，则起不到什么作用；

2、localStorage, sessionStorage

localStorage, sessionStorage是html5中新增的web存储的功能，它解决了客户端存储的一些缺点，并提供更强大的功能和操作API。（sessionStorage、localStorage 在存储对象时只会得到字符串类型的值，无法得到期望的值）

2-1、localStorage有效期：

永不失效，除非web应用主动删除。

2-2、localStorage作用域：

localStorage的作用域是限定在文档源级别的。文档源通过协议、主机名以及端口三者来确定。

2-3、sessionStorage有效期：

sessionStorage的有效期是和存储数据脚本所在的最顶层的窗口或者是浏览器标签是一样的，一旦窗口或者标签页被永久关闭了，存储的数据也就失效了。

2-4、sessionStorage作用域：

sessionStorage的作用域也是限定在文档源级别。但需要注意的是，如果相同文档源的页面渲染在不同的标签中，sessionStorage的数据是无法共享的。

2-5、localStorage与sessionStorage的用法：

两者都有大约5M的存储空间,并且使用频率比较高,两者的最主要的区别就是存储期限,localStorage存储的数据为持久数据,而sessionStorage当你关闭浏览器的时候数据就没了

2-5-1、localstorage的用法：

if(window.localStorage){ //兼容

//alert("浏览器支持");

var local=window.localStorage;

local.setItem('name','wu');

local.name2='Mr.Wu';

local.setItem('name2','Mr.Wu');//修改(再存储一遍);

localStorage.removeItem("name");//清除

localStorage.clear();//全部清除

}

2-5-2、sessionStorage的用法：

if(window.sessionStorage){

//alert("浏览器支持");

var session=window.sessionStorage;

session.setItem('name','wu');//设置存储

session.name2='Mr.Wu';//设置存储

session.setItem('name','Mr.WuGe');//修改(再存储一遍);

sessionStorage.removeItem("name");

sessionStorage.clear(); 

}

除了上述列举的，cookie和localStorage、sessionStorage在存储大小的限制也不一样， 由于每个浏览器的实现标准都不一样，只说一下RFC 2965推荐标准（浏览器保存cookie不超过300个，为每个服务器保存的cookie不超过20个，每个cookie大小不超过4KB）。localStorage、sessionStorage设置值时可以达到8M.