关于本地缓存localstorage与sessionStorage 数组（array）字符串（string）对象（object）的存储技巧和注意事项

最新推荐文章于 2024-03-28 22:36:57 发布

牛长犇

最新推荐文章于 2024-03-28 22:36:57 发布

阅读量1.1w

点赞数 7

分类专栏： js基础 leon前端进阶之路文章标签： localstorage 存储缓存 sessionstirage 对象

本文链接：https://blog.csdn.net/wxl1555/article/details/52666217

版权

leon前端进阶之路同时被 2 个专栏收录

70 篇文章 7 订阅

订阅专栏

js基础

50 篇文章 7 订阅

订阅专栏

localstorage与sessionStorage的使用方法都是一样的

唯一的区别在与 localstorage是永久储存在你的计算机上

sessionstorage只要浏览器关闭，存储就消失

<!DOCTYPE html>
<html>
<head>
	<title>本地缓存</title>
</head>
<body>

</body>
	<script type="text/javascript">
	//储存一个数组到本地缓存数组
	var a = [1,2,3]
	console.log(typeof a)  //object
	//储存
	sessionStorage.setItem("sa",a);
	//取出  并用a1接收这个值
	var a1 = sessionStorage.getItem("sa")

	//打印a1的数据类型
	console.log( typeof a1);//结果为string


	//取出来不能当做数组用，必须得把字符串转换成数组
	console.log(a1.split(",")) //  ["1", "2", "3"] 转换为“,”隔开的数组,其数组元素还是字符串，
								//用之前先转换为Number类型,-0或者*1即可转换为Number类型
	
	// console.log(JSON.parse(a1))  //这一行就会报错  因为a1本来就不是json串类型的数据，
	//他只能转换JSon串类型的数据

	//若储存前先转换为json串类型
	var b = [1,2,3]

	//转换为Json串
	var b1 = JSON.stringify(b); 
	sessionStorage.setItem("sb",b1);

	var b2 = sessionStorage.getItem("sb");

	console.log( typeof b2) //string 
	console.log( typeof JSON.parse(b2)) // object
	console.log( typeof JSON.parse(b2)[2])  //number
	console.log(  JSON.parse(b2)) //[1,2,3]
	console.log(JSON.parse(b2)[1])  //数组的第二个元素2

	//总结 1、 存储前转换为json串的形式，取出后转换为json对象形式可以当做数组直接用；
	//     2、无论存储前是什么数据类型  取出来之后他都会是一个字符串（string）类型
	//     3、存储字符串时，取出来就直接可以用。
	//     4、特别注意，当你存储一个对象的时候，必须先转换为json串存储，不然对象就没法用了
	


	//看下面的demo
	var c = {
		name:"name",
		age:18,
		love:"美女"
	}

	sessionStorage.setItem("sc",c);

	var c1 = sessionStorage.getItem("sc");

	console.log(typeof c1)  //string

	console.log(c1) // [object object]
	console.log(c1.anme) //undefined

	//是不是要转换为json对象  我们试试
	// var c2 = JSON.parse(c1);   //直接报错    继续向下看
	
	//存储前转换为json串

	var d = {
		name:"name",
		age:18,
		love:"美女"
	}

	var e = JSON.stringify(d)
	sessionStorage.setItem("sd",e);

	var d1 = sessionStorage.getItem("sd");

	console.log(typeof d1)  //string

	console.log(d1) // {"name":"name","age":18,"love":"美女"}
	console.log(d1.anme) //undefined

	var f = JSON.parse(d1)
	console.log(f)  //Object {name: "name", age: 18, love: "美女"}
	console.log(f.age) //18

	</script>
</html>

下面在看看存储进去的数值到底是什么，在控制台的

牛长犇

关注

7
点赞
踩
7

收藏

觉得还不错? 一键收藏
2
评论
关于本地缓存localstorage与sessionStorage 数组（array）字符串（string）对象（object）的存储技巧和注意事项

localstorage与sessionStorage的使用方法都是一样的唯一的区别在与 localstorage是永久储存在你的计算机上 sessionstorage只要浏览器关闭，存储就消失本地缓存 //储存一个数组到本地缓存数组 var a = [1,2,3] console.log(typeof a) //object //储存 sessionS
复制链接

扫一扫