【API五.2】本地存储（重点）_api本地存储-CSDN博客

本文链接：https://blog.csdn.net/weixin_54806335/article/details/129870885

文章介绍了HTML5为解决网页应用数据存储问题提供的解决方案，重点讲解了localStorage的使用，包括存储、获取、删除和修改数据的方法。同时提到了sessionStorage的特点和生命周期。对于存储复杂数据类型，文章建议将数据转换为JSON字符串进行操作。

摘要由CSDN通过智能技术生成

1.1介绍

以前我们写的页面数据一刷新就没有了，随着互联网的快速发展，基于网页的应用越来越普遍，也越来越复杂。为了满足各种各样的需求，会经常在本地存储大量数据，html5规范提出了相关解决方案。

①数据存储在用户浏览器中

②设置、读取方便、甚至页面刷新不丢失数据

③容量大

1.2本地存储分类-localStorage (只能存储字符串类型！存储18会变成‘18’) ，重点使用

作用：可以将数据永久存储在本地（用户电脑），除非手动删除，否则关闭页面也会存在

特性：①可以多窗口（页面）共享（同一浏览器可以共享）

②以 ' 键 ' , ' 值 ' 对的形式存储使用存储数据

1.2.1存储数据

localStorage.setItem('key','value')

1.2.2获取数据

localStorage.getItem('key')

1.2.3删除数据

localStorage.removeItem('key')

1.2.4修改数据

localStorage.setItem('uname', 'key')

<body>
	<script>
		//1.存储一个名字
		localStorage.setItem('uname', '乌拉拉')
		//2.获取一个名字
		console.log(localStorage.getItem('uname'))
		//3.删除本地存储，只删除名字
		localStorage.removeItem('uname')
		//4.修改
		localStorage.setItem('uname', '城邦')
	</script>
</body>

1.3本地存储分类-sessionStorage ，了解

特性：①在同一个窗口（页面）下数据共享

②以 ' 键 ' , ' 值 ' 对的形式存储使用存储数据

③生命周期为关闭浏览器窗口

④用法跟localStorage相同

1.4存储复杂数据类型

问题：本地只能存储字符串，无法存储复杂数据类型

解决：将复杂数据类型转换为JSON字符串再存储到本地

语法：JSON.stringify（复杂数据类型）

得到 JSON对象/JSON字符串 (用双引号扩起)

<body>
	<script>
		const obj = {
			uname: '乌拉拉',
			age: 18,
			gender: '女'
		}
		//1.转换为JSON字符串存储
		localStorage.setItem('obj', JSON.stringify(obj))
		//取 ,一定加引号,得到JSON字符串（无法直接使用）
		//console.log(localStorage.getItem('obj')) //{"uname":"乌拉拉","age":18,"gender":"女"}
		//2.把 JSON字符串 转换为 对象 （才能使用）
		console.log(JSON.parse(localStorage.getItem('obj')))//Object { uname: "乌拉拉", age: 18, gender: "女" }
        //或者这样写
	    //const str = localStorage.getItem('obj')
	    //console.log(JSON.parse(str))

	</script>
</body>