VsCode插件:前端每日一题

Javascript本地存储的方式有哪些? 区别及应用场景?

1. Cookie

Cookie 是网站为了辨别用户身份、进行session跟踪而储存在用户本地终端上的数据。Cookie 通常包含了用户的一些个人信息,如用户名、密码、浏览记录、偏好设置等。Cookie 一般在用户访问网站时自动发送给浏览器,并保存在用户本地终端上,直到用户关闭浏览器。

Cookie 的缺点是不安全,容易被篡改,而且大小限制为4KB,所以一般不存储大量数据。

2. LocalStorage

LocalStorage 是 HTML5 新增的存储机制,它是一种持久化的本地存储,可以将数据保存在用户本地终端上,除非主动删除,否则数据会在浏览器关闭后自动删除。

LocalStorage 的优点是数据持久化,不会丢失数据,大小没有限制。

3. SessionStorage

SessionStorage 和 LocalStorage 类似,也是 HTML5 新增的存储机制,但它是针对一个 session 的存储,当页面关闭后,SessionStorage 中的数据也会被清除。

4. IndexedDB

IndexedDB 是 HTML5 新增的数据库存储机制,它是一种非关系型数据库,可以存储大量结构化数据。

IndexedDB 的优点是支持事务,支持索引,查询速度快。

5. 区别及应用场景

| | Cookie | LocalStorage | SessionStorage | IndexedDB |

| --- | --- | --- | --- | --- |

| 生命周期 | 一般由服务器生成,可以设置过期时间 | 除非手动删除,否则数据在浏览器关闭后自动删除 | 页面关闭后自动删除 | 除非手动删除,否则数据在浏览器关闭后自动删除 |

| 存储大小 | 4KB | 除非手动删除,否则数据没有大小限制 | 页面关闭后自动删除 | 无限存储 |

| 存储位置 | 客户端 |

| 安全性 | 不安全 | 不安全 | 不安全 | 安全 |

| 应用场景 | 保存用户信息,如登录状态、购物车、游戏分数等 | 保存小量数据,如表单数据、页面偏好设置等 | 保存小量数据,如表单数据、页面偏好设置等 | 保存大量结构化数据,如用户数据、文件、音乐、视频等 |

6. 总结

Cookie、LocalStorage、SessionStorage、IndexedDB 都是 HTML5 新增的本地存储机制,它们的区别和应用场景各有不同。Cookie 一般用于保存少量数据,LocalStorage 和 SessionStorage 用于保存大量数据,IndexedDB 用于保存结构化数据。

IMG:

相关推荐
然我36 分钟前
不用 Redux 也能全局状态管理?看我用 useReducer+Context 搞个 Todo 应用
前端·javascript·react.js
前端小巷子41 分钟前
Web 实时通信:从短轮询到 WebSocket
前端·javascript·面试
神仙别闹1 小时前
基于C#+SQL Server实现(Web)学生选课管理系统
前端·数据库·c#
web前端神器1 小时前
指定阿里镜像原理
前端
枷锁—sha1 小时前
【DVWA系列】——CSRF——Medium详细教程
android·服务器·前端·web安全·网络安全·csrf
枷锁—sha1 小时前
跨站请求伪造漏洞(CSRF)详解
运维·服务器·前端·web安全·网络安全·csrf
群联云防护小杜1 小时前
深度隐匿源IP:高防+群联AI云防护防绕过实战
运维·服务器·前端·网络·人工智能·网络协议·tcp/ip
汉得数字平台2 小时前
【鲲苍提效】全面洞察用户体验,助力打造高性能前端应用
前端·前端监控
花海如潮淹2 小时前
前端性能追踪工具:用户体验的毫秒战争
前端·笔记·ux
_丿丨丨_7 小时前
XSS(跨站脚本攻击)
前端·网络·xss