浏览器存储方式详解：cookie、localstorage、sessionstorage的由来和区别
原创浏览器存储方式详解：cookie、localstorage、sessionstorage的由来和区别
原创
浏览器存储方式详解：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下的所有子域名 | 同源的不同窗口下可共享 | 同源的不同窗口下不可共享 |
随请求发出 | 是，自动发出 | 否 | 否 |
应用场景 | 应用于状态管理、行为跟踪 | 应用于稍微大一些数据的本地化存储或者用户信息的长期存储 | 应用于页面跳转传参很方便，还有就是账号的一次性登录 |
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。