localStorage()历史搜索记录_locakstorage记录位置-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_44777678/article/details/91899254
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>首页</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            margin-left: 300px;

        }
        ul{
            list-style: none;
            width: 250px;
            position: absolute;


        }
        ul li,div{
            width: 250px;
            padding: 10px 0;
            margin-left: 10px;
            border-bottom: 1px dashed #ccc;
            height: 20px;
        }
        a{
            float: right;
        }
        input{
            padding: 5px;
            margin: 10px;
        }
    </style>
</head>
<body>
<input type="search" placeholder="输入搜索关键字"/>
<input type="button" value="搜索"/>
<div><a href="javascript:;">清空搜索记录</a></div>
<ul>
    <!-- <li>没有搜索记录</li>
    <li><span>手机</span><a href="javascript:;">删除</a></li>
</ul>
<script src="jquery.min.js"></script>
<script>
   $(function () {
        // 根据历史记录渲染历史列表
        // 获取localStorage数据数据是json格式
        var historyListJson = localStorage.getItem('historyList') || '[]'; //historyList预设的键;
        //把json数据转换成数组
        var historyListArr = JSON.parse(historyListJson);
        
        // 1渲染数据
        function render(){
            // 定义一个空html
            var html = '';

            // 遍历数组

            // 方法一
            // historyListArr.forEach(function(item,i){ //value == key
            //     html += '<li><span>'+ item +'</span><a data-index="'+ i +'" href="javascript:;">删除</a></li>';
            // });

            // 方法二
            for(var i=0;i < historyListArr.length;i++){
                html += '<li><span>'+ historyListArr[i] +'</span><a data-index="'+ i +'" href="javascript:;">删除</a></li>';
            }
            // 判断html里面有数据没
            html = html||'<li>没有搜索记录</li>';
            // 把数据渲染到ul里面
            $('ul').html(html);
        }
        render();

        // 2点击搜索的时候更新历史搜索记录、
        $('[type="button"]').on('click',function(){
            // 获取搜索框的内容
            var key = $.trim($('[type="search"]').val());
            // console.log(key);

            // 判断点击搜索、搜索框内没有内容提示用户
            if(!key){
                alert('请输入内容');
                return false;
            }  

            // 追加数据到historyListArr数组中
            historyListArr.push(key);
            
            // 保存更新追加的数据到json数据中
            localStorage.setItem('historyList',JSON.stringify(historyListArr));

            // 渲染数据/直接调用前面的渲染数据函数
            render();

            // 清空搜索框
            $('[type="search"]').val('');
        })

        // 3删除数据
        // 因为a的id是动态生成的需要冲ul拿到a的id
        $('ul').on('click','a',function(){
            // 获取点击的a的id
            var index = $(this).data('index');

            // 删除数组内的指定位置数据
            historyListArr.splice(index,1);

            // 保存更新追加的数据到json数据中
            localStorage.setItem('historyList',JSON.stringify(historyListArr));

            // 渲染数据/直接调用前面的渲染数据函数
            render();

        });

        // 清除全部历史记录
        $('div a').on('click',function(){
            // 清空数据
            historyListArr = []; //先把数组设置为空
           
            localStorage.removeItem('historyList'); //再删除空数据
            
            // 渲染数据/直接调用前面的渲染数据函数
            render();

        });
    
    });

</script>
</body>
</html>