移动端搜索记录（关于本地存储）

最新推荐文章于 2022-04-18 07:00:00 发布

sparrow_girl

最新推荐文章于 2022-04-18 07:00:00 发布

阅读量410

点赞数

分类专栏： HTML+CSS JS 文章标签： html5 css javascript

本文链接：https://blog.csdn.net/qq_51053759/article/details/120374221

版权

JS 同时被 2 个专栏收录

18 篇文章 0 订阅

订阅专栏

HTML+CSS

10 篇文章 0 订阅

订阅专栏

功能一：点击搜索进行用户输入数据存到本地
1、给btn注册点击事件
2、在事件中，获取用户输入的值
3、获取本地数据（如：searchList为例）
   有数据：
   1）获取到数据（字符串对象），并转换成真对象       --->数据格式：[1,2,3,.....]
   2）把用户输入的值添加到对象中
   3）把对象转成字符串对象
   4）把字符串对象保存到本地数据中
   没有数据
   1）定义空数据来保存数据
   2）把用户输入的值添加到对象中
   3）把对象转成字符串对象
   4）把字符串对象保存到本地数据中
功能二：进行本地数据的渲染--->封装成函数
   如：function fn(){
       1、获取本地数据
       2、把本地数据转换成数组
       3、使用变量保存li结构----一堆li

        4、遍历数组，并拼接li结构
       5、输出到指定ul中

   }
   网页加载时进行调用（有数据才调用）
   if(localStorage.getItem('searchList'){
       fn()
   })
功能三：清空
   1、清空本地存储
   2、重新渲染
功能四：点击下方li删除相应的搜索记录（事件委派）
   方式一：
   1、在li上设置自定义属性data-index=""
   2、给ul绑定点击事件
   3、判断点击的是否为li
   4、获取当前li的索引
   let index=e.target.dataset['index']
   5、删除本地存储中指定的元素（用到数组的splice       方法）
   6、将本地存储中的数据重新渲染到页面
   方式二：
   1、给ul绑定点击事件
   2、判断点击的是否为li
   3、获取当前li的索引
   let li = this.querySelectorAll("li");
index = Array.prototype.indexOf.call(li, e.target);
   4、删除本地存储中指定的元素（用到数组的splice       方法）
   5、将本地存储中的数据重新渲染到页面

方式一：

<!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>
        body,
        ul,
        li,
        h3 {
            margin: 0;
            padding: 0;
        }

        ul {
            list-style: none;
        }

        header {
            border-bottom: 1px solid #ccc;
            padding: 10px;
        }

        header>input {
            width: 300px;
            height: 34px;
            border: 1px solid #ccc;
            border-radius: 18px;
            outline: none;
            padding: 0 5px;
        }

        header>button {
            border: 0;
            background-color: #f00;
            color: #fff;
            height: 32px;
            line-height: 34px;
            border-radius: 5px;
        }

        main {
            padding: 10px;
        }

        .title {
            display: flex;
            justify-content: space-between;
        }

        .title span {
            color: #aaa;
        }

        main ul li {
            background-color: #ccc;
            color: #fff;
            padding: 2px 5px;
            border-radius: 10px;
            float: left;
            margin: 5px;
        }
    </style>
</head>

<body>
    <!-- 头部 -->
    <header>
        <input type="search" class="search">
        <button type="button" id="btn">搜索</button>
    </header>
    <!-- 内容 -->
    <main>
        <!-- 标题 -->
        <div class="title">
            <h3>搜索记录</h3>
            <span>清空</span>
        </div>
        <ul class="content">

        </ul>
    </main>
    <script>
        let btn = document.querySelector('#btn')
        let searchTxt = document.querySelector('.search')
        let contentUl = document.querySelector('.content')
        let clearCon = document.querySelector('.title>span')
        btn.addEventListener('click', function () {
            let searchV = searchTxt.value
            let localData = localStorage.getItem('searchList')
            if (localData) {//有数据
                let arr = JSON.parse(localStorage.getItem('searchList'))
                if(searchV){
                    arr.unshift(searchV)
                }
                localStorage.setItem('searchList', JSON.stringify(arr))
            } else {//没数据
                let arr = []
                if(searchV){
                    arr.unshift(searchV)
                }
                localStorage.setItem('searchList', JSON.stringify(arr))
            }

            // 渲染数据到网页中
            fun()

            // 清空input标签中的内容
            searchTxt.value = ''
        })

        function fun() {
            let arrCon = []
            let arr = JSON.parse(localStorage.getItem('searchList')) || []
            arr.forEach(function (v, i) {
                arrCon.push(`<li data-index="${i}">${v}</li>`)
            })
            contentUl.innerHTML = arrCon.join('')
        }
        if (localStorage.getItem('searchList')) {
            fun()
        }
        // 清空功能
        clearCon.addEventListener('click', function () {
            localStorage.removeItem('searchList')
            fun()
        })
        // 点击单个li删除相应的记录
        contentUl.addEventListener('click', function (e) {
            //e.target获取事件源
            if (e.target.nodeName.toLowerCase() == 'li') {
                let index = e.target.dataset['index']
                // 删除本地存储当中指定的元素
                // 取
                let arr=JSON.parse(localStorage.getItem('searchList'))
                //删
                arr.splice(index,1)
                //存
                localStorage.setItem('searchList',JSON.stringify(arr))
                fun()
            }

        })
    </script>
</body>

</html>

方式二：

<script>
        let btn = document.querySelector('#btn')
        let searchTxt = document.querySelector('.search')
        let contentUl = document.querySelector('.content')
        let clearCon = document.querySelector('.title>span')
        btn.addEventListener('click', function () {
            let searchVal = searchTxt.value
            let localData = localStorage.getItem('searchList')

            let arr = localData ? JSON.parse(localStorage.getItem('searchList')) : []
            if(searchVal){
                arr.unshift(searchVal)
            }
            localStorage.setItem('searchList', JSON.stringify(arr))

            fn()

            searchTxt.value = ''
        })
        function fn() {
            let arr = JSON.parse(localStorage.getItem('searchList'))
            let htmlStr = ''
            arr.forEach(function (v, i) {
                htmlStr += `<li>${v}</li>`
            })
            contentUl.innerHTML = htmlStr
        }
        if (localStorage.getItem('searchList')) {
            fn()
        }
        clearCon.addEventListener('click', function () {
            localStorage.removeItem('searchList')
            fn()
        })
        // 点击某个li删除相应的记录
        contentUl.addEventListener('click', function (e) {
            //e.target获取事件源
            if (e.target.nodeName.toLowerCase() == 'li') {
                var li = this.querySelectorAll("li");
                index = Array.prototype.indexOf.call(li, e.target);
                // 删除本地存储当中指定的元素
                // 取
                let arr = JSON.parse(localStorage.getItem('searchList'))
                //删
                arr.splice(index, 1)
                //存
                localStorage.setItem('searchList', JSON.stringify(arr))
                fn()
            }

        })
    </script>

实现效果：

sparrow_girl

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
移动端搜索记录（关于本地存储）

功能一：点击搜索进行用户输入数据存到本地1、给btn注册点击事件2、在事件中，获取用户输入的值3、获取本地数据（如：searchList为例）有数据： 1）获取到数据（字符串对象），并转换成真对象 --->数据格式：[1,2,3,.....] 2）把用户输入的值添加到对象中 3）把对象转成字符串对象 4）把字符串对象保存到本地数据中没有数据 1）定义空数据来保存数据 2）把用户输入的值添加到对象中 3）把对...
复制链接

扫一扫