admin管理员组文章数量:1567522
1、Cookie
特点:存储大小4KB左右;可设置失效时间;通信时会携带在HTTP头中,使用cookie保存过多数据会影响性能。
注意:cookie的跨域可以理解为跨域名,只要二级域名相同,不涉及到端口,数据就是共享的。
实用场景:Cookie和session结合使用,通信时后端生成sessionId存储到Cookie中,用户每次请求都会携带这个sessionId,这样服务端就知道是谁发起的请求,从而响应相应的信息。(可能受到csrf攻击)
【session 依赖于cookie实现存储在服务端,不同于sessionStorage存储在客户端】
Cookie的字段:
- Name:cookie的名称
- Value:cookie的值,对于认证cookie,value值包括web服务器所提供的访问令牌;
- Size: cookie的大小
- Path:可以访问此cookie的页面路径。 比如domain是abc,path是
/test
,那么只有/test
路径下的页面可以读取此cookie。- Domain:可以访问该cookie的域名,Cookie 机制并未遵循严格的同源策略,允许一个子域可以设置或获取其父域的 Cookie。
- HTTP: 该字段包含
HTTPOnly
属性 ,该属性用来设置cookie能否通过脚本来访问,默认为空,即可以通过脚本访问。- Expires/Max-size : 此cookie的超时时间。若设置其值为一个时间,那么当到达此时间后,此cookie失效
Cookie的使用:
方式一:http response header中的set-cookie,默认情况下,domain 被设置为设置 Cookie 页面的主机名,可指定过期时间。
Set-Cookie: id=a3fWa; Expires=Wed, 11 Oct 2022 06:30:00 GMT;
方式而:通过document.cookie可以读写cookie
document.cookie='userName=hello;domain=.aaa'
2、SessionStorage
特点:存储大小5MB左右;存储再本地窗口关闭时会清空数据;SessionStorage只有在同一浏览器的同一窗口下才能够共享,有跨域限制,不能被爬虫爬取。
实用场景:SessionStorage具有时效性,所以可以用来存储一些网站的游客登录的信息,还有临时的浏览记录,当关闭网站之后,这些信息也就随之消除了。
SessionStorage的使用:
// 保存数据到 sessionStorage
sessionStorage.setItem('key', 'value');
// 从 sessionStorage 获取数据
let data = sessionStorage.getItem('key');
// 从 sessionStorage 删除保存的数据
sessionStorage.removeItem('key');
// 从 sessionStorage 删除所有保存的数据
sessionStorage.clear();
// 获取某个索引的Key
sessionStorage.key(index)
3、LocalStorage
特点:存储大小跟SessionStorage相同5MB左右;本地持久储存,除非主动清理数据才会消失;有跨域限制,不能被爬虫爬取。
实用场景:JWT实现鉴权时,一把将token存在LocalStorage
LocalStorage的使用同SessionStorage
总结:
- cookies: 在HTML5标准前本地储存的主要⽅式,优点是兼容性好,请求头⾃带cookie⽅便,缺点是⼤⼩只有4k,⾃动请求头加⼊cookie浪费流量,每个domain限制20个cookie,使⽤起来麻烦,需要⾃⾏封装;
- localStorage:HTML5加⼊的以键值对(Key-Value)为标准的⽅式,优点是操作⽅便,永久性储存(除⾮⼿动删除),⼤⼩为5M,兼容IE8+ ;
- sessionStorage:与localStorage基本类似,区别是sessionStorage当⻚⾯关闭后会被清理,⽽且与cookie、localStorage不同,他不能在所有同源窗⼝中共享,是会话级别的储存⽅式;
补充:
- IndexedDB: 是被正式纳⼊HTML5标准的数据库储存⽅案,它是NoSQL数据库,⽤键值对进⾏储存,可以进⾏快速读取操作,⾮常适合web场景,同时⽤JavaScript进⾏操作会⾮常便。
参考:cookie、sessionStorage、localStorage 详解及应用场景 - SegmentFault 思否
本文标签: 浏览器cookielocalstoragesessionstorage
版权声明:本文标题:浏览器本地存储(cookie、sessionStorage和localStorage) 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://www.elefans.com/dongtai/1726624961a1078665.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论