实现思路
1.点击搜索框：注册点击事件2.获取用户输入的值3.将用户输入的值添加到本地存储:1)由于输入不止一个值且后期需要保存相关数据，故一定要存成数组或对象，所以要定义一个空数组2)由于值可能为空，在添加值到空数组之前，要先判断是否有值（可通过内容不为0/长度不为0/布尔值为true来判断）4.将本地数据的值渲染到搜索记录列表1)用户输入的有值，就要判断本地数据是否有数据，没有返回空数组，有就获取本地数据，由于本地存储的方法需要保存为字符串格式，才能取出来，故需要把之前定义的数组转化为字符串,才能成功获取2)获取用户输入的值，放入数组中，再将有数据的数组存储到本地，此处需要转化为字符串3）数据获取后，再将输入框内容清除
实现效果
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><link rel="stylesheet" href="./css/index.css"></head><body><!-- 头部 --><header><input type="text" id="searchText"><button id="btn">搜索</button></header><!-- 内容 --><main><!-- 标题 --><div class="title"><h3>搜索记录</h3><span id="clearBtn">清空</span></div><!-- 列表 --><ul id="list"></ul></main><script src="./js/index.js"></script></body></html>
js文件
/*1.点击搜索框：注册点击事件2.获取用户输入的值3.将用户输入的值添加到本地存储:1)由于输入不止一个值且后期需要保存相关数据，故一定要存成数组或对象，所以要定义一个空数组2)由于值可能为空，在添加值到空数组之前，要先判断是否有值（可通过内容不为0/长度不为0/布尔值为true来判断）4.将本地数据的值渲染到搜索记录列表1)用户输入的有值，就要判断本地数据是否有数据，没有返回空数组，有就获取本地数据，由于本地存储的方法需要保存为字符串格式，才能取出来，故需要把之前定义的数组转化为字符串,才能成功获取2)获取用户输入的值，放入数组中，再将有数据的数组存储到本地，此处需要转化为字符串3）数据获取后，再将输入框内容清除*/window.addEventListener("load",function(){//获取节点let searchText=document.querySelector("#searchText");let btn = document.querySelector("#btn");let clearBtn = document.querySelector("#clearBtn");let list = document.querySelector("#list")// console.log(searchText,btn,clearBtn,list);//给搜索框添加点击事件btn.addEventListener("click",function(){// console.log(111)//获取用户输入的值let val = searchText.value;//判断用户是否输入有值if(val){//用户输入有值，则获取本地数据,本地数据为字符串对象，需要转化为真对象才能取出，用户输入没有值，则返回一个空数组到本地数据用于存储接下来用户的搜索数据 let localData = JSON.parse(localStorage.getItem("searchData")) || [];//将用户输入的值放到localData数组中localData.unshift(val);//再将数据存储到存储到本地，存储到本地数据格式需要为字符串localStorage.setItem("searchData",JSON.stringify(localData));//获取数据后，将输入框的数据清除searchText.value='';//回调函数，动态渲染render();}//封装函数动态渲染function render(){//获取本地数据let localData = JSON.parse(localStorage.getItem("searchData"));//判断数据不为空,再进行渲染if(localData){//清空列表后再遍历渲染list.innerHTML='';//遍历数组localData.forEach(function(v){//将每一个值进行渲染list.innerHTML +=`<li>${v}</li>`;})}}render();})//给清空按钮注册点击事件clearBtn.addEventListener("click",function(){//清空本地存储localStorage.clear();//删除列表所有内容list.innerHTML=``;})})
