H5——webStorage

最新推荐文章于 2024-03-04 10:38:32 发布

转载最新推荐文章于 2024-03-04 10:38:32 发布 · 287 阅读

文章标签：

#html5 webStorage

js 同时被 2 个专栏收录

137 篇文章

订阅专栏

HTML5

9 篇文章

订阅专栏

sessionStorage:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<script>
		sessionStorage["name"]="abc";
		sessionStorage.setItem("age",20);
	</script>
	<a href="storage2.html">读取数据</a>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<script>
		var name=sessionStorage["name"];
		console.log(name);
		var age=sessionStorage.getItem("age");
		console.log(age);
		console.log(sessionStorage.length);//2
		console.log(sessionStorage.key(1));//name

		sessionStorage.removeItem("name");
	</script>
</body>
</html>

---------------------------------------------------------------------------------

localStorage:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<script>
		localStorage.setItem("bookname","js权威指南");
		localStorage["price"]=50.00;
	</script>
	<a href="storage4.html">读取数据</a>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<script>
		var name=localStorage.getItem("bookname");
		console.log(name);
		var price=localStorage.getItem("price");
		console.log(price);
	</script>
</body>
</html>

-----------------------------------------------------------------------------------

localStorage(2):

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.blue{
			background: blue;
		}
		.red{
			background: red;
		}
		.dark{
			background: #000;
		}
	</style>
</head>
<body>
	<select name="" id="selectTheme">
		<option value="blue">蔚蓝天空</option>
		<option value="red">芭比公主</option>
		<option value="dark">暗黑主题</option>
	</select>

	<script>
		function getId(id){
			return document.getElementById(id);
		}
		var select=getId("selectTheme");
		select.onchange=function(){
			document.body.className=this.value;
			localStorage.setItem("userStyle",this.value);
		}
	</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		body{
			color: #FFF;
		}
		.blue{
			background: blue;
		}
		.red{
			background: red;
		}
		.dark{
			background: #000;
		}
	</style>
</head>
<body>
	<h2>用户中心</h2>
	<script>
		var className=localStorage.getItem("userStyle");
		console.log(className);
		if(className){
			document.body.className=className;
		}

		//监听事件
		window.onstorage=function(){
			var className=localStorage.getItem("userStyle");
			document.body.className=className;
		}
	</script>
</body>
</html>