JS中cookie、localStorage和sessionStorage的区别

这两个都是h5新出的本地存储的方式；

1、相同点（localStorage和sessionStorage）

1. 都是保存在浏览器端
2. 不会把数据自动发送给服务器，仅在本地保存
3. 只能存储字符串，可以通过JSON.stringfy()将对象转换为字符串后存储

2、不同点

不同点	localStorage	sessionStorage	cookie
存储大小限制不同	存储大小：20M	存储大小：5M	不超过4k的小型文本数据
数据有效期不同	只要不手动去删除，始终有效，窗口关闭或者浏览器关闭，一直保存，持久保存数据	会话级的存储，仅在当前浏览器窗口关闭前有效	可以设置失效时间；若没有设置时间，关闭浏览器cookie失效，若设置时间，cookie会存放在硬盘中，过期才会失效，每次http请求，header都会携带cookie
作用域不同	在所有同源的窗口下可以共享数据	在不同浏览器窗口是不会进行共享的，只有在同一个页面中才可以共享数据

3、localStorage常用的api

3.1、setItem：设置或者修改某一项数据的值

	const obj={name:"张三",age:18};
	//方法1：
    localStorage.setItem("user",JSON.stringify(obj));

   //方法2：
    localStorage["user"]=JSON.stringify(obj)

	//方法3：
    localStorage.user=JSON.stringify(obj)

3.2、getItem：获取某一项数据

//方法1：
localStorage.getItem("user")

//方法2：
localStorage["user"]

//方法3：
localStorage.user

3.3、removeItem：移出某一项数据

//方法1：
localStorage.removeItem("user");

//方法2：
delete  localStorage["user"]

//方法3：
delete localStorage.user

3.4、clear：清除所有数据

localStorage.clear()

3.5、key：返回存储对象的键名

localStorage.key(i)

3.6、获取本地存储所有的值

localStorage.valueOf()

3.7、hasOwnProperty：判断是否含有某个key

localStorage.hasOwnProperty("xxx")