css3 localStorage 设计网页皮肤

最新推荐文章于 2019-02-27 03:00:18 发布

weixin_34122604

最新推荐文章于 2019-02-27 03:00:18 发布

阅读量90

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/mingjixiaohui/p/5364065.html

本文介绍了一个简单的HTML页面，该页面使用JavaScript和localStorage来保存和加载网页中div元素的背景颜色设置。用户可以通过点击按钮选择不同的颜色（红、绿、蓝），所选颜色将被保存在浏览器的localStorage中，并在页面重新加载时恢复。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body onload="colorload();">
	<script>
		if(typeof localStorage === 'undefiend'){
			window.alert("you brower 不支持 localStorage");
		}else{
			window.alert("you brower 支持 localStorage");

			var storage = localStorage;
			function redSet(){

				var value = 'red';
				document.getElementById("divblock").style.backgroundColor = value;

				window.localStorage.setItem('DivBackGroundColor',value);
			}
			function greenSet(){
				var value="green";
				document.getElementById("divblock").style.backgroundColor = value;
				window.localStorage.setItem("DivBackGroundColor",value);
			}
			function blueSet(){
				var value = "blue";
				document.getElementById("divblock").style.backgroundColor = "blue";
				window.localStorage.setItem("DivBackGroundColor",value);
			}

			function colorload(){
				document.getElementById(
					"divblock").style.backgroundColor = window.localStorage.getItem("DivBackGroundColor");
			}
		}
	</script>
	<button id="redbtton" onclick="redSet()">红色</button>
	<button id="redbtton" onclick="greenSet()">绿色</button>
	<button id="redbtton" onclick="blueSet()">蓝色</button>
	<div id="divblock" style="width:500px;height:500px;"></div>
</body>
</html>

转载于:https://www.cnblogs.com/mingjixiaohui/p/5364065.html