cookie
key:键 vlaue:值 domain: 路径限制,通常为域名,即在该域名下cookie有效 size: 大小,通常<4kb path: 路径,通常为/ expires: 过期时间 max-age: 表示n 时间后消亡 httponly: 只允许服务器更改 true or false
实际情况为大写,处理需注意!
简单使用像是这样
res.setHeader('Set-Cookie', cookie);
由服务端种植到客户端浏览器,解决了无状态的问题,每次都会携带HTTP头中,如果使用cookie保存过多数据会带来性能问题;不管用没有用都加入http头中来回,浪费流量;cookie也不是看上去那么安全。
可用作用户名补全
session
基于cookie,服务端使用uuid生成session_id区别用户等,并把session_id种植在客户端浏览器上,这一步就是cookie种植;服务端将session_id存储在数据库等中,客户端浏览器带来session_id(cookie)。session保存在服务器,相对安全。
。。。可以参照理发店办卡的例子
在购物车需求中使用良好
localStorage
本地存储,如果不是手动清除,将一直存在
localStorage 当然不能跨域存取,同时也不加入http请求(说是本地存储不是开玩笑的),大小比cookie大,官方文档建议5M,如果数据过多,就会溢出失效,各个浏览器也有不同的大小设置,通常>5MB;
缓存表单数据用户反映良好
sessionStorage
sessionStorage与localStorage的接口类似,但保存数据的生命周期与localStorage不同,做过后端的同学都知道Session这个词,翻译过来就是会话。而sessionStorage是前端的一个概念。它只是可以将一部分数据在当前会话中保存下来,刷新页面数据依旧存在。但是页面关闭后,sessionStorage中的数据就会被清空。浏览器关闭当然也是清空的。
以下是sessionStorage/localStorage的使用方法
sessionStorage.setItem(keyName,value) 将value存储到key字段中
sessionStorage.valueOf() 获取所有本地存储的值
sessionStorage.getItem(keyName) 获取指定key的本地存储的值
sessionStorage.removeItem(keyName) 删除指定key的本地存储的值
sessionStorage.clear() 清除所有 localStorage/sessionStorage数据