原生js实现搜索框点击搜索清空历史记录

最新推荐文章于 2024-05-07 23:35:02 发布

烧脑的小白

最新推荐文章于 2024-05-07 23:35:02 发布

阅读量1.1k

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/tangtanglinli/article/details/129460007

版权

实现思路

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=``;
    })


})