<!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>
预览效果