<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	 <style>
			.box{
				width: 500px;
				margin: 60px auto;
			}
		</style>
	</head>
	<body>
	  <div class="box">
			<label for="search">搜索</label>
			<input type="text" name="" id="search"  value="">
			<br>
			<h1 id="r"></h1>
		</div>
		<script>
			// 抓取元素
			var search = document.querySelector('#search');
			var r = document.querySelector('#r');
			
			console.log(search,r);
			
			search.onchange = function(){
				console.log(this.value);
				// 保存数据
				localStorage.setItem('mysearch',this.value);
			}
			
			window.onload = function(){
				// 读取数据
				r.innerHTML = localStorage.getItem('mysearch');
			}
			
		</script>
	</body>
</html>

预览效果

 

Logo

Agent 垂直技术社区,欢迎活跃、内容共建。

更多推荐