国瑞个人博客
首页 > 前端 > 前端搜索框下方保留搜索记录

前端搜索框下方保留搜索记录

前端搜索框下方保留搜索记录

 2019年02月26日 作者: 国瑞个人博客 672次浏览

搜索框下方保留搜索记录

搜索框下方保留搜索记录这个效果在很多站点的搜索框处用的非常多,搜索的数据使用本地存储来处理,该功能不仅仅提高了界面对用户的友好程度,而且也不需要向服务器去请求接口,不需要带宽,所以非常的实用,接下来给大家分析一下我们需要用到的几个api。

主要用到的api

localStorage.getItem()这个方法是用来获取到的数据的
localStorage.setItem()这个方法是用来设置数据的
localStorage.clear()这个方法是用来清除数据的
JSON.stringify()这个方法是用来将数组数组转换为json字符串的
JSON.parse()这个方法是用来将json字符串转换为数组的

接下来就是完整代码了,您可以在最下方点击链接看到实际的效果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
<!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;
        }
        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>
        <li><span>手机</span><a href="javascript:;">删除</a></li>
        <li><span>手机</span><a href="javascript:;">删除</a></li>
        <li><span>手机</span><a href="javascript:;">删除</a></li>
        <li><span>手机</span><a href="javascript:;">删除</a></li>
    </ul>
    <script src="jquery.min.js"></script>
    <script>
        $(function () {
            /*1.使用json数据存储搜索历史记录*/
            /*2.预设一个key   historyList */
            /*3.数据格式列表 存的是json格式的数组*/
            /*4. [电脑,手机,。。。。]*/

            /*1.默认根据历史记录渲染历史列表*/
            var historyListJson = localStorage.getItem('historyList') || '[]';
            var historyListArr = JSON.parse(historyListJson);
            /*获取到了数组格式的数据*/
            var render = function () {
                /*$.each(function(i,item){}) for() for in */
                /* forEach 遍历函数  只能数组调用  回到函数(所有对应的值,索引)*/
                var html = '';
                historyListArr.forEach(function (item, i) {
                    html += '<li><span>' + item + '</span><a data-index="' + i +
                        '" href="javascript:;">删除</a></li>';
                });
                html = html || '<li>没有搜索记录</li>';
                $('ul').html(html);
            }
            render();

            /*2.点击搜索的时候更新历史记录渲染列表*/
            $('[type="button"]').on('click', function () {
                var key = $.trim($('[type=search]').val());
                if (!key) {
                    alert('请输入搜索关键字');
                    return false;
                }
                /*追加一条历史*/
                historyListArr.push(key);
                /*保存*/
                localStorage.setItem('historyList', JSON.stringify(historyListArr));
                /*渲染一次*/
                render();
                $('[type=search]').val('');
            });

            /*3.点击删除的时候删除对应的历史记录渲染列表*/
            $('ul').on('click', 'a', function () {
                var index = $(this).data('index');
                /*删除*/
                historyListArr.splice(index, 1);
                /*保存*/
                localStorage.setItem('historyList', JSON.stringify(historyListArr));
                /*渲染一次*/
                render();
            });

            /*4.点击清空的时候清空历史记录渲染列表*/
            $('div a').on('click', function () {
                /*清空*/
                historyListArr = [];
                /*慎用  清空网上的所有本地存储*/
                //localStorage.clear();
                //localStorage.removeItem('historyList');
                localStorage.setItem('historyList', '');
                render();
            });
        });
    </script>
</body>

</html>

搜索框下方保留搜索记录效果请猛戳此处:点击

搜索框下方保留搜索记录下载请猛戳此处:下载

百度已收录

点击快速分享:

以上就是国瑞前端个人博客带来的是《前端搜索框下方保留搜索记录》,感谢您的观看!

如果没有特殊的说明,本文即为国瑞前端博客原创(www.huanggr.cn),欢迎读者转载并保留本站版权!https://www.huanggr.cn/1306.html

「专业前端博客,如果觉得我的文章对您有用,请帮助本站成长」

赞( 32 ) 打赏

谢谢你请我吃鸡腿*^_^*

支付宝
微信
32

谢谢你请我吃鸡腿*^_^*

支付宝
微信

上一篇:

下一篇:

相关文章:

共有 0 条评论

博客简介

国瑞个人博客: https://www.huanggr.cn/,我们关注Web前端开发技术,web前端开发,移动前端开发,前端资讯,同时分享前端资源和工具等,期待你的参与,了解更多..

博主独立研发主题:

本站唯一QQ群

加入国瑞个人博客QQ群

本群为学习探讨群,主要和前端相关,欢迎广大前端(抱有学习目的均可)爱好者加入!广告请勿添加!

升级版本

web前端开发博客,基于vue脚手架制作的前端博客正在制作中,尽情期待,目前示例的代码位于此处

最新版本(尽请期待)-web前端开发博客

精彩评论

本站主要提供服务

二年web前端开发博客,本站专注提供web资源下载,技术问题解答,经验分享,也提供新手的web技术指导,二年前端个人博客,期待你的加入!

站点统计

  • 文章总数: 269 篇
  • 草稿数目: 50 篇
  • 分类数目: 26 个
  • 页面总数: 16 个
  • 评论总数: 216 条
  • 链接总数: 10 个
  • 标签总数: 104 个
  • 建站时间: 803 天
  • 注册用户: 659 人
  • 访问总量: 8780604 次
  • 最近更新: 2019年7月15日
-->