使用本地存储显示历史搜索提示

本地存储：存储于浏览器，与session没有关系

本地存储分为两种：
1、会话存储 sessionStorage
2、永久存储 localStorage

区别：生命周期不同，前者打开浏览器就没有了，后者一直存在直到手动将其清除

存储：以字符串的方式存储，基本类型能转换，但复杂类型数据会丢失，所以在存储之前用JSON.stringify转为json字符串格式，获取数据后，再用将其转为对象

以下是使用本地存储中的永久存储编写的一个小demo：
使用本地存储显示历史搜索提示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>搜索输入框的历史记录优化</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        .box{
            margin: 100px 450px;
            position: relative;
        }
        input{
            width: 250px;
            height: 28px;
            outline: none;
        }
        button{
            width: 60px;
            height: 28px;
            border: none;
            outline: none;
            background-color: orange;
            color: white;
            cursor: pointer;    
        }
        ul{
            width: 250px;
            list-style: none;
            position: absolute;
            background-color: skyblue;
            top: 30px;
            left: 0;
            color: whitesmoke;
            display: none;
            padding: 0 5px;
        }
        ul li{
            cursor: pointer;
        }
        ul li:hover{
            background-color: blueviolet;
        }
        .block{
            display: block;
        }
    </style>
</head>
<body>

    <div class="box">
        <input type="text">
        <button>搜索</button>
        <ul></ul>
    </div>

</body>
</html>
<script>

    // 获取元素
    var input = document.querySelector('input');
    var btn = document.querySelector('button');
    var ul = document.querySelector('ul');

    // 获取本地存储的数据，如果有则将其转换为js变量，如果没有则返回空数组
    var data = localStorage.getItem('searchData');
    data = data ? JSON.parse(data) : [];


    // 1、给搜索按钮注册点击事件，将输入框的数据追加到本地存储中
    btn.onclick = function(){
        // 获取输入框的数据并去除两边空字符，判断数据是否为空
        var text = input.value.trim();
        if(text.length == 0){
            alert('客官，您还没有输入内容呢!');
            return;
        }
        // 判断输入框的数据是否已存在
        for(var i = 0; i < data.length; i++){
            if(data[i] == text){
                // 删除已存在的数据 splice(开始删除的索引，删除个数)
                data.splice(i,1);
            }
        }
        // 将输入框的数据追加至原数据的前面
        data.unshift(text);
        // 将数据重新存储至本地,记得要将数据转为json格式字符串，否则数据将会丢失
        localStorage.setItem('searchData',JSON.stringify(data));
        // 页面跳转
        location.href = 'https://www.baidu.com/s?wd='+text;
        // 将输入框的值清空
        // input.value = '';
    }

    // 2、给输入框注册键盘弹起事件，根据输入的数据与本地存储的数据相互匹配
    input.onkeyup = function(){
        // 获取输入框的数据
        var text = input.value.trim();
        // 将数据放入构造函数中
        var reg = new RegExp(text);
        // 判断本地存储中是否存在数据
        if(data.length != 0){
            // 准备空字符串
            var html = '';
            // 遍历本地存储的数据
            for(var i = 0; i < data.length; i++){
                // 将数组中的每份数据拿出来与输入框的数据对比
                var inData = data[i].search(reg);
                if(inData != -1 && inData != 0){
                    html += '<li>'+ data[i] +'</li>';
                }
            }
            // 渲染数据
            ul.innerHTML = html; 
            ul.className = 'block';   
        }
    }


    // 3、给出现的历史记录注册点击事件，替换文本框的内容,需要使用事件委托
    ul.onclick = function(e){
        var thisLi = e.target;
        var text = thisLi.innerHTML;
        input.value = text;
        ul.className = '';
    }
    
</script>

使用本地存储显示历史搜索提示

相关推荐