理解 cookie、session、localStorage 和 sessionStorage 区别及应用场景

cookie 和 session

cookie是存储在客户端浏览器中的，一般由服务器端生成，用于标识用户身份。
session是存储在服务器端，用于跟踪浏览器用户身份的会话方式。
他们的区别：
1、cookie存储在浏览器端，session存储在服务器端。
2、使用方式
（1）cookie机制：如果不在浏览器中设置过期时间，cookie被保存在内存中，浏览器关闭cookie数据不存在，这种cookie简称会话cookie。如果在浏览器中设置cookie的过期时间，cookie被保存在硬盘中，关闭浏览器后，cookie数据依然存在，直到过期时间结束才会消失。
cookie是服务器发给客户端的特殊信息，cookie是以文本的方式保存在客户端，每次请求时都带上它。
（2）session机制： 当服务器收到请求需要创建session对象时，首先会检查客户端请求中是否包含sessionID，如果有sessionId，服务器将根据该id返回对应session对象。如果客户端请求中没有sessionId，服务器会创建一个新的session对象，并把sessionid在本次响应中返回给客户端。通常使用cookie方式存储sessionid到客户端，在交互中浏览器按照规则将sessionid发送给服务器。如果用户禁止cookie，则要使用URL重写，可以通过response.encodeURL(url)进行实现；API对encodeURL的结束为，当浏览器支持cookie时，url不做任何处理；当浏览器不支持cookie的时候，将会重写URL将sessionid拼接到访问地址后。
3、存储内容：cookie之恶能保存字符串类型，以文本的方式；session能支持任何类型的对象
4、存储大小：cookie不能超过4kb；session大小没有限制
5、安全性： session安全性大于cookie;
原因如下：
（1）sessionid存储在cookie中，若要攻击session首先要攻破cookie;
（2）sessionid是要有人登录，或者启动session_start才会有，所以攻破cookie也不一定能得到sessionid。
（3）第二次启动session_start后，前一次的sessionid就失效了，session过期后，sessionId也失效了。
（4）sessionId是加密的
（5）综上所述，攻击者必须在短时间内攻破加密sessionid,这很难。
6、应用场景
cookie:（1）判断用户是否登陆过网站，以便下次登录时能够实现自动登录。如果我们删除cookie，则每次登录必须中心填写登录的相关信息。
（2）保存上次登录的时间等信息
（3）保存上次查看的页面
（4）浏览计数
session:用于保存每个用户的专用信息，变量的值保存在服务器端，通过sessionid来区分不同的客户。
（1）网上商城中的购物车
（2）保存用户登录信息
（3）将某些数据放入session中，供同一用户的不同页面使用。
（4）防止用户非法登录
7、缺点
cookie:（1）大小受限制
（2）用户可以操作cookie，是功能受限
（3）安全性较低
（4）有些状态不可能保存在客户端
（5）每次访问都要传送cookie给服务端，浪费宽带
（6）cookie数据有路径的概念，可以限制cookie只属于某路径下。
session:（1）session保存的东西越多，就约占用服务器内存，对于用户在线人数较多的网站，服务器的内存压力会比较大。
（2）依赖于cookie，如果金庸cookie，则要使用url重写，不安全
（3）创建session变量有很大的随意性，可随时调用，不需要开发者做精确的处理，所以，过度使用session变量将会导致代码不可读而且不好维护

WebStorage

WebStorage的目的是克服由cookie所带来的一些限制，当数据需要被严格控制在客户端时，不需要持续的将数据发送回服务器。
WebStorage两个主要目标：（1）提供一种在cookie之外存储会话数据的路径。
（2）提供一种存储大量可以跨会话存储的数据的机制
HTML5的WebStorage提供2中API:localStorage(本地存储) 和 sessionStorage(会话存储)
1、生命周期：
localStorage的生命周期是永久的，关闭页面或浏览器之后localstorage中的数据不会消失。loaclStorage除非手动删除数据，否则数据永远不会消失。
sessionStorage的生命周期是仅在当前会话下有效。sessionStorage引入一个“浏览器窗口”的概念，sessionStorage是在同源的窗口中始终存在的数据。只要这个浏览器窗口没有关闭，即使刷新页面或者进入同源另一个页面，数据依然存在。但是sessionStorage在关闭浏览器窗口后就会被销毁。同时独立的打开同一个窗口同一个页面，sessionStorage也是不一样的。
2、存储大小：存储数据大小一般都是5MB
3、存储位置：都保存在客户端，不与服务器进行交互通信
4、存储内容类型：loaclStorage 和sessionStorage只能存储字符串类型，对于复杂类型的对象使用ECMAScript提供的stringify和pares来处理
5、获取方式： window.localStorage ; window.sessionStorage
6 、应用场景
localStorage：常用于长期登录（+判断用户是否已登录），适合长期保存在本地的数据。
sessionStorage：敏感账号一次性登录

WebStorage的优点
（1）存储空间更大：cookie为4kb，而webStorage是5MB
（2）节省网络流量：webstorage不会传送到服务器，存储在本地的出局可以直接获取，不会像cookie一样每次请求都会传送到服务器，所以减少了客户端和服务器端的交互，节省了网络流量。
（3）对于那种只需要在用户浏览一组页面期间保存而关闭浏览器后就可以丢弃的数据，sessionstorage回非常方便
（4）快速显示：获取数据从本地获取比从服务器获取快的多
（5）安全性：webstorage不会随着http header发送到服务器端，所以安全性比cookie高些，不会担心截获，但仍存在伪造问题
（6）WebStorage提供一些方法，数据操作比cookie方便
setItem(key,value) ----- 保存数据，以键值对的方式对存储信息
getItem(key)-------获取数据，将键值传入，即可获取对应的value值
removeIItem(key)------删除单个数据
clear() ----- 删除所有数据
key(index)----- 获取某个索引的key