原生js实现搜索历史记录案例

功能1：将搜索框中的内容保存到本地存储中

        思路：从获取本地存储的数据，判断是否有数据

                有数据：获取本地存储中的数据，将其转换成真的数组对象，向这个数组对象中添加搜索内容，再将这个数组用JSON.stringify()转换成字符串对象，将这个字符串对象用setItem()保存到本地存储中

                没有数据：就定义一个新数组，将搜索栏中的内容用unshift()添加到数组中，再将这个数组用JSON.stringify()转换成字符串对象，将这个字符串对象用setItem()保存到本地存储中

功能2：将本地存储的数据渲染到页面中

              思路：将这个功能封装成一个方法，

                        首先 获取本地存储的数据，并且转换成真的数组对象，

                       遍历这个对象，获取数据，并且用字符拼接模板，将这些数据拼接到li标签中，再在ul中显示；

                        这个方法要在点击搜索按钮的时候调用一次更新页面数据

功能3：清空页面的历史记录，并且删除本地存储的数据

                思路：给清空按钮注册事件，利用removeItem(）来移出本地存储

                        再重新调用一个渲染页面的函数

功能4,：当点击某个搜索记录的时候，删除这个记录

                思路：这里需要用到事件委派，给ul绑定事件监听，要在每个li标签上添加自定义属性，data-index=${i}来保存当前li的索引，后面用e.target.dataset['index']来获取当前事件源的索引

                        当点击某个所搜记录的时候，要判断点击对象的节点是否是LI,用event.target.nodeName来获取节点名

                        如果是，就要获取本地存储的数据并且将其转换成真的数组对象，再用splice()删除数组中元素，添加参数e.target.dataset['index']和1,就是删除数组中改索引下的数据

                        再将删除后的数组转成字符串对象保存到本地存储中，再重新渲染一下页面

 <header>
        <input type="text" id="search">
        <input type="button" id="btn" value="搜索">
    </header>
    <main>
        <div>
            <h3>搜索记录</h3>
            <span id="clear">清空</span>
        </div>
        <ul id="searchList">
        </ul>
    </main>

 * {
            margin: 0;
            padding: 0;
        }
        
        ul {
            list-style: none;
        }
        
        header {
            padding: 10px;
            line-height: 36px;
            margin-bottom: 20px;
        }
        
        header input {
            height: 36px;
            outline: none;
        }
        
        header #search {
            width: 80%;
            border-radius: 18px;
            border: 1px solid #ccc;
        }
        
        header #btn {
            width: 15%;
            background-color: plum;
            color: #fff;
            border-radius: 6px;
            border: none;
        }
        
        main {
            padding: 10px;
        }
        
        main>div {
            display: flex;
            justify-content: space-between;
        }
        
        ul>li {
            float: left;
            padding: 5px;
            margin: 10px;
            background-color: #ccc;
            color: #fff;
            border-radius: 5px;
        }

   window.onload = function() {
            showLog()
            btn.addEventListener('click', function() {

                // 获取搜索栏的值
                let userVal = search.value
                let arr = []

                // 获取本地存储的内容
                let localCon = localStorage.getItem('searches')
                arr = localStorage.getItem('searches') ? arr = JSON.parse(localStorage.getItem('searches')) : []
                if (userVal) {
                    arr.unshift(userVal)
                }
                // 将数组转化成字符串对象,放到本地存储中
                localStorage.setItem('searches', JSON.stringify(arr))
                    // 渲染数据到网页中
                showLog()
                    // 清空搜索框
                search.value = ''

            })

            // 清空
            clear.addEventListener('click', function() {
                localStorage.removeItem('searches')
                    // localStorage.clear()
                showLog()
                    // searchList.innerHTML = ''
            })

            // 事件委派

            searchList.addEventListener('click', function(e) {
                // console.log(e.target.index);
                if (e.target.nodeName == 'LI') {
                    let datas = JSON.parse(localStorage.getItem('searches'))
                    console.log(e.target.dataset['index']);
                    datas.splice(e.target.dataset['index'], 1)
                    localStorage.setItem('searches', JSON.stringify(datas))
                    showLog()
                }

            })

            // 页面加载的时候将本地存储的内容显示到页面
            function showLog() {
                let locals = JSON.parse(localStorage.getItem('searches')) || []
                let htmllis = ''
                for (let i = 0; i < locals.length; i++) {
                    htmllis += `<li data-index=${i}>${locals[i]}</li>`
                }
                searchList.innerHTML = htmllis
            }

        }