浏览器存储方式详解：cookie、localstorage、sessionstorage的由来和区别
【摘要】 浏览器存储方式详解：cookie、localstorage、sessionstorage的由来和区别作为一名开发，不了解一下浏览器的存储方式，是不合格的。存储方式有很多，你可以打开浏览器的控制台看看Application中的Storage都有哪些选项。今天主要是介绍一下cookie、localstorage、sessionstorage的由来和区别。1、cookie的由来早起的浏览器功能比较...
浏览器存储方式详解：cookie、localstorage、sessionstorage的由来和区别
作为一名开发，不了解一下浏览器的存储方式，是不合格的。
存储方式有很多，你可以打开浏览器的控制台看看Application中的Storage都有哪些选项。
今天主要是介绍一下cookie、localstorage、sessionstorage的由来和区别。
1、cookie的由来
早起的浏览器功能比较简单，纯粹就相当于一个网络资源查看器，用来浏览一些文档，查看一些网站，并不涉及交互。但是随着时代的发展，交互式Web逐渐兴起，这时候cookie就随之诞生。它是由服务器发给客户端的特殊信息，在客户端每次想服务器发送请求时携带，主要用于记录之前登陆过的用户信息，方便后续的状态管理或者行为跟踪。
2、localstorage和sessionstorage的由来
cookie固然是解决了一些问题，但是cookie当时设计时就是为了存储一些少量数据，所以可存储的东西少，其次就是每次cookie都要跟着请求一起发送到服务器，这对宽带是一种浪费。所以后面html5又新加了localstorage和sessionstorage两种本地存储方式。
由来已经讲清楚了，接下来直接列一下三者的区别
| 区别 | cookie | localStorage | sessionStroage |
|---|---|---|---|
| 存储位置 | 内存/硬盘 | 硬盘 | 硬盘 |
| 存储大小 | 一般4k | 5M或者更多 | 5M或者更多 |
| 存储格式 | 文件 | 文件 | 文件 |
| 有效期 | 随后台设置 | 永久，除非手动删除 | 当前页面关闭则失效 |
| 获取方式 | 一次获取全部，需要二次封装 | 有现成的get、set方法 | 有现成的get、set方法 |
| 作用域 | domain以及domain下的所有子域名 | 同源的不同窗口下可共享 | 同源的不同窗口下不可共享 |
| 随请求发出 | 是，自动发出 | 否 | 否 |
| 应用场景 | 应用于状态管理、行为跟踪 | 应用于稍微大一些数据的本地化存储或者用户信息的长期存储 | 应用于页面跳转传参很方便，还有就是账号的一次性登录 |
【版权声明】本文为华为云社区用户原创内容，转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息， 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）