JS 本地存储

最新推荐文章于 2024-05-08 17:57:05 发布

久醉呀

最新推荐文章于 2024-05-08 17:57:05 发布

阅读量528

点赞数 1

文章标签： javascript 前端

本文链接：https://blog.csdn.net/qq_35991442/article/details/126588730

版权

本地存储

因本地存储只接收字符串，所以存储的时候数组，对象等通常都是转化为字符串，取出的时候在转换为原来的样式

JSON.stringify() JSON.parse()

localStorage

localStorage:本地永久存储，除非手动删除

localStorage 存储变量

localStorage.setItem('name','张三');

localStorage.age=20;

localStorage 存储数组

var arr = [2,3,45];
localStorage.arr = JSON.stringify(arr);
console.log(JSON.parse(localStorage.arr));

localStorage 存储对象

var zs={'name':'张三','age':20}
localStorage.zs=JSON.stringify(zs);
console.log(JSON.parse(localStorage.zs));

localStorage 存储对象数组

var ary=[
	{'name':'张三','age':20},
	{'name':'李四','age':30}
]
localStorage.ary=JSON.stringify(ary);
console.log(JSON.parse(localStorage.arys));

取数据

//根据key获取value
console.log(localStorage.name);
console.log(JSON.parse(localStorage.getItem("arr")));
		  
//根据下标获取对应的key名
console.log(localStorage.key(3));
//根据key删除
localStorage.removeItem("age");
		  
//清空
localStorage.clear();

效果展示

sessionStorage

localStorage:永久存储，除非手动删除
sessionStorage:会话存储，关闭页面就会失效

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		用户名:<input type="text">
		<button>登录</button>
		<script>
			/* 
			localStorage:永久存储，除非手动删除
			sessionStorage:会话存储，关闭页面就会失效 
			*/
		   
		   // sessionStorage.name="张三";
		   localStorage.name="李四";
		   // localStorage.age=20;
		   
		   var _button=document.querySelector("button")
		   var _input=document.querySelector("input")
		   _button.onclick=function(){
			   location.href="./index.html";
			   // 将用户名存储到回话存储
			   sessionStorage.name=_input.value;
		   }
		</script>
	</body>
</html>

效果图：

cookie

ocalStorage:永久存储，除非手动删除
sessionStorage:会话存储，关闭页面就会失效
cookie:可以设置过期时间,如果不设置关闭浏览器就会失效。必须在服务器模式下执行。

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
			/*
			localStorage:永久存储，除非手动删除
			sessionStorage:会话存储，关闭页面就会失效 
			cookie:可以设置过期时间,如果不设置关闭浏览器就会失效。必须在服务器模式下执行。
			*/
		   //cookie存储数据
		   // document.cookie="name=张三;";
		   // document.cookie="age=20;";
		   /* 过期时间设置
		      max-age:秒 
			  expires:格林尼治时间
			  toUTCString()
			*/ 
		   document.cookie="pwd=123456;max-age=10"
		   document.cookie="height=183;max-age=60"
		   //10秒以后过期
		   var times=new Date(new Date().getTime()+10*1000);
		   times=times.toUTCString();
		   // document.cookie="hobby=购物;expires="+times
		   document.cookie=`hobby=购物;expires=${times}`
		   
		   //cookie删除
		    document.cookie="pwd=;max-age=0" 
		    document.cookie="hobby=;expires="+new Date().toUTCString();
			
			//cookie获取
			console.log(document.cookie);
			
		</script>
	</body>
</html>

效果图：

cookie封装

因为cookie取数据较为麻烦，所以人们通常封装cookie,为后续取数据节约时间

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
			//设置cookie
			function setCookie(key,value,exdays){
				var times=new Date().getTime()+exdays*24*60*60*1000;
				times=new Date(times).toUTCString();
				document.cookie=`${key}=${value};expires=${times}`
			}
			setCookie("name","张三",1)
			setCookie("age",20,1)
			
			//删除
			function delCookie(key){
				document.cookie=`${key}=;expires=${new Date().toUTCString()}`
			}
			// delCookie("age");
			
			//获取
			function  getCookie(key){
				// `name=张三;age=20;max-age=20`
				var str=document.cookie;
				//按照分号拆分为数组
				//["name=张三","age=20","max-age=20"]
				var arr=str.split(";");
				for (var item of arr) {
					var ary=item.split("="); //["name","张三"]
					console.log(ary[0]);
					if(ary[0].trim()==key){
						return ary[1];
					}
				}
			}
			console.log(getCookie("name"));
			console.log(getCookie("age"));
		</script>
	</body>
</html>