Cookie&sessionStorage&localStorage

cookie是什么？？

cookie是存储在浏览器上的一小段数据，用来记录某些当页面关闭或者刷新后仍然需要记录的信息。在控制台用 document.cookie查看你当前正在浏览的网站的cookie。
注意：谷歌不支持本地静态cookie，需要将网页放在tomcat或者其他的服务器目录下访问才可以

cookie的设置和修改

1、设置cookie值:
document.cookie=‘name=value;path=/’
path设置数据保存期限，如果要存储多个数据，使用‘；’隔开即可
2、修改cookie值
使用document.cookie重新赋值即可
3、查询cookie值
var res=document.cookie;
使用一个变量接收所有的cookie数据，由于所有数据都是字符串形式，我们需要将其分割为数组，然后进行遍历
下面封装一个通过name值获取属性值的方法

function getCookie(name){
	var res=document.cookie;
	vae resArr=res.split(';');
	for(let i=0,len=resArr.length;i<0;i++){
			var valArr=resArr[i].split('=');
			if(valArr[0]===name){
				return valArr[1];		
		}
	}	
}

4、给cookie设置终止时间
cookie都是单会话的，即浏览器关闭后这些cookie将会丢失，事实上这些cookie仅仅是存储在内存中，而没有建立相应的硬盘文件。
在实际开发中，cookie常常需要长期保存，例如保存用户登录的状态。这可以用下面的选项来实现：
document.cookie="userId=828; expires=GMT_String";
这样可以设置cookie在这个时间内都是有效的。
缺陷:

• 流量代价
• 安全性问题
• 大小限制(只有4k)

localStorage

因为cookie有这么一些缺陷,所以HTML5提供了storage存储替代方案localStorage

用于将大量数据（最大5M）保存在浏览器中，保存后数据永远存在不会失效过期，除非用 js手动清除。
不参与网络传输。
一般用于性能优化，可以保存图片、js、css、html 模板、大量数据。

//读取

localStorage.name

//添加/修改

localStorage.name = 'value'(string)

//删除

delete localStorage.name

//API

//获取键值对数量

localStorage.length

//读取

localStorage.getItem("name"),localStorage.key(i)

//添加/修改

localStorage.setItem("name","value")

//删除对应键值

localStorage.removeItem("name")

//删除所有数据

localStorage.clear()

localStorage和sessionStorage的区别

localstorage特点：
1、可以长期存储数据；需手动删除数据
2、同一个域下且同一个浏览器不同窗口页面，操作的是同一个localstorage
优点 ：可以大量保存浏览器中数据
sessionStorage特点：
1、存数据，存入相同属性的数据，以最后一次赋值为准；窗口关闭后，就保存数据了，换一个新的窗口，也不会有数据
2、如果浏览器一直不关闭，数据一直缓存，会导致在其他页面中有一些不需要的数据（这些数据1、占内存 2、一不小心就有可能成为脏数据）；
所以针对以上情况，使用完数据后全部清空