前端存储——Cookie WebStorage

女爷i 2024-04-07 11:38 85阅读 0赞

**目录**

前端cookie和Webstorage存储

Cookie的特点：

方法：

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

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

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

设置过期时间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存储 ####

![77375aff1b63436fb701bd4758bae0f7.png][]

## Cookie的特点： ##

1.  产生于服务器端，保存在客户端。
2.  同一服务器下的cookie共享的。
3.  传输数据最大为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>
    	
    	
    	<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>

[77375aff1b63436fb701bd4758bae0f7.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/5fe44deee5a04e31b82f7c56a41ccd0c.png