前端学习笔记一、三：JavaScript + html5（1）数组 + web本地存储

最新推荐文章于 2023-09-16 09:17:09 发布

大一哟

最新推荐文章于 2023-09-16 09:17:09 发布

阅读量234

点赞数

分类专栏：学习笔记文章标签： html5 css

本文链接：https://blog.csdn.net/Reiuji_Utsuho/article/details/107677034

版权

学习笔记专栏收录该内容

33 篇文章 1 订阅

订阅专栏

这篇博客探讨了JavaScript中的数组操作，并验证了HTML5的Web本地存储功能。通过示例代码展示了如何使用数组以及如何利用Web本地存储进行数据的存储和查询，为前端开发提供了实用的知识。

摘要由CSDN通过智能技术生成

开一个新分类，命名和内容如题。

第一个是js09，关于数组的，还有就是验证一下能不能用web本地存储：
代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	
	</head>
	
	<body>
		<p id="sens1"> </p>
		<script type="text/javascript">
			if(typeof(Storage)!=="undefined")
			{
			    // 是的! 支持 localStorage  sessionStorage 对象!
			    alert("可以使用web存储！")
			} else {
			    // 抱歉! 不支持 web 存储。
				alert("oops! 不可以使用web存储。")
				
			}
			
			var sth = new Array();
			sth[0] = "I didn't ask for a free ride."
			sth[1] = "You didn't show up and show me a real good time."
			sth[2] = "I didn't ask for a rainfall."
			sth[3] = "At least you show up and show me nothing at all."
			
			document.writeln(sth[0]);
			document.writeln(typeof sth[0]);
			
			for (var i = 0; i < sth.length; i++)
				document.getElementById("sens1").innerHTML += sth[i] + "</br>";		</script>
	</body>
</html>

运行结果：
在这里插入图片描述

然后是web本地存储。
这个例子，就叫“360导航青春版”：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style type="text/css">
		*{
			padding: 0;
			margin: 0;
		}
		#inputFrame{
			width: 60%;
			margin: auto;
			overflow: auto;
		}
		#inputSite{
			padding-top: 15px;
			margin: auto;
			float: left;
			width: 400px;
			height: 135px;
			border: #050B80 dotted 5px;
			border-radius: 10px;
			text-align: center;
			margin-right: 20px;
			margin-left: 150px;
		}
		#search{
			margin: auto;
			text-align: center;
			padding-top: 15px;
			float: left;
			width: 400px;
			height: 135px;
			border: #050B80 dotted 5px;
			border-radius: 10px;
			align-self: auto;
			margin-left: 20px;
		}
		#listFrame{
			padding-top: 20px;
			margin: auto;
			overflow: auto;
			width: 500px;
		}
		#listFrame #list{
		}
	</style>
	<body>
		<div id="inputFrame">
			<div id="inputSite">
				<div class="title">
					新建网址
				</div>
				<span>
					网址名（key）：
					<input type="text" id="webKey"  /><br/>
				</span>
				<span>
					网址（value）：
					<input type="text" id="address" /><br/>
				</span>
				<button type="button" onclick="save()">新建</button>
			</div>
			<div id="search">
				<div class="title">
					查询网址
				</div>
				<div id="input">
					<span>
						网址名（key）：
						<input type="text" id="searchKey" /><br/>
					</span>
					<button type="button" onclick="find()">查找</button>
					<p id="result"></p>
				</div>
			</div>
		</div>
		<div id="listFrame">
			<div id="list">
				
			</div>
		</div>
		
		<script type="text/javascript">
			loadAll();
			function save(){
				var siteName = document.getElementById("webKey").value;
				var siteUrl = document.getElementById("address").value;
				
				localStorage.setItem(siteName,siteUrl);
				
				alert("提交成功！");
			}
			function find(){
				var siteName = document.getElementById("searchKey").value;
				var siteUrl = localStorage.getItem(siteName);
				
				var findResult = document.getElementById("result");
				findResult.innerHTML = siteName + "的网址是：" + siteUrl;
				}
			function loadAll(){
				var result = document.getElementById("list");
				if (localStorage.length > 0)
				{
					var list = "<table border='2px' cellspacing='0' style='text-align: center;'>";
					list += "<tr> <td>网址名(key) </td> <td>网址(value)</td></tr>"
					for (i = 1; i < localStorage.length; i++)
					{
						var site = localStorage.key(i);
						var url = localStorage.getItem(site);
						
						list += "<tr> <td>" + site + "</td> <td>" + url + "</td></tr>";
					}
					list += "</table>";
					result.innerHTML = list;
				}
				else{
					result += "当前表格没有网址！"
				}	
			}	
		</script>
	</body>
</html>