作者:leee | 来源:互联网 | 2023-09-08 16:14
互联网早期浏览器是没有状态维护,这个就导致一个问题就是服务器不知道浏览器的状态,无法判断是否是同一个浏览器。这样用户登录、购物车功能都无法实现,LouMontulli在1994年引入到web中最终纳
互联网早期浏览器是没有状态维护,这个就导致一个问题就是服务器不知道浏览器的状态,无法判断是否是同一个浏览器。这样用户登录、购物车功能都无法实现,Lou Montulli在1994年引入到web中最终纳入W3C规范 RFC6265中。
区别
COOKIE在浏览器请求中每次都会附加请求头中发送给服务器。大小不能超过4k
localStorage保存数据会一直保存没有过期时间,不会随浏览器发送给服务器。大小5M或更大
sessionStorage仅当前页面有效一旦关闭就会被释放。也不会随浏览器发送给服务器。大小5M或更大
COOKIE
浏览器在本地按照一定规则存储一些文本字符串,每当浏览器像服务器发送请求时带这些字符串。服务器根据字符串判定浏览器的状态比如:登录、订单、皮肤。服务器就可以根据不同的COOKIE识别出不同的用户信息。浏览器和服务器COOKIE交互图如下。
COOKIE如何产生
1、在浏览器访问服务器时由服务器返回一个Set-COOKIE响应头,当浏览器解析这个响应头时设置COOKIE
2、通过浏览器js脚本设置 document.COOKIE = 'name=monsterooo';
浏览器访问服务器携带COOKIE过程
js设置COOKIE详解
服务器设置COOKIE这里不过多介绍了同客户端js设置类似,重点来看一下js如何设置COOKIE和一些细节。
在js中设置COOKIE完整格式是:document.COOKIE="key=value[; expires=date][; domain=domain][; path=path][; secure]"
key=value
key设置的是COOKIE的键,value设置的是COOKIE的值。示例如下:
document.COOKIE = "name=monsterooo";
expires
设置COOKIE的生存时间,默认为当然浏览器会话(Session)。当设置一个时间时,每次访问浏览器会用当前时间和COOKIE的expries做比对,如果过期COOKIE则会被删除。设置格式为GMT时间格式。示例如下:
var t = new Date( +(new Date()) + 1000 * 120 );
document.COOKIE = `name=monsterooo;expires=${t.toGMTString()};`;
domain
在浏览器读取COOKIE的时候只有当COOKIE的domain和浏览器当然的域名匹配才能读取到。默认情况下COOKIE的domain和当然访问一样。但是很多网址不止有一个域名比如:a.example.com和b.example.com如果他们想要共享COOKIE那么COOKIE的domain需要设置为domain=.example.com,path路径需要设置为path=/。这样之后两个域名都能同时访问到COOKIE了。
var t = new Date( +(new Date()) + 1000 * 120 );
document.COOKIE = `name=monsterooo;expires=${t.toLocaleTimeString()}; domain=.example.com; path=/`;
path
path路径和domain功能类似,只是path的范围更小。path控制COOKIE在当前域名的路径,只有路径相匹配COOKIE才能被读取到。在www.example.com/order/index.html中COOKIE设置如下 document.COOKIE = `order=10; expires=${t.toGMTString()}; path=/order`;
,那么只有在/order路径下的页面COOKIE中才会带有order值。
localStorage和sessionStorage
localStorage和sessionStorage都继承于Storage,提供了统一的api来访问和设置数据。api列表为:
- clear 清空存储中的所有本地存储数据
- getItem 接受一个参数key,获取对应key的本地存储
- key 接受一个整数索引,返回对应本地存储中索引的键
- removeItem 接受一个参数key,删除对应本地存储的key
- setItem 接受两个参数,key和value,如果不存在则添加,存在则更新。
localStorage.setItem('order', 'a109');
console.log(localStorage.key(0)); // order
console.log(localStorage.getItem('order')) // a109
localStorage.removeItem('order');
localStorage.clear();
// 对象访问方式同样有效
localStorage.order = 'b110';
localStorage.order; // b110
扩展
COOKIE的一个极端使用例子是僵尸COOKIE(或称之为“删不掉的COOKIE”),这类COOKIE较难以删除,甚至删除之后会自动重建。它们一般是使使用Web storage API、Flash本地共享对象或者其他技术手段来达到目的的。相关内容可以看:
EverCOOKIE by Samy Kamkar
参考连接
COOKIEs
Storage
RFC6265介绍