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:

相关推荐
jump_jump1 天前
超长定时器 long-timeout
前端·javascript·node.js
wulaladamowang1 天前
日常踩雷系列-vscode无法输入中文
ide·vscode·编辑器
Mintopia1 天前
架构进阶 🏗 从 CRUD 升级到“大工程师视野”
前端·javascript·全栈
Mintopia1 天前
小样本学习在 WebAI 场景中的技术应用与局限
前端·人工智能·aigc
光影少年1 天前
vue生态都有哪些?
前端·javascript·vue.js
一只大头猿1 天前
基于SpringBoot和Vue的超市管理系统
前端·vue.js·spring boot
用户1456775610371 天前
告别繁琐操作!Excel合并原来可以这么轻松
前端
itslife1 天前
vite 源码 - 创建 ws 服务
前端·javascript
懒人Ethan1 天前
解决一个C# 在Framework 4.5反序列化的问题
java·前端·c#
用户1456775610371 天前
Excel合并数据太麻烦?这个神器3秒搞定,打工人必备!
前端