localStorage sessionStorage cookie session的区别

cookie:

Cookie  是一个请求首部，其中含有先前由服务器通过  Set-Cookie   首部投放并存储到客户端的  HTTP cookies 。

HTTP Cookie （也叫Web Cookie或浏览器Cookie）是服务器发送到用户浏览器并保存在本地的一小块数据，它会在浏览器下次向同一服务器再发起请求时被携带并发送到服务器上。通常，它用于告知服务端两个请求是否来自同一浏览器，如保持用户的登录状态。Cookie使基于无状态的HTTP协议记录稳定的状态信息成为了可能。

但是，使用cookie也存在着一些问题：

 第一：大小限制，cookie的大小被限制在4kb。（这是因为cookie会连同请求一起发送，如果太大会占用很多带宽，同时也

意味着cookie不能存更多的数据）

第二：带宽，如上所说，cookie是随http事物一起被发送的，因此会浪费一部分带宽。

第三：复杂性，正确的操纵cookie是非常困难的。

cookie是可以禁用的，MDN cookie 。如果禁用了cookie还可以如何跟踪呢？

可以使用  url重写   进行会话跟踪。 例如www.aaaaauid=544545,在url上绑定数据，也可以使用localStorage存储信息。

session:

会话控制，存储在服务器。可用来跟踪浏览器打开到浏览器关闭这一时间的会话。典型的应用有购物车等。可以设置session 的生存周期。

webStorage

webStorage分为两种localStorage还有sessionStorage，它是h5数据本地化存储的解决方案之一。

localStorage:

将数据存储在客户端本地的硬件设备上，即使浏览器关闭了，该数据也可以继续使用。

保存数据 

  localStorage.name = 'value';
  localStorage['name'] = 'value';
  localStorage.setItem('name','value');

 读取数据：

　var value =localStorage.getItem('name');
　　	var value = localStorage.name;
　　	var value = localStorage['name'];

webStorage的优势：

1. 相比cookie存储容量增加
2. 可以将请求的表单数据存于本地，减少http请求，节约带宽
3. webStorage拥有易用的API

webStorage的局限性：

1. 不同浏览器webStorage 和LocalStorage的大小不统一。
2. 在浏览器的隐私模式下面是不可读取的
3. 本质上是对字符串的读取，因此存储内容过多时页面会变卡
4. 不能被爬虫抓取到

sesionStorage:

类似于服务器端的session，只不过存储在客户端。将数据保存在session对象中。所谓session，就是用户在浏览某个网站时，从进入这个网站到浏览器关闭这一段时间，也就是用户浏览这个网站所经过的这段时间所要求保存的所有数据。

1.存储数据：
　　localStorage.name = 'value';
　　localStorage['name'] = 'value';
　　localStorage.setItem('name','value');
　　注意键和值总是字符串。建议使用webStorage API(setItem,getItem,removeItem,key,length)
2.获取数据：
　　var value = localStorage.getItem('name');
　　var value = localStorage.name;
　　var value = localStorage['name'];
3.删除数据：
　　清空所有数据
　　　　localStorage.clear();
　　删除特定数据；
　　　　localStorage.removeItem('name');

总结：上面这四种存储数据的方式中，除了session存储在服务器端，其他三种都存储在客户端。可以根据需求去选取采用哪一种方式或者哪几种方式来存储用户信息，