cookie & session &localStorage

1.cookie

Cookie 是服务器保存在浏览器的一小段文本信息，浏览器访问服务器后，服务器传给浏览器的一段数据。浏览器保存这段数据，之后每次向服务器发出请求，就会自动附上这段信息。

存储

cookie保存在浏览器端，只能保存字符串类型，一般浏览器存储cookie 最大容量为4k。

应用场景

• 判断用户是否登陆过网站，以便下次登录时能够实现自动登录（或者记住密码）。如果我们删除cookie，则每次登录必须从新填写登录的相关信息。
• 保存上次登录的时间等信息。
• 保存上次查看的页面
• 浏览计数

缺点

• 大小受限
• 用户可以操作（禁用）cookie，使功能受限
• 安全性较低
• 每次访问都要传送cookie给服务器，浪费带宽

2.session

session是一种让服务器能识别某个用户的「机制」，session 在实现的过程中需要使用cookie。
当一个用户打开淘宝登录后，刷新浏览器仍然展示登录状态。服务器为了分辨发起请求的用户是不是刚才登录过的用户，就使用了session保存状态。
1.用户在输入用户名密码提交给服务端，服务端验证通过后会创建一个session用于记录用户的相关信息，这个 session 可保存在服务器内存中，也可保存在数据库中。
2.创建session后，会把关联的session_id 通过setCookie 添加到http响应头部中。
3.浏览器在加载页面时发现响应头部有 set-cookie字段，就把这个cookie 种到浏览器指定域名下。
4.当下次刷新页面时，发送的请求会带上这条cookie， 服务端在接收到后根据这个session_id来识别用户。

存储

session保存在服务器端，session_id保存在浏览器端，session通过类似Hashtable的数据结构来保存，能支持任何类型的对象(session中可含有多个对象)，大小没有限制。

应用场景

• 网上商城中的购物车
• 保存用户登录信息
• 将某些数据放入session中，供同一用户的不同页面使用
• 防止用户非法登录

缺点

• Session保存的东西越多，就越占用服务器内存，对于用户在线人数较多的网站，服务器的内存压力会比较大。
• 依赖于cookie（sessionID保存在cookie），如果禁用cookie，则要使用URL重写，不安全
• 创建Session变量有很大的随意性，可随时调用，不需要开发者做精确地处理，所以，过度使用session变量将会导致代码不可读而且不好维护。

3.localstorage

HTML5本地存储web storage特性的API之一，用于将大量数据（最大5M）保存在浏览器中，保存后数据永远存在不会失效过期，除非用 js手动清除。

存储

• localStorage的生命周期是永久的，关闭页面或浏览器之后localStorage中的数据也不会消失。localStorage除非主动删除数据，否则数据永远不会消失。
• 存储数据大小一般是5MB
• 保存在客户端
• 保存的数据都以“键值对”的形式存在，所有的数据都是以文本格式保存。对于复杂的对象可以使用JSON对象的stringify和parse来处理

应用场景

一般用于性能优化，可以保存图片、js、css、html 模板、大量数据。

优点

存储空间大，不参与网络传输，节省网络流量。

参考