Web存储

最新推荐文章于 2019-08-09 21:58:38 发布

_xw2018

最新推荐文章于 2019-08-09 21:58:38 发布

阅读量121

点赞数

分类专栏： JavaScript入门

本文链接：https://blog.csdn.net/sm20170867238/article/details/92830445

版权

JavaScript入门专栏收录该内容

25 篇文章 1 订阅

订阅专栏

sessionStorage的使用：
（1）数据存储到当前页面，存储容量5mb左右。
（2）同一个浏览器不同页面无法共享数据。
生命周期：关闭当前页面就清除。
相关函数：
setItem(key,value); //以键值对的方式存储数据
getItem(key); //通过key获取对应的value值
removeItem(key); //通过key删除对应的value值
clear(); //清空所有存储的内容

<!DOCTYPE html>
<html>
	<head>
		<title>sessionStorage的使用</title>
		<meta charset="utf-8" />
	</head>
	<body>
		<input type="text" id="username" /><br/><br/>
		<input type="button" value="保存数据" id="save" />
		<input type="button" value="获取数据" id="get" />
		<input type="button" value="删除数据" id="del" />
	</body>
	<script>
		document.querySelector("#save").onclick=function(){
			var name=document.querySelector("#username").value;
			window.sessionStorage.setItem("username",name);
		}
		document.querySelector("#get").onclick=function(){
			var data=window.sessionStorage.getItem("username");
			alert(data);
		}
		document.querySelector("#del").onclick=function(){
			window.sessionStorage.removeItem("username");
		}
	</script>
</html>

localStorage的使用：
（1）存储在硬盘上，存储容量20mb左右。
（2）同一个浏览器不同窗口可以共享数据。
生命周期：永久保存，存储在硬盘上，不会随着当前页面关闭而清除。
相关函数：
setItem(key,value); //以键值对的方式存储数据
getItem(key); //通过key获取对应的value值
removeItem(key); //通过key删除对应的value值
clear(); //清空所有存储的内容

<!DOCTYPE html>
<html>
	<head>
		<title>sessionStorage的使用</title>
		<meta charset="utf-8" />
	</head>
	<body>
		<input type="text" id="username" /><br/><br/>
		<input type="button" value="保存数据" id="save" />
		<input type="button" value="获取数据" id="get" />
		<input type="button" value="删除数据" id="del" />
	</body>
	<script>
		document.querySelector("#save").onclick=function(){
			var name=document.querySelector("#username").value;
			window.localStorage.setItem("username",name);
		}
		document.querySelector("#get").onclick=function(){
			var data=window.localStorage.getItem("username");
			alert(data);
		}
		document.querySelector("#del").onclick=function(){
			window.localStorage.removeItem("username");
		}
	</script>
</html>