JS将对象数组保存在cookie中

首先需要引入 cookie的 js文件

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-y6w2qcFh-1639561017033)(功能.assets/image-20211215171112695.png)]

cookie文档：https://github.com/carhartl/jquery-cookie

cookie下载地址：https://github.com/carhartl/jquery-cookie/releases/tag/v1.4.1

在这里插入图片描述

下面进行演示设置cookie、获取cookie、删除cookie 。上代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="js/jquery.min.js"></script>
		<script src="js/jquery.validate.js"></script>
		<script src="js/jquery.cookie-1.4.1.min.js"></script>
		<title></title>
	</head>
	<body>
		<input type="button" value="设置cookie" onclick="setCookie()" />
		<input type="button" value="读取cookie" onclick="getCookie()" />
		<input type="button" value="删除cookie" onclick="removeCookie()" />
	</body>
	<script>
		function setCookie(){
      
      
			//声明一个对象数组
			var people = [
			   {
      
       'name' : 'Abel', 'age' : 1 },
			   {
      
       'name' : 'Bella', 'age' : 2 },
			   {
      
       'name' : 'Chad', 'age' : 3 },
			];
			//存cookie只能存json格式，所以需要将对象数组转成json格式
			var jj = JSON.stringify(people)
			//设置cookie ：第一个参数为 key，需要取cookie就是用这个key来取
						//第二个参数就是你所存进去的数据
						//第三个参数就是设置cookie的过期时间，单位为 天 
			$.cookie("people", jj ,{
      
      expires : 1});
		}
		
		function getCookie(){
      
      
			//读取cookie ，参数就是你存储cookie时所设置的key
			$.cookie('people')
			console.log($.cookie('people')) //输出cookie，是json格式的数据
			
			//将json转成对象、对象数组
			var aa = $.cookie('people')
			var bb = JSON.parse(aa)
			console.log(bb);
		}
		
		function removeCookie(){
      
      
			//删除cookie
			$.removeCookie('people')
		}
	</script>
</html>

访问浏览器效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cV4luWeo-1639561017036)(功能.assets/image-20211215173321969.png)]

JS将对象数组保存在cookie中

猜你喜欢