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>