前端存储——Cookie WebStorage

最新推荐文章于 2024-05-28 14:12:23 发布

桃子耶耶

最新推荐文章于 2024-05-28 14:12:23 发布

阅读量880

点赞数 1

文章标签：前端服务器 javascript

本文链接：https://blog.csdn.net/m0_46677484/article/details/126630035

版权

前端cookie和Webstorage存储

方法：

Cookies.get() 获取cookie 参数:键名/属性名

Cookies.set() 设置cookie 参数:key value

Cookies.remove() 移除cookie remove参数:属性名

设置过期时间expires

WebStorage分为 sessionStorage和locationStorage

clear(); 参数:无清除所有得会话存储

removeItem(key) 清除key对应的会话存储

locationStorage 本地存储

方法：

getItem(key)

setItem(key,value)removeItem(key)

clear()

前端cookie和Webstorage存储

产生于服务器端，保存在客户端。
同一服务器下的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>