JS将对象数组保存在cookie中

最新推荐文章于 2024-08-08 18:34:38 发布

小二，，来杯咖啡

最新推荐文章于 2024-08-08 18:34:38 发布

阅读量4.4k

点赞数 7

文章标签： javascript jquery json cookie

本文链接：https://blog.csdn.net/qq_45316925/article/details/121957806

版权

这篇博客演示了如何使用jQuery Cookie库进行设置、读取和删除Cookie的操作。通过示例代码，展示了如何将对象数组转换为JSON并存储，然后读取并解析回对象数组。点击按钮可触发相应功能，提供了前端开发中处理Cookie的基本方法。

摘要由CSDN通过智能技术生成

首先需要引入 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>