我是靠谱客的博主 稳重故事，最近开发中收集的这篇文章主要介绍前端存储——Cookie WebStorageCookie的特点：WebStorage分为 sessionStorage和locationStorage，觉得挺不错的，现在分享给大家，希望可以做个参考。
概述
目录
Cookie的特点：
方法：
设置过期时间expires
WebStorage分为 sessionStorage和locationStorage
sessionStorage 会话存储
方法：
getItem(key)
setItem(key,value)
clear(); 参数:无 清除所有得会话存储
removeItem(key) 清除key对应的会话存储
locationStorage 本地存储
方法：
getItem(key)
setItem(key,value)removeItem(key)
clear()
前端cookie和Webstorage存储
Cookie的特点：
- 产生于服务器端，保存在客户端。
- 同一服务器下的cookie共享的。
- 传输数据最大为4kb.
方法：
Cookies.get() 获取cookie 参数:键名/属性名
Cookies.set() 设置cookie 参数:key value
Cookies.remove() 移除cookie remove参数:属性名
设置过期时间expires
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 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>
</head>
<body>
</body>
</html>WebStorage分为 sessionStorage和locationStorage
sessionStorage 会话存储
特点：
1.针对于选项卡 选项卡关闭或者浏览器关闭时，会话失败。
2. 传输数据可以达到5M
方法：
getItem(key)
setItem(key,value)
clear(); 参数:无 清除所有得会话存储
removeItem(key) 清除key对应的会话存储
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
// 设置会话存储
sessionStorage.setItem('name','terry');
sessionStorage.setItem('age','12');
// 获取会话存储
console.log(sessionStorage.getItem('name'));
// 清除/移除会话存储 参数:键名
sessionStorage.removeItem('name');
// 清除全部得会话存储
sessionStorage.clear();
</script>
</head>
<body>
</body>
</html>locationStorage 本地存储
特点：
1.数据存储到磁盘中
2.选项卡或浏览器关闭 数据依然存在。
3.传输数据可以达到5M。
方法：
getItem(key)
setItem(key,value)
removeItem(key)
clear()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
// 本地存储
// 特点:将数据存储到本地磁盘 即使选项卡和浏览器关闭数据依旧存在
// 除非手动删除 否则数据一直存在本地磁盘中 传输得数据5M甚至更大
// 设置本地存储
localStorage.setItem('name','产品名称');
localStorage.setItem('age','12');
// 获取本地存储
console.log(localStorage.getItem('age'));
// 移除本地存储
localStorage.removeItem('name');
// 全部移除
localStorage.clear();
</script>
</head>
<body>
</body>
</html>最后
以上就是稳重故事为你收集整理的前端存储——Cookie WebStorageCookie的特点：WebStorage分为 sessionStorage和locationStorage的全部内容，希望文章能够帮你解决前端存储——Cookie WebStorageCookie的特点：WebStorage分为 sessionStorage和locationStorage所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
发表评论 取消回复