Cookies,Session Storage,Local Storage区别

1.Cookies

用途 :Cookies主要用于保持HTTP连接中服务器与客户端之间的状态信息。它们是服务器设置的,用于跟踪会话,记住用户偏好,以及实现其他功能。
存储容量 :每个域名最多可存储20个Cookie,每个Cookie的大小限制为4KB。
存储位置 :Cookies存储在用户的浏览器中,随每个请求发送回服务器。
安全性 :由于Cookies随每个HTTP请求发送,存在安全风险,如劫持和注入攻击。因此,敏感信息不应存储在Cookies中。
同源策略 :Cookies受同源策略限制,仅限于设置它们的域访问。
使用建议:用于保持会话状态、记住用户偏好等。

2.Session Storage

用途 :Session Storage提供了一种在单个会话中存储数据的方法。数据仅在当前会话中可用,关闭浏览器标签或窗口后数据会被清除。
存储容量 :存储容量通常比Cookies大,一般为5-10MB,具体取决于浏览器。
存储位置 :数据存储在用户的浏览器中,不会随HTTP请求发送。
安全性 :Session Storage中的数据仅在当前会话中可用,不随HTTP请求发送,相对安全。
同源策略 :受同源策略限制,仅限于设置它们的域访问。
使用建议:用于存储临时数据,如购物车、表单数据等。

3.Local Storage

用途 :Local Storage提供了一种在用户浏览器中持久存储数据的方法。数据即使在关闭浏览器后也会保留,直到被显式删除。
存储容量 :存储容量通常比Cookies大,一般为5-10MB,具体取决于浏览器。
存储位置 :数据存储在用户的浏览器中,不会随HTTP请求发送。
安全性 :虽然数据不随HTTP请求发送,但仍然存在安全风险。敏感信息应加密存储。
同源策略 :受同源策略限制,仅限于设置它们的域访问。
使用建议:用于存储需要持久保存的数据,如用户设置、缓存数据等。

4.总结

相关推荐
zwjapple44 分钟前
docker-compose一键部署全栈项目。springboot后端,react前端
前端·spring boot·docker
像风一样自由20203 小时前
HTML与JavaScript:构建动态交互式Web页面的基石
前端·javascript·html
aiprtem4 小时前
基于Flutter的web登录设计
前端·flutter
浪裡遊4 小时前
React Hooks全面解析:从基础到高级的实用指南
开发语言·前端·javascript·react.js·node.js·ecmascript·php
why技术4 小时前
Stack Overflow,轰然倒下!
前端·人工智能·后端
GISer_Jing4 小时前
0704-0706上海,又聚上了
前端·新浪微博
止观止4 小时前
深入探索 pnpm:高效磁盘利用与灵活的包管理解决方案
前端·pnpm·前端工程化·包管理器
whale fall4 小时前
npm install安装的node_modules是什么
前端·npm·node.js
烛阴4 小时前
简单入门Python装饰器
前端·python
袁煦丞5 小时前
数据库设计神器DrawDB:cpolar内网穿透实验室第595个成功挑战
前端·程序员·远程工作