搜索记录的实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
header {
box-sizing: border-box;
padding: 5px 10px;
border-bottom: 1px solid #ccc;
}
header::after {
content: "";
display: block;
height: 0;
clear: both;
}
header button {
float: right;
background-color: red;
color: #fff;
border-radius: 5px;
}
main {
box-sizing: border-box;
padding: 5px 10px;
}
main > div:first-child span {
float: right;
}
main > div:first-child::after {
content: "";
display: block;
height: 0;
clear: both;
}
ul {
margin: 10px 0;
}
ul li {
float: left;
margin-right: 10px;
margin-bottom: 10px;
padding: 4px 2px;
background-color: #cccccc;
color: #fff;
border-radius: 5px;
}
</style>
</head>
<body>
<header>
<input id="searchInput" type="search" placeholder="程序员发量十足" />
<button id="searchBtn">搜索</button>
</header>
<main>
<div>
<strong>搜索记录</strong>
<span>清空</span>
</div>
<ul id="list"></ul>
</main>
<script src="./WEB存储技术/util.js"></script>
<script>
// 功能一：搜索后点击搜索按钮，将值存储到本地
// 思路：
// 1.获取相关节点searchInput,searchBtn
const searchInput = document.querySelector("#searchInput");
const searchBtn = document.querySelector("#searchBtn");
console.log(searchInput, searchBtn);
// 2.给searchBtn绑定点击事件
searchBtn.addEventListener("click", function () {
console.log(searchInput.value);
const localHistory = local.getItem("history") || [];
localHistory.unshift(searchInput.value);
local.setItem("history", localHistory);
render();
});
// 功能二：根据本地存储的值渲染ul下面的li
render();
// 思路：
// 1.完成基本功能
// 2.确定函数名--render
// 3.确定函数参数--不需要
// 4.确定函数返回值--不需要
// 5.将功能代码放入函数壳子，替换对应的变量
function render() {
// 1.获取相关节点
const list = document.querySelector("#list");
// 2.获取本地存储的值
const localHistory = local.getItem("history") || [];
console.log("本地值", localHistory);
// 3.遍历数组将值拼接为html结构
let html = "";
localHistory.forEach(function (v) {
html += `<li>${v}</li>`;
});
// 4.将html放入ul
list.innerHTML = html;
}
// 6.调用测试
// 7.优化代码
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
header {
box-sizing: border-box;
padding: 5px 10px;
border-bottom: 1px solid #ccc;
}
header::after {
content: "";
display: block;
height: 0;
clear: both;
}
header button {
float: right;
background-color: red;
color: #fff;
border-radius: 5px;
}
main {
box-sizing: border-box;
padding: 5px 10px;
}
main > div:first-child span {
float: right;
}
main > div:first-child::after {
content: "";
display: block;
height: 0;
clear: both;
}
ul {
margin: 10px 0;
}
ul li {
float: left;
margin-right: 10px;
margin-bottom: 10px;
padding: 4px 2px;
background-color: #cccccc;
color: #fff;
border-radius: 5px;
}
</style>
</head>
<body>
<header>
<input id="searchInput" type="search" placeholder="程序员发量十足" />
<button id="searchBtn">搜索</button>
</header>
<main>
<div>
<strong>搜索记录</strong>
<span>清空</span>
</div>
<ul id="list"></ul>
</main>
<script src="./WEB存储技术/util.js"></script>
<script>
// 功能一：搜索后点击搜索按钮，将值存储到本地
// 思路：
// 1.获取相关节点searchInput,searchBtn
const searchInput = document.querySelector("#searchInput");
const searchBtn = document.querySelector("#searchBtn");
console.log(searchInput, searchBtn);
// 2.给searchBtn绑定点击事件
searchBtn.addEventListener("click", function () {
console.log(searchInput.value);
const localHistory = local.getItem("history") || [];
localHistory.unshift(searchInput.value);
local.setItem("history", localHistory);
render();
});
// 功能二：根据本地存储的值渲染ul下面的li
render();
// 思路：
// 1.完成基本功能
// 2.确定函数名--render
// 3.确定函数参数--不需要
// 4.确定函数返回值--不需要
// 5.将功能代码放入函数壳子，替换对应的变量
function render() {
// 1.获取相关节点
const list = document.querySelector("#list");
// 2.获取本地存储的值
const localHistory = local.getItem("history") || [];
console.log("本地值", localHistory);
// 3.遍历数组将值拼接为html结构
let html = "";
localHistory.forEach(function (v) {
html += `<li>${v}</li>`;
});
// 4.将html放入ul
list.innerHTML = html;
}
// 6.调用测试
// 7.优化代码
</script>
</body>
</html>
推荐阅读：
扫描二维码，在手机上阅读