浏览器存储方式详解：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下的所有子域名	同源的不同窗口下可共享	同源的不同窗口下不可共享
随请求发出	是，自动发出	否	否
应用场景	应用于状态管理、行为跟踪	应用于稍微大一些数据的本地化存储或者用户信息的长期存储	应用于页面跳转传参很方便，还有就是账号的一次性登录