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:

相关推荐
我有一棵树2 分钟前
元素滚动和内容垂直居中同时存在,完美的 html 元素垂直居中的方法flex + margin: auto
前端·html
excel21 分钟前
webpack 运行时模版 第 四 节 /lib/RuntimeTemplate.js
前端
好_快24 分钟前
Lodash源码阅读-createSet
前端·javascript·源码阅读
好_快26 分钟前
Lodash源码阅读-remove
前端·javascript·源码阅读
excel28 分钟前
webpack 运行时模版 第 五 节 /lib/RuntimeTemplate.js
前端
好_快29 分钟前
Lodash源码阅读-arrayIncludes
前端·javascript·源码阅读
好_快30 分钟前
Lodash源码阅读-arrayIncludesWith
前端·javascript·源码阅读
编程猪猪侠1 小时前
解决yarn install 报错 error \node_modules\electron: Command failed.
前端·javascript·electron
来自星星的坤7 小时前
Vue 3中如何封装API请求:提升开发效率的最佳实践
前端·javascript·vue.js
vvilkim8 小时前
全面解析React内存泄漏:原因、解决方案与最佳实践
前端·javascript·react.js