信息在本地存储和跨页面传递---webStrStroage的方法

本文链接：https://blog.csdn.net/a12336487213/article/details/96452401

1.浏览器的支持性：

2.设置获取数据sessionStorage：用户会话期间有效关闭浏览器就会清除，实现跨页面访问，不存在客户机，不会泄露机密

localStorage：用户本地存储，比sessionStorage有效时间长

3.webStrStroage的方法：

4.实现设计二次打开记忆曾选择的皮肤功能

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>

<body onLoad="colorload();">
<script type="text/javascript">
if(typeof localStorage === 'undefined'){
	window.alert("您的浏览器不支持localStorage。");
	
	}else{
		window.alert("zhichi!");
		
	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 = value;
		window.localStorage.setItem("DivBackGroundColor", value);
		}
		
		
	function colorload(){
		document.getElementById("divblock").style.backgroundColor = window.localStorage.getItem("DivBackGroundColor");
		}
	}	
</script>
<sction id ="main">
<button id = "redbutton" onClick="redSet()">红色</button>
<button id = "greenbutton" onClick="greenSet()">绿色</button>
<button id = "bluebutton" onClick="blueSet()">蓝色</button>
<div id = "divblock" style="width:500px;height:500px;"></div>
</section>


</body>
</html>

5.h5中id和class属性的区别而id的功能，只有唯一性，在h4中输入id类名称，然后在css中对其添加属性值；id的使用方法类似，命名的时候，只是将class代替为id；在css样式中，注意class前面是点，而id前面是#。

如图，在body中随意建立h1-h5标签，
2

然后预览中，可以看到文字的效果，如图所示
3

然后我们在h1标签中做class属性命名.并加以修饰
4

然后预览效果后，就是这样的，现在只有对第一个h1改变了颜色
5

然后来验证class的重复性；在h3 和h5 都加入这个类名称
6

这时候保存回到浏览器中查看效果，就可以看到添加过类名称的几个标签都改变了字体颜色，这就是class的重复性
7

然后再来看他的多样性，在class后面空格后，在添加另一个名称happy，如图，然后再添加修饰
8

两个属性名称，都会对其发生作用。

两个属性名称，都会对其发生作用。
而id的功能，只有唯一性，在h4中输入id类名称，然后在css中对其添加属性值；id的使用方法类似，命名的时候，只是将class代替为id；在css样式中，注意class前面是点，而id前面是#。

6.设计计数器

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script type="text/javascript">
		if(localStorage.pagecount){
				localStorage.pagecount = Number(localStorage.pagecount) +1;
			}
		else{
			localStorage.pagecount = 1;
			}
		document.write("总访问数：<br />" +localStorage.pagecount);
		if(sessionStorage.pagecount){
			sessionStorage.pagecount = Number(sessionStorage.pagecount)+1;

			}
		else{
			sessionStorage.pagecount=1;
			}
			document.write("<br />当前会话访问数：<br />" +sessionStorage.pagecount);
</script>
</head>

<body>
</body>
</html>