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

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

目录
相关文章
|
2月前
|
测试技术 PHP 开发者
PHP 数组查找:为什么 `isset()` 比 `in_array()` 快得多?
PHP 数组查找:为什么 `isset()` 比 `in_array()` 快得多?
|
4月前
|
消息中间件 缓存 NoSQL
基于Spring Data Redis与RabbitMQ实现字符串缓存和计数功能(数据同步)
总的来说,借助Spring Data Redis和RabbitMQ,我们可以轻松实现字符串缓存和计数的功能。而关键的部分不过是一些"厨房的套路",一旦你掌握了这些套路,那么你就像厨师一样可以准备出一道道饕餮美食了。通过这种方式促进数据处理效率无疑将大大提高我们的生产力。
182 32
|
6月前
|
人工智能 Java
Java 中数组Array和列表List的转换
本文介绍了数组与列表之间的相互转换方法,主要包括三部分:1)使用`Collections.addAll()`方法将数组转为列表,适用于引用类型,效率较高;2)通过`new ArrayList&lt;&gt;()`构造器结合`Arrays.asList()`实现类似功能;3)利用JDK8的`Stream`流式计算,支持基本数据类型数组的转换。此外,还详细讲解了列表转数组的方法,如借助`Stream`实现不同类型数组间的转换,并附带代码示例与执行结果,帮助读者深入理解两种数据结构的互转技巧。
346 1
Java 中数组Array和列表List的转换
|
6月前
|
JavaScript 前端开发 API
JavaScript中通过array.map()实现数据转换、创建派生数组、异步数据流处理、复杂API请求、DOM操作、搜索和过滤等,array.map()的使用详解(附实际应用代码)
array.map()可以用来数据转换、创建派生数组、应用函数、链式调用、异步数据流处理、复杂API请求梳理、提供DOM操作、用来搜索和过滤等,比for好用太多了,主要是写法简单,并且非常直观,并且能提升代码的可读性,也就提升了Long Term代码的可维护性。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
6月前
|
Java 开发者
课时45:String对象常量池
本次课程的主要讨论了对象池的概念及其在Java开发中的应用。首先,介绍了静态常量池和运行时常量池的区别。讨论了静态常量池和运行时常量池在实际开发中的作用,以及如何理解和应用这些概念。 1.常量池的分类 2.静态常量池和运行时常量池的区别
|
6月前
|
存储 JavaScript Java
课时44:String类对象两种实例化方式比较
本次课程的主要讨论了两种处理模式在Java程序中的应用,直接赋值和构造方法实例化。此外,还讨论了字符串池的概念,指出在Java程序的底层,DOM提供了专门的字符串池,用于存储和查找字符串。 1.直接赋值的对象化模式 2.字符串池的概念 3.构造方法实例化
|
9月前
|
存储 Go 索引
go语言中的数组(Array)
go语言中的数组(Array)
196 67
|
6月前
|
移动开发 运维 供应链
通过array.some()实现权限检查、表单验证、库存管理、内容审查和数据处理;js数组元素检查的方法,some()的使用详解,array.some与array.every的区别(附实际应用代码)
array.some()可以用来权限检查、表单验证、库存管理、内容审查和数据处理等数据校验工作,核心在于利用其短路机制,速度更快,节约性能。 博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
6月前
|
供应链 JavaScript 前端开发
通过array.every()实现数据验证、权限检查和一致性检查;js数组元素检查的方法,every()的使用详解,array.some与array.every的区别(附实际应用代码)
array.every()可以用来数据验证、权限检查、一致性检查等数据校验工作,核心在于利用其短路机制,速度更快,节约性能。 博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
6月前
|
Web App开发 存储 前端开发
别再用双层遍历循环来做新旧数组对比,寻找新增元素了!使用array.includes和Set来提升代码可读性
这类问题的重点在于能不能突破基础思路,突破基础思路是从程序员入门变成中级甚至高级的第一步,如果所有需求都通过最基础的业务逻辑来做,是得不到成长的。 博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~