本地存储-（localStorage || sessionStorage）

最新推荐文章于 2024-05-25 15:15:13 发布

qq_39913441

最新推荐文章于 2024-05-25 15:15:13 发布

阅读量375

点赞数

本文链接：https://blog.csdn.net/qq_39913441/article/details/97163216

版权

本地存储-（localStorage || sessionStorage）

通过本地存储(Local Storage)，web 应用程序能够在用户浏览器中对数据进行本地的存储，包括localStorage和sessionStorage。

HTML5 Web 存储是以键/值对的形式存储的，通常以字符串存储。

1. localStorage

localStorage生命周期是永久，除非主动清除localStorage信息，否则这些信息将永远存在。

// 1、保存数据到本地
// 第一个参数是保存的变量名，第二个是赋给变量的值
 localStorage.setItem('Author', 'local');
 
// 2、从本地存储获取数据 
localStorage.getItem('Author');

// 3、从本地存储删除某个已保存的数据 
localStorage.removeItem('Author');

// 4、清除所有保存的数据
localStorage.clear();

2. sessionStorage

sessionStorage仅在当前会话下有效，关闭页面或浏览器后被清除。

// 1、保存数据到本地
// 第一个参数是保存的变量名，第二个是赋给变量的值 
sessionStorage.setItem('Author', 'session');

// 2、从本地存储获取数据
 sessionStorage.getItem('Author');
 
// 3、从本地存储删除某个已保存的数据 
sessionStorage.removeItem('Author');

// 4、清除所有保存的数据
sessionStorage.clear();

上面都是对于简单的数据类型的存储，但当要存储的数据是一个对
象或是数组的时候，直接存储是不行的。这个时候，就需要转换数据格
式。

存储数据前:利用JSON.stringify将对象转换成字符串
获取数据后:利用JSON.parse将字符串转换成对象

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			function check(){
				var username = document.getElementById("username").value;
				if(username){
					sessionStorage.setItem('username',username)
				}else{
					alert("请输入正确的用户名")
				}
			}
			function down(){
				var username = sessionStorage.getItem("username")
				document.getElementById("redown").value = username
			}
			//以上都是对简单的数据类型的存储,
			//当存储的数据是一个对象或者数组时,直接存储是不行的,需要转换数据格式
			//1. 存储数据前:利用JSON.stringify 将对象转换成字符串
			//2. 存储数据后:利用JSON.parse 将字符串转换成对象
			var user={ //对象
				username:'zhazhahui',
				password:'123456'
			};
			user = JSON.stringify(user);
			sessionStorage.setItem('user',user)
			var result = sessionStorage.getItem('user')
			console.log("获取")
			console.log(result)
			var result = JSON.parse(result)
			console.log(result)
//下面的是通过对象.属性 获取的，如果result只是字符串就不能实现 result.name
			console.log(result.username)
			console.log(result.password)
			
		</script>
	</head>
	<body>
		<input type="text" id="redown" />
		<input type="button" value="从本地获取数据" onclick="down()" />
	</body>
</html>

第一个conslole为字符串，第二个conslole为对象在这里插入图片描述

qq_39913441

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
本地存储-（localStorage || sessionStorage）

本地存储-（localStorage || sessionStorage）通过本地存储(Local Storage)，web 应用程序能够在用户浏览器中对数据进行本地的存储，包括localStorage和sessionStorage。HTML5 Web 存储是以键/值对的形式存储的，通常以字符串存储。1. localStoragelocalStorage生命周期是永久，除非主动清除loc...
复制链接

扫一扫