sessionStorage localStorage cookie的区别

基本概念

cookie：是网景公司的前雇员在1993年发明。它的主要用于保存登陆信息，比如登陆某个网站市场可以看到’记住密码’，这就是通过在cookie中存入一段辨别用户身份的数据来实现的。

sessionStorage：会话，是可以将一部分数据在当前会话中保存下来，刷新页面数据依旧存在。但是页面关闭后，sessionStorage中的数据就会被清空。

localStorage：是HTML5标准中新加入的技术，当然早在IE6时代就有一个userData的东西用于本地存储，而当时考虑到浏览器的兼容性，更通用的方案是使用flash。如今localStorage被大多数浏览器所支持。

localStorage

localStorage的生命周期是永久的，除非用户在浏览器提供的UI上清除localStorage信息，否则这些信息将永久存在， 而且它仅在客户端保存，不参与服务器通信。
存放数据大小为一般为 5MB
原生接口可以接受，可以封装起来对object和array有更好的支持

sessionStorage

sessionStorage仅在当前会话下有效，不参与服务器通信，
原生接口可以接受，可以封装起来对object和array有更好的支持
（只能保存字符串类型，复杂对象只能通过json的形式保存）
(保存数据setItem，获取数据getItem，删除removeItem ,删除所有clear)
不同浏览器无法共享两种信息.
存放数据大小为一般为 5MB

cookie

cookie(HTTP Cookie)通过name=value的方式存储
cookie的存储数据大小只有4kb左右，有个数限制，一般不能超过20个。
生效时间默认是浏览器关闭失效，但是可以自己设置
cookie会参与服务器端通信，每次都会携带在HTTP头中，如果保存过多会有性能问题。
cookie也是不安全的，但是可以设置cookie的生命周期，使之不会永远有效。
需要自己进行封装，原生的cookie接口不够友好

cookie的优点

具有极高的扩展性和可用性.

• 通过良好的编程，控制保存在 cookie 中的 session 对象的大小。
• 通过加密和安全传输技术，减少 cookie 被破解的可能性。
• 只有在 cookie 中存放不敏感的数据，即使被盗取也不会有很大的损失。
• 控制 cookie 的生命期，使之不会永远有效。这样的话偷盗者很可能拿到的就是一个过期的 cookie。
  cookie的缺点.
• 长度和数量有限制，每一个域中最多只能保存20条，每个不能超过4kb，否则就会被拦截掉。
• 如果cookie被拦截 那么就可以获取所有的session信息，加密也没用.
• 有些状态不可能保存在客户端。例如，为了防止重复提交表单，我们需要在服务端保存一个计数器。若把计数器保存在客户端，则起不到什么作用。

localStorage、sessionStorage、Cookie 共同点
都是保存在浏览器端，且同源的。

应用场景

cookie：判断用户是否登录过网站，以便实现下次自动登录或记住密码；保存事件信息等

sessionStorage：敏感账号一次性登录；单页面用的较多（sessionStorage 可以保证打开页面时 sessionStorage 的数据为空）

localStorage：常用于长期登录（判断用户是否已登录），适合长期保存在本地的数据