Web/前端存储

1. Cookies存储

           cookie存储在浏览器中，每次浏览器向服务器发送请求都需要携带cookie，一般情况下，cookie是产生于服务器端，保存于客户端，但是我们也可以通过js来产生cookie；通常通过js-cookie这个库来操作cookie

<!-- js-cookie库操作cookie -->
<!-- 引入js-cookie库 -->
<script src="https://cdn.bootcdn.net/ajax/libs/js-cookie/3.0.1/js.cookie.js"></script>
<script>
	// console.log(Cookies,'打印cookies');
	// 设置cookie 参数:key value 设置过期时间expires
	Cookies.set('status','正常',{expires:7});
	Cookies.set('gender','male',{expires:7});
	// cookies特点:
	// 1.产生于服务器端 保存于客户端 
	// 2.面向服务器得 同一服务器/作用域得cookie是共享 
	// 不同服务器cookie不共享 大小限制4k
	// 获取cookie get参数:键名/属性名
	console.log(Cookies.get('status'));
	console.log(Cookies.get('gender'));
	// 移除cookie remove参数:属性名 
	Cookies.remove('status');
</script>

2. WebStorage

        2.1 会话存储

<script>
	// 会话存储 sessionStorage 针对于浏览器选项卡存储 
	// 只要选项卡关闭 或者是浏览器关闭 会话失效
	// 四个方法 setItem(key,value) getItem(key)
	//  clear();参数:无 清除所有得会话存储 
	// removeItem(key) 清除key对应得会话存储
	// 设置会话存储
	sessionStorage.setItem('gender','male');
	sessionStorage.setItem('weight','12kg');
	// 获取会话存储
	console.log(sessionStorage.getItem('weight'));
	// 清除/移除会话存储 参数:键名
	// sessionStorage.removeItem('name');
	// 清除全部得会话存储
	// sessionStorage.clear();
	// 存储数据可以达到5MB甚至更大
</script>

        2. 本地存储

<script>
	// 本地存储
	// 特点:将数据存储到本地磁盘 即使选项卡和浏览器关闭数据依旧存在
	// 除非手动删除 否则数据一直存在本地磁盘中 传输得数据5M甚至更大
	// setItem(key,value) getItem(key)
	// removeItem(key) clear()
	// 设置本地存储
	localStorage.setItem('name','产品名称');
	localStorage.setItem('age','12');
	// 获取本地存储
	console.log(localStorage.getItem('age'));
	// 移除本地存储
	localStorage.removeItem('name');
	// 全部移除
	localStorage.clear();
</script>