js中localStorage实现搜索框搜索历史存储功能

阿勒勒勒

已于 2023-05-25 10:00:43 修改

阅读量1k

点赞数

文章标签： javascript 前端开发语言

于 2023-01-12 19:55:51 首次发布

本文链接：https://blog.csdn.net/2201_75567958/article/details/128665110

版权

整体思路是在输入完成后点击搜索按钮，获取本地存储内容，将搜索数据保存至本地存储内容中，再将本地存储内容保存会本地存储中，打印存储内容至网页上，具体思路如下：

1.先创建html结构，完善css样式；

    <p>
        <input type="search" /><button>搜索</button>
    </p>
    <p>
        <span>一键清除</span>
    </p>
    <ul></ul>

2.获取本地存储数据：用localStorage的getItem的方法通过键名获取本地存储内容，这里要注意，因为本地存储与会话存储都是将数据以对象字符串的形式进行保存的，所有获取到本地存储数据后还需要使用JSON.parse这个方法将对象字符串转化为真对象才能使用。同时我们还需要判定原本是否存在本地存储对象，如没有需要创建一个新数组用以保存搜索内容；

        // 用一个变量接本地存储的键名，用变量防止后面键名输入错误
        const HISTORY = 'history';
        // 获取节点
        const inputNode = document.querySelector('input');//搜索框节点
        const btnNode = document.querySelector('button');//搜索按钮节点
        // 绑定点击事件
        btnNode.addEventListener('click' , function(){
            // 获取input的输入内容，trim去除内容左右两边的空格
            let inputValue = inputNode.value.trim();
            // 获取input历史本地存储数据,用JSON的parse方法将存储的对象字符串转化为对象
            let inputHis = JSON.parse(localStorage.getItem(HISTORY)) || []; // 这里使用||[]是防止没有存储数据时创建一个空的数组对象
        })

3.存入搜索数据：后通过判定输入内容长度来确定是否为空内容，使用includes方法（判定数组中是否存在某元素，返回true/false）判定输入内容是否与本地存储内容有重复，如果没有上述问题就使用unshift方法（在数组的最前面添加一个或更多元素）将搜索内容存储到本地存储内容中，后使用JSON的stringify将对象转换为对象字符串，再使用localStorage的setItem将存储内容存到指定键名的本地存储中；

        const HISTORY = 'history';
        const inputNode = document.querySelector('input');
        const btnNode = document.querySelector('button');
        btnNode.addEventListener('click' , function(){
            let inputValue = inputNode.value.trim();
            let inputHis = JSON.parse(localStorage.getItem(HISTORY)) || []; 

            //从这里开始
            if(inputValue || inputValue.length>0){
                // 用数组的includes()方法判定是否有重复数据
                if(inputHis.includes(inputValue)){
                    // 如果有,用splice删除指定元素,用indexOf获取对应删除元素的索引
                    inputHis.splice(inputHis.indexOf(inputValue) , 1);
                    // 后再将搜索框的输入内容加到本地存储数组对象的最前面,这是为了后面好按顺序打印
                    inputHis.unshift(inputValue);
                    // 将输入好的数据用JSON.stringify()存回本地
                    localStorage.setItem(HISTORY , JSON.stringify(inputHis));
                }else{
                    // 如果没有重复,直接保存数据
                    inputHis.unshift(inputValue);
                    localStorage.setItem(HISTORY , JSON.stringify(inputHis));
                }
            }
        })

4.渲染网页内容：再封装一个打印本地存储内容的函数来将数据渲染到网页上，将本地存储内容依次保存到创建的<li></li>标签中，通过innerHTML将内容渲染到网页上，完成后直接在需要渲染的地方使用函数即可；

        // 封装打印存储内容函数
        const print = function(){
            // 获取ul节点
            const ulNode = document.querySelector('ul');
            // 用来接后面将打印的字符串
            let liHtml = '';
            // 获取本地存储数据
            let inputHis = JSON.parse(localStorage.getItem(HISTORY)) || [];
            inputHis.forEach(function(v){
                // 接到本地存储的所有内容
                liHtml += `<li>${v}</li>`;
            })
            // 使用innerHTML打印出内容到ul中
            ulNode.innerHTML = liHtml;
        }

5.一键清除：点击一键清除键后使用localStorage中clear()将所有本地存储内容删除掉，再渲染一下内容，更新网页。

        // 获取一键清除节点
        const clearNode = document.querySelector('span');
        clearNode.addEventListener('click' , function(){
            // 使用clear方法删除所有本地存储数据
            localStorage.clear();
            // 渲染存储内容
            print();
        })

因为只是使用简单的js基础完成这个功能，所以漏洞肯定是有的，但对于初学者来说完成此项功能还是可以起到练习的目的，以下为完整代码：

    <script>
        // 封装打印存储内容函数
        const print = function(){
            // 获取ul节点
            const ulNode = document.querySelector('ul');
            // 用来接后面将打印的字符串
            let liHtml = '';
            // 获取本地存储数据
            let inputHis = JSON.parse(localStorage.getItem(HISTORY)) || [];
            inputHis.forEach(function(v){
                // 接到本地存储的所有内容
                liHtml += `<li>${v}</li>`;
            })
            // 使用innerHTML打印出内容到ul中
            ulNode.innerHTML = liHtml;
        }

        // 用一个变量接本地存储的键名，用变量防止后面键名输入错误
        const HISTORY = 'history';
        // 获取节点
        const inputNode = document.querySelector('input');//搜索框节点
        const btnNode = document.querySelector('button');//搜索按钮节点
        // 绑定点击事件
        btnNode.addEventListener('click' , function(){
            // 获取input的输入内容，trim去除内容左右两边的空格
            let inputValue = inputNode.value.trim();
            // 获取input历史本地存储数据,用JSON的parse方法将存储的对象字符串转化为对象
            let inputHis = JSON.parse(localStorage.getItem(HISTORY)) || []; // 这里使用||[]是防止没有存储数据时创建一个空的数组对象
            if(inputValue || inputValue.length>0){
                // 用数组的includes()方法判定是否有重复数据
                if(inputHis.includes(inputValue)){
                    // 如果有,用splice删除指定元素,用indexOf获取对应删除元素的索引
                    inputHis.splice(inputHis.indexOf(inputValue) , 1);
                    // 后再将搜索框的输入内容加到本地存储数组对象的最前面,这是为了后面好按顺序打印
                    inputHis.unshift(inputValue);
                    // 将输入好的数据用JSON.stringify()存回本地
                    localStorage.setItem(HISTORY , JSON.stringify(inputHis));
                }else{
                    // 如果没有重复,直接保存数据
                    inputHis.unshift(inputValue);
                    localStorage.setItem(HISTORY , JSON.stringify(inputHis));
                }
            }
            // 完成上述点击操作后打印更新一次本地存储内容
            print();
        })
        // 刷新页面时更新内容
        print();
        // 获取一键清除节点
        const clearNode = document.querySelector('span');
        clearNode.addEventListener('click' , function(){
            // 使用clear方法删除所有本地存储数据
            localStorage.clear();
            print();
        })
    </script>