关于本地缓存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>

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

目录
相关文章
|
3月前
|
Python
Python中的f-string:更优雅的字符串格式化
Python中的f-string:更优雅的字符串格式化
326 100
|
3月前
|
开发者 Python
Python中的f-string:高效字符串格式化的利器
Python中的f-string:高效字符串格式化的利器
440 99
|
3月前
|
Python
Python中的f-string:更优雅的字符串格式化
Python中的f-string:更优雅的字符串格式化
|
3月前
|
开发者 Python
Python f-string:高效字符串格式化的艺术
Python f-string:高效字符串格式化的艺术
|
4月前
|
Python
Python中的f-string:更简洁的字符串格式化
Python中的f-string:更简洁的字符串格式化
287 92
|
5月前
|
自然语言处理 Java Apache
在Java中将String字符串转换为算术表达式并计算
具体的实现逻辑需要填写在 `Tokenizer`和 `ExpressionParser`类中,这里只提供了大概的框架。在实际实现时 `Tokenizer`应该提供分词逻辑,把输入的字符串转换成Token序列。而 `ExpressionParser`应当通过递归下降的方式依次解析
339 14
|
7月前
|
缓存 NoSQL 关系型数据库
美团面试:MySQL有1000w数据,redis只存20w的数据,如何做 缓存 设计?
美团面试:MySQL有1000w数据,redis只存20w的数据,如何做 缓存 设计?
美团面试:MySQL有1000w数据,redis只存20w的数据,如何做 缓存 设计?
|
2月前
|
缓存 负载均衡 监控
135_负载均衡:Redis缓存 - 提高缓存命中率的配置与最佳实践
在现代大型语言模型(LLM)部署架构中,缓存系统扮演着至关重要的角色。随着LLM应用规模的不断扩大和用户需求的持续增长,如何构建高效、可靠的缓存架构成为系统性能优化的核心挑战。Redis作为业界领先的内存数据库,因其高性能、丰富的数据结构和灵活的配置选项,已成为LLM部署中首选的缓存解决方案。
|
3月前
|
存储 缓存 NoSQL
Redis专题-实战篇二-商户查询缓存
本文介绍了缓存的基本概念、应用场景及实现方式,涵盖Redis缓存设计、缓存更新策略、缓存穿透问题及其解决方案。重点讲解了缓存空对象与布隆过滤器的使用,并通过代码示例演示了商铺查询的缓存优化实践。
192 1
Redis专题-实战篇二-商户查询缓存