数据的两种存储方式 cookie 和 webstorage

什么是cookie？

通俗的说就是当一个用户通过HTTP协议访问一个服务器的时候，这个服务器会将一些键值对（key：value）返回给客户端浏览器，并在这些数据上加一些限制，在条件符合是，这个用户下次访问这个浏览器的时候，数据又被完整的待会给服务器；cookie是浏览器提供的一种机制，可以有javascript对其进行控制，而不是javascript本身的性质

我们也可以这样来理解：

cookie就像是第一次去超市，第一次办了一张会员卡，会员卡里存了你的一些个人信息，下次再继续来这个超市时，超市会识别你的购物卡，

cookie的缺点：

1.数量和长度的限制：

每个域的cookie的cookie总数是有限的，IE6及以下最多20个，IE7及以上可以50个，FF最多50个，Chrome和Safair没有做应限制。cookie的长度也有限制，最靠将存储的内容控制在4KB左右；

2.安全性问题：

cookie把所有保存的数据通过http协议的头部从客户端传递到服务器，又从服务端传回到客户端，所有数据都存储在客户端的浏览器里，所以这些cookie中的数据可以被访问到，如果cookie被人拦截了，name就可以取得cookie内的所有信息，即使加密也没有用，因为拦截者不需要知道cookie的意义，他只要原样转发就可以了

3.性能问题：

由于所有cookie都会由浏览器作为请求头发送，所以在cookie中存储大量信息会影响特定域的请求性能

4.用户：

用户是可以自己禁止cookie的；

session：

除了cookie，web浏览器中还会使用session来存储客户端的登录状态。不同于cookie的是，session保存在服务器上。session相当于程序在服务器上建立了一份用户档案，客户来访问时只需要查询客户档案表就可以了。

webstorage：

webstorage是h5中本地存储的解决方案之一，目的是用来克服cookie的一些限制，在h5中引入webstorage这个概念并不是为了取代cookie而指定的标准，cookie作为http协议的一部分，来处理客户端和服务器端的通信是不可或缺的。

webstorage的意图在于解决本地本不应该用cookie却不得不用cookie的本地存储。

webstorage的优势：

1.容量上：

 webstorage：一般浏览器课提供5M的空间

2.安全性：

webstorage并不作为http请求头发送到浏览器所以相对安全，

3.流量上：

webstorage不传送到服务器，所以可以节省不必要的流量

webstorage的分类：

h5的webstorage分为两个部分：

localStorage和sessionStorage，两者的差别就就在于生命周期的不同：

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

session和cookie的区别：

1.session保存在服务器，客户端不知道其中的信息；cookie保存在客户端，服务器可以知道其中的信息；

2.session中保存的是对象，cookie中保存的是字符串；

3.session不能区分路径，同一个用户在访问网站期间，所有的session在任何一盒页面内都可以访问到；而cookie如果设置了路径参数，name同一个网站下的不同路径的cookie是不可以访问到的

4.session会在一定时间保存在服务器上，当访问增多，会占用服务器的性能，所以考虑到减轻服务器的压力，推荐使用cookie

5.单个cookie保存的数据不能超过4KB，

6.session是通过cookie来工作的

cookie sessionStorage 和 cookieStorage的区别：

很多资料里已经很详细的介绍过三者的联系和区别了，在这里我们主要说一下三者的区别：

1.cookie数据始终在同源的http请求中携带，也就是说cookie在服务器端和客户端来回传递；而sessionStorage和localStorage不会自动把数据发送给服务器，只保存在本地

2.cookie数据有路径的概念，可以限制路径

3.存储大小的不同

4.数据的有效期不同：

sessionStorage:   仅在当前浏览器关闭前有效；

localStorage：始终有效，窗口或者浏览器关闭后也有效，所以可以持久保存数据；

cookie：只在设置的过期时间之前有效

5.作用域不同：

sessionStorage：不在不同的浏览器窗口中共享，即使是同一个页面；

localStorage：在所有同源窗口中都是共享的；

cookie：在所有同源窗口中共享；

6.web storage支持时间通知机制，可以将数据更新的通知发送给监者；

7.web storage的api接口使用更方便