cookie、session、web storage

cookie与session的区别

首先，使用cookie和session的目的都是为了跟踪记录用户状态，因为http协议是无状态的协议，而某些场景服务端需要记录用户的状态，如购物车，需要来识别具体的用户，服务端就为特定的用户创建特定的session，用于标识并跟踪用户；

其次，cookie和session都是会话技术，session保存在服务端，cookie保存在客户端，服务端无法知道请求对应哪个session，依靠cookie来实现session的跟踪。

所以在跟踪用户方面，cookie与session属于互相配合的关系。浏览器第一次访问服务器会创建一个session对象，通过cookie返回到浏览器（服务端会在响应头里面添加一个Set-Cookie选项，浏览器收到这类响应后通常会保存下Cookie，用于标识用户）。

在使用限制方面，cookie可以在有效期内（setMaxAge()设置有效期或者默认关闭浏览器后就失效）保存信息，但是有大小限制（约5kB）以及浏览器对cookie的存储有个数限制（每个域名可能30、50个），如果个数过多，会使header大小超过服务器的处理限制；而session本身没有大小限制，但是和服务器的内存大小有关，session保存在服务端上存在一段时间才会消失，所以session过多会增加服务器的压力。

在安全方面，cookie有安全隐患，通过拦截得到cookie后可以进行攻击。

session可以认为是一个抽象概念，开发者为了实现中断和继续等操作，将user agent和server之间一对一的交互，抽象为“会话”，进而衍生出“会话状态”，也就是session的概念。而cookie是一个实际存在的东西，http协议中定义在header中的字段，可以认为是session的一种后端无状态实现。

在使用方面，cookie除了可以跟踪会话，也可以保存用户喜好或者保存用户名密码等等，所以可以说cookie的用途更广泛。

cookie和localStorage的区别

第一，两者使用的出发目的不同，cookie最早是为了跟踪记录用户状态，用于客户端和服务端的信息传递，而localStorage的使用目的是为了在客户端存储一些简单的数据。

第二，两者的大小限制不同，cookie的限制比较小，大约是5kB，超过单个域名限制后，再设置cookie，浏览器会清除以前设置的cookie，而localStorage存储的大小就相对较大，业界主流是5MB。

第三，两者的存储期限不同，localStorage理论上来说永久有效，即不主动清空的话就不会消失，但移动设备的浏览器或者WebView中，可能会因为各种原因（退出app、网络切换、内存不足等原因）被清空；cookie就比较灵活，可以设置失效日期expires（GMT格式的时间），如果没有设置expires，这样的cookie称为会话cookie，它存在内存中，当会话结束，也就是浏览器关闭时，该cookie就消失。

第四，网络传输方面，每次HTTP请求，会自动将同域名的cookie添加到request header的cookie字段发送至服务器，但是可以设置Secure选项使cookie只在确保安全的请求中发送，所以如果cookie内容太多，会增加网络开销；localStorage的内容则不会被带上。

第五，浏览器支持情况方面，IE7及以下版本不支持web storage，cookie兼容性比较好。

第六，在操作方面，localStorage提供现有的API去访问操作，cookie需要自己来封装或者使用第三方库；但是cookie既可以由服务端来设置，也可以由客户端来设置，localStorage只能是客户端来设置。

另外，因为cookie比较灵活，还可以设置domain、path、httpOnly，domain和path一起来限制cookie能被哪些URL访问，即请求的URL是Domain或其子域、且URL的路径是Path或子路径，则可以访问该cookie；如果某个cookie设置了httpOnly，客户端就无法通过js代码去访问这个cookie。

总体来说，cookie用途多一些，也更灵活，但存储体积小，localStorage可以存储较多内容。

cookie的优缺点

• 缺点

  • 每个域名下的cookie个数有限
  • 存储量太小，只有5kB
  • 每次HTTP请求都会发送到服务器，影响获取资源的效率
  • 需要自己封装获取、设置、删除cookie的方法

• 优点

  • 比较灵活
  • 用途多

sessionStorage与localStorage

sessionStorage用于本地存储一个会话中的数据，这些数据只有在同一个会话中的页面才能访问，并且当会话结束后，数据也随之销毁，所以sessionStorage仅仅是会话级别的存储，而不是一种持久化的本地存储。

localStorage是持久化的本地存储，除非是通过JS删除，或者手动清除缓存，否则理论上数据不会过期。

使用场景区别

cookie由于体积小，并不适合专门用于存储用途，主要还是适用于会话凭证。

localStorage和sessionStorage因为体积较大（业界主流为5MB），又主要以字符串的形式存储，更适合用于存储客户端的简单数据。

sessionStorage的数据由于在会话结束后就会被销毁，更适合对安全性要求较高的场景；也适用于存储一些与当前会话关联性较强的数据，比如记录跳转的路由信息，在别的会话窗口就不适用，就可以存储在sessionStorage中。

如果有更多大量复杂结构的数据需要存取访问，可以考虑使用indexDB，但需要考虑indexDB的兼容性。