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:

相关推荐
brzhang19 小时前
用 Vue 写原生 iOS/Android 应用,我发现这个库比 uni 要轻量且靠谱些
前端·后端·架构
代码小学僧19 小时前
前端技巧:检测到省略号文本自动显示 Tooltip
前端
JarvanMo19 小时前
🛑 停止重写样板代码。开始使用 Kotlin 委托吧!
前端
细节控菜鸡19 小时前
Webpack 核心知识点详解:proxy、热更新、Loader与Plugin全解析
前端·webpack·node.js
Mintopia19 小时前
🧠 Next.js 文件上传(头像 / 图片)终极指南
前端·后端·全栈
欧阳天19 小时前
http环境实现通知
前端·javascript
疯狂踩坑人19 小时前
【面试系列】浏览器篇
前端·面试
Dgua19 小时前
✨五分钟快速弄懂作用域&作用域链✨
前端
九十一19 小时前
Reflect 在 Vue3 响应式中作用
前端·vue.js
东风西巷19 小时前
MyLanViewer(局域网IP扫描软件)
前端·网络·网络协议·tcp/ip·电脑·软件需求