cookie、session、webStorage

Cookie

Cookie是小甜饼的意思，它的主要用途是保存登录信息。比如登录某个网站时可以看到"记住密码"，这通常是通过Cookie来实现。

cookie和session的区别

1、cookie数据存放在客户端，session数据放在服务器端。
2、通常情况下，单个Cookie保存的数据不能超过4K,一个站点最多存储20个Cookie。对于session来说并没有上限，但对于服务器端的性能考虑，session内不要存放过多的东西。
3、cookie不是很安全，因为Cookie对客户端是可见的，别有用心的人可以分析放在本地cookie上面并进行cookie欺骗。

localStorage

localStorage是HTML5标准中新加入的技术，用于本地存储。

sessionStorage

sessionStorage和localStorage类似，不同点是：它保存数据的生命周期与localStorage不同，页面关闭后，sessionStorage中的数据就会被清空。

cookie与webStorage区别

特征	Cookie	localStorage	sessionStorage
数据生命周期	一般由服务器生成，可设置失效时间。如果在浏览器端生成Cookie,默认是关闭浏览器后失效	除非被清除，否则永久保存	仅在当前会话下有效，关闭页面或浏览器后被清除
存放数据大小	4k左右	一般为5M	一般为5M
与服务端通信	每次都会携带在HTTP头中，如果使用cookie保存过多数据会带来性能问题	仅在客户端(即浏览器) 中保存，不参与和服务器的通信	仅在客户端(即浏览器) 中保存，不参与和服务器的通信

应用场景

cookie比较常用的场景是判断用户是否登录，针对登录过的用户，服务器端会在用户登录时往cookie插入一段加密过的唯一辨识单一用户的识别码，下次只要读取这个值就可以判断当前用户是否登录。
Cookie曾经被使用来保存用户在电商网站的购物车信息，如今使用localStorage来管理购物车。
填写表单时，如碰到内容特别多的表单，为了提升用户体验，我们把表单页面拆成多个子页面。按步骤引导用户填写，这时候就用到了sessionStorage。

localStroage和sessionStorage操作

//setItem用于存储
localStorage.setItem("key","I feel good")
//getItem获取存储的key值
localStorage.getItem("key")//I feel good
//removeItem删除key值
localStorage.removeItem("key")
//再次获取结果如下：
localStorage.getItem("key")//null
//用clear清除所有的key/value
localStorage.clear()