cookie、sessionStorage和localStorage
对比
- | cookie | sessionStorage | localStorage |
---|---|---|---|
生命周期 | 不设置时长,持续到浏览器关闭,设置时长,时长范围内有效 | 浏览器关闭 | 一直存在,直到删除或清除缓存 |
大小 | 4KB | 5MB | 5MB |
范围 | 所有同源窗口 | 建立时的浏览器窗口 | 所有同源窗口 |
与服务器通信 | http头中,每次请求都会传送到服务器 | 仅在客户端 | 仅在客户端 |
cookie和session都是用来跟踪浏览器用户身份的会话方式。
cookie
- cookie的内容主要包括:名字、值、过期时间、路径和域,路径与域一起构成cookie的作用范围。
- 若不设置过期时间,cookie一般不存储在硬盘而是保存在内存里,这个cookie的生命期为浏览器会话期间,关闭浏览器窗口,cookie就会消失,也被称为会话cookie。
- 若设置了过期时间,浏览器就会把cookie保存到硬盘上,关闭后再打开浏览器这些cookie仍然有效直到超过设定的过期时间。
session
- 当服务器收到请求需要创建session对象时,首先会检查客户端请求中是否包含sessionid。
- 如果有sessionid,服务器将根据该id返回对应session对象。
- 如果客户端请求中没有sessionid,服务器会创建新的session对象,并把sessionid在本次响应中返回给客户端。
通常使用cookie方式存储sessionid到客户端,在交互中浏览器按照规则将sessionid发送给服务器。
如果用户禁用cookie,则要使用URL重写,可以通过response.encodeURL(url)进行实现;API对encodeURL的结束为,当浏览器支持Cookie时,url不做任何处理;当浏览器不支持Cookie的时候,将会重写URL将SessionID拼接到访问地址后
WebStorage分为两种:
sessionStorage:
- 将数据保存在session对象中。所谓session,是指用户在浏览某个网站时,从进入网站到浏览器关闭所经过的这段时间,也就是用户浏览这个网站所花费的时间。session对象可以用来保存在这段时间内所要求保存的任何数据。
localStorage:
- 将数据保存在客户端本地的硬件设备(通常指硬盘,也可以是其他硬件设备)中,即使浏览器被关闭了,该数据仍然存在,下次打开浏览器访问网站时仍然可以继续使用。
cookie
设置cookie
function setCookie(cname,cvalue,exdays)
{
var d = new Date();
d.setTime(d.getTime()+(exdays*24*60*60*1000));
var expires = "expires="+d.toGMTString();
document.cookie = cname + "=" + cvalue + "; " + expires;
}
读取cookie值
function getCookie(cname)
{
var name = cname + "=";
var ca = document.cookie.split(';');
for(var i=0; i<ca.length; i++)
{
var c = ca[i].trim();
if (c.indexOf(name)==0)
return c.substring(name.length,c.length);
}
return "";
}
测试cookie
function testCookie()
{
var user=getCookie("username");
if (user!="")
{
alert("Welcome again " + user);
}
else
{
user = prompt("Please enter your name:","");
if (user!="" && user!=null)
{
setCookie("username",user,365);
}
}
}
sessionStorage
设置sessionStorage值
sessionStorage.setItem("key", "value");
读取sessionStorage值
sessionStorage.getItem("key");
删除sessionStorage值
sessionStorage.removeItem("key");
清除sessionStorage所有的值
sessionStorage.clear();
localStorage
设置localStorage值
localStorage.setItem("key", "value");
读取localStorage值
localStorage.getItem("key");
删除localStorage值
localStorage.removeItem("key");
清除localStorage所有的值
localStorage.clear();
引用
资料参考
cookie、sessionStorage和localStorage的区别
cookies、session、sessionStorage和localStorage解释及区别