cookie, sessionStorage, localStorage

自我学习记录（一直会更新?）

三者的基本特征

特征	cookie	localstorage	sessionStorage
有效时间	①会话cookie：不设定它的生命周期expires时的状态，浏览器的开启到关闭就是一次会话，当关闭浏览器时，会话cookie就会跟随浏览器而销毁。当关闭一个页面时，不影响会话cookie的销毁。会话cookie就像我们没有办理积分卡时，单一的买卖过程，离开之后，信息则销毁。 ②持久cookie：设定了它的生命周期expires，此时，cookie像商品一样，有个保质期，关闭浏览器之后，它不会销毁，直到设定的过期时间。对于持久cookie，可以在同一个浏览器中传递数据，比如，你在打开一个淘宝页面登陆后，你在点开一个商品页面，依然是登录状态，即便你关闭了浏览器，再次开启浏览器，依然会是登录状态。这就是因为cookie自动将数据传送到服务器端，在反馈回来的结果。持久cookie就像是我们办理了一张积分卡，即便离开，信息一直保留，直到时间到期，信息销毁。	数据永久性：即一旦赋值，不管多长时间值都是存在的，除非手动清除否则永久保存	引入了一个浏览器窗口的概念，①当前浏览器窗口没有关闭，即使刷新页面或者进入同源页面，数据仍然存在。②关闭窗口后，数据即销毁。③同时打开独立的不同的掘金页面，sessionStorage对象也是不一样的。
存储大小	不能超过4KB	一般5MB，或者更大	一般5MB，或者更大
与服务器端通信	数据始终在同源的http请求中携带（即使不需要），即会在浏览器和服务器间来回传递	不会自动把数据发给服务器，仅在本地保存	不会自动把数据发给服务器，仅在本地保存

1.cookie的使用

js-cookie js-cookie的详细使用方法看github
npm install js-cookie --save

js创建cookie

document.cookie='name=mm' 
document.cookie = 'name= 11212; expires = Thu, 18 Dec 2019 12:00:00 GMT' 
// expires参数 添加过期的时间（UTC、GMT时间）
document.cookie = 'name= 11212; expires = Thu, 18 Dec 2019 12:00:00 GMT; path = /;'
// path参数 告诉浏览器 cookie 的路径。默认情况下，cookie 属于当前页面。
document.cookie = 'name= 11212; expires = Thu, 18 Dec 2019 12:00:00 GMT; path = /; domain=.juejin.im'
复制代码

js读取cookie

function getItem(_name) {
	var _cookie = document.cookie.split('; ')
	for(let i = 0; i < _cookie.length; i++) {
		var arr = _cookie[i].split('=')
		if (arr[0] === _name) {
			return arr[1]
		}
	}
}
getItem('name')
复制代码

js删除cookie

将cookie的时间设置成已经过期的时间

2.sessionStorage的使用

sessionStorage.setItem('name', 'mm')
var cat = sessionStorage.getItem('name')
sessionStorage.removeItem('name')
sessionStorage.clear()
复制代码

3.localStorage的使用

localStorage.setItem('name', 'mm')
var cat = localStorage.getItem('name')
localStorage.removeItem('name')
localStorage.clear()
复制代码

名词注解：（?有可能理解错误，请指正）

1.同源： 在生物学种系发生理论中，若两个或多个结构具有相同的祖先，则称它们同源