关于本地缓存localstorage与sessionStorage 数组 (array)字符串(string) 对象(object)的存储技巧和注意事项-阿里云开发者社区

开发者社区> 开发与运维> 正文
登录阅读全文

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

简介: localstorage与sessionStorage的使用方法都是一样的 唯一的区别在与 localstorage是永久储存在你的计算机上  sessionstorage只要浏览器关闭,存储就消失 <!DOCTYPE html> <html> <head> <title>本地缓存</title> </head&g

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>

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

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章
最新文章
相关文章