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

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

目录
相关文章
|
19天前
|
JavaScript 前端开发 开发者
|
3月前
|
JavaScript 前端开发
JavaScript基础&实战(5)js中的数组、forEach遍历、Date对象、Math、String对象
这篇文章介绍了JavaScript中的数组、Date对象、Math对象以及包装类(String、Number、Boolean),并详细讲解了数组的创建、方法(如forEach、push、pop、unshift、slice、splice)和遍历操作,以及工厂方法创建对象和原型对象的概念。
JavaScript基础&实战(5)js中的数组、forEach遍历、Date对象、Math、String对象
|
3月前
|
存储 Java 编译器
String能存储多少个字符
String能存储多少个字符
|
5月前
|
存储 算法 搜索推荐
深入解析String数组的操作与性能优化策略
深入解析String数组的操作与性能优化策略
|
4月前
|
存储 Java 数据处理
定义和使用String数组
定义和使用String数组
|
4月前
|
存储 缓存 算法
同时使用线程本地变量以及对象缓存的问题
【7月更文挑战第15天】同时使用线程本地变量和对象缓存需小心处理以避免数据不一致、竞争条件及内存泄漏等问题。线程本地变量使各线程拥有独立存储,但若与对象缓存关联,可能导致多线程环境下访问旧数据。缺乏同步机制时,多线程并发修改缓存中的共享对象还会引起数据混乱。此外,若线程结束时未释放对象引用,可能导致内存泄漏。例如,在Web服务器场景下,若一更新缓存而另一线程仍获取旧数据,则可能返回错误信息;在图像处理应用中,若多线程无序修改算法对象则可能产生错误处理结果。因此,需确保数据一致性、避免竞争条件并妥善管理内存。
|
6月前
|
存储 Java 编译器
String能存储多少个字符?
这篇内容讨论了Java中String的长度限制。编译时,如果字符串长度大于等于65535,编译器将报错。这是由于`CONSTANT_Utf8`常量池项的长度字段是16位无符号整数,最大值为65535。而在运行时,虽然理论上String的最大长度是2^31-1,但实际长度受限于JVM内存,最大可能占用约2GB内存,超过可能导致OutOfMemoryError。JDK9以后,对于LATIN1字符的字符串,存储优化使用byte数组,节省内存。
357 1
String能存储多少个字符?
|
4月前
|
存储 缓存 算法
Java面试题:给出代码优化的常见策略,如减少对象创建、使用缓存等。
Java面试题:给出代码优化的常见策略,如减少对象创建、使用缓存等。
63 0
|
5月前
|
存储 Java API
JavaSE——常用API(2/3)-String使用时的注意事项、String的应用案例
JavaSE——常用API(2/3)-String使用时的注意事项、String的应用案例
42 1
|
4月前
|
存储 NoSQL Redis
Redis07命令-String类型字符串,不管是哪种格式,底层都是字节数组形式存储的,最大空间不超过512m,SET添加,MSET批量添加,INCRBY age 2可以,MSET,INCRSETEX
Redis07命令-String类型字符串,不管是哪种格式,底层都是字节数组形式存储的,最大空间不超过512m,SET添加,MSET批量添加,INCRBY age 2可以,MSET,INCRSETEX