请描述一下 cookies，sessionStorage 和 localStorage 的区别？

请描述一下 cookies，sessionStorage 和 localStorage 的区别？

1.背景介绍
SessionStorage、LocalStorage、Cookie这三者都可以用来在浏览器端存储数据，而且都是字符串类型的键值对。区别在于前两者属于WebStorage，创建他们的目的便于客户端存储数据。而Cookie早在网景公司的浏览器中就开始支持，最初目的是为了保持HTTP的状态。

Cookie（也叫Web cookie或者浏览器Cookie）是服务器发送到用户浏览器并保存在浏览器上的一块数据， 它会在浏览器下一次发起请求时被携带并发送到服务器上。比较经典的，可以它用来确定两次请求是否来自于同一个浏 览器，从而能够确认和保持用户的登录状态。Cookie的使用使得基于无状态的HTTP协议上记录稳定的状态信息成为了可能。

localStorage 是 HTML5 标准中新加入的技术，它并不是什么划时代的新东西。 早在 IE 6 时代，就有一 个叫 userData 的东西用于本地存储，而当时考虑到浏览器兼容性， 更通用的方案是使用 Flash。而如今，localStorage 被大多数浏览器所支持，更多用他来存储数据。

sessionStorage 与 localStorage 的接口类似， 但保存数据的生命周期与 localStorage 不同。 做过后 端开发的同学应该知道 Session 这个词的意思， 直译过来是“会话”。 而 sessionStorage 是一个前端的概念， 它只 是可以将一部分数据在当前会话中保存下来， 刷新页面数据依旧存在。 但当页面关闭后，sessionStorage 中的数据就会被清空

2.知识剖析
在同一个页面中设置 Cookie，实际上是按从后往前的顺序进行的。如果要先删除一个 Cookie，再写入一 个 Cookie，则必须先写入语句，再写删除语句，否则会出现错误Cookie是面向路径的。缺省路径 (path) 属性时 ，Web 服务器页会自动传递当前路径给浏览器，指定路径强制服务器使用设置的路径。在一个目录页面里设置的 Cookie 在另一个目录的页面里是看不到的Cookie 必须在 HTML 文件的内容输出之前设置；不同的浏览器 对 Cookie 的处理不一致，使用时一定要考虑；客户端用户如果设置禁止 Cookie，则 Cookie 不能建立。并且在客户端， 一个浏览器能创建的 Cookie 数量最多为 300 个，并且每个不能超过 4KB，每个 Web 站点能设置的 Cookie 总数不能超过 20 个

Cookie的设置以及发送过程分为以下四步：

• 客户端发送一个http请求到服务器端
• 服务器端发送一个http响应到客户端，其中包含Set-Cookie头部
• 客户端发送一个http请求到服务器端，其中包含Cookie头部
• 服务器端发送一个http响应到客户端
  Storage类的相关成员

成员名	方法参数	描述
length	属性	获取存储数据的条数
key(n)	n :索引值	根据索引值，返回键名
getItem(key)	key : 键名	根据键名，获取数据值
setItem(key,value)	Key :键名 value : 键值	根据键名和键值设置数据项，如果键名已经存在，则覆盖值
removeItem(key)	Key :键名	根据键名删除一个数据项
Clear()	无	清空当前的Storage对象

三者之间的区别

特性	Cookie	localStorage	sessionStorage
特性	一般由服务器生成，可设置失效时间。如果在浏览器端生成Cookie,默认是关闭浏览器失效	除非被清除，否则永久保存	尽在当前会话下有效，关闭页面或浏览器后被清除
存放数据大小	4K左右	一般为5MB
与服务器端通信	每次都会携带在HTTP头中，如果使用cookie保存过多数据会带来性能为题	仅在客户端(即浏览器)中保存，不参与和服务器的通信
易用性	需要程序员自己封装，原生的Cookie接口不友好	原生接口可以接受，亦可再次封装来对Object和Array有更好的支持

sessionStorage （session）中的数据，这些数据只有在同一个会话中的页面才能访问 并且当会话结束后数据也随之销毁。因此 sessionStorage 不是一种持久化的本地存储，仅仅是会话级别的存储。而 localStorage 用于持久化的本地存储，除非主动删除数据，否则 数据是永远不会过期的。

web storage 和 cookie 的区别 Web Storage 的概念和 cookie 相似，区别是它是为了更大容量存储设计的。Cookie 的大小 是受限的，并且每次你请求一个新的页面的时候 Cookie 都会被发送过去，这样无形中浪费 了带宽，另外 cookie 还需要指定作用域，不可以跨域调用。 除此之外，Web Storage 拥有 setItem,getItem,removeItem,clear 等方法，不像 cookie 需要前端开发者自己封装 setCookie，getCookie。但是 Cookie 也是不可以或缺的：Cookie 的作用是与服务器进行交互，作为 HTTP 规范的一部分而存在 ，而 Web Storage 仅仅是为 了在本地“存储”数据而生。