cookie&&session简单记录

220 阅读2分钟

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数据