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:

相关推荐
拓端研究室31 分钟前
视频讲解:门槛效应模型Threshold Effect分析数字金融指数与消费结构数据
前端·算法
工一木子2 小时前
URL时间戳参数深度解析:缓存破坏与前端优化的前世今生
前端·缓存
半点寒12W3 小时前
微信小程序实现路由拦截的方法
前端
某公司摸鱼前端4 小时前
uniapp socket 封装 (可拿去直接用)
前端·javascript·websocket·uni-app
要加油哦~4 小时前
vue | 插件 | 移动文件的插件 —— move-file-cli 插件 的安装与使用
前端·javascript·vue.js
小林学习编程4 小时前
Springboot + vue + uni-app小程序web端全套家具商场
前端·vue.js·spring boot
柳鲲鹏4 小时前
WINDOWS最快布署WEB服务器:apache2
服务器·前端·windows
weixin-a153003083165 小时前
【playwright篇】教程(十七)[html元素知识]
java·前端·html
ai小鬼头6 小时前
AIStarter最新版怎么卸载AI项目?一键删除操作指南(附路径设置技巧)
前端·后端·github
一只叫煤球的猫6 小时前
普通程序员,从开发到管理岗,为什么我越升职越痛苦?
前端·后端·全栈