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

搜索框下方保留搜索记录

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

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

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

评论列表 6人参与

发表评论取消回复

derek说道：

2019年9月23日下午2:22

为什么运行代码出现的和掩饰洁面不一样呢？

回复
lucky说道：

2019年9月23日下午2:23

为什么运行代码出现的和演示界面不一样呢？

回复
1. 国瑞个人博客说道：
  
  2019年9月24日下午12:26
  
  https://www.huanggr.cn/works/1306/index.html，请查看该网址内容，怎么不一样了呢
  
  回复
  1. lucky说道：
    
    2019年10月14日下午12:57
    
    你好，我查看内容是可以运行的，但是下载代码以后却不能运行，不知道是什么原因，之前的qq添加没注意，不好意思
    
    回复
2. 国瑞个人博客说道：
  
  2019年9月24日下午12:27
  
  https://www.huanggr.cn/works/1306/index.html，请查看该网址内容，怎么不一样了呢，已加QQ
  
  回复
  1. 国瑞个人博客说道：
    
    2020年3月25日下午6:43
    
    网站被攻击了，有些源码文件损坏了
    
    回复

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

6

搜索框下方保留搜索记录

主要用到的api

localStorage.getItem()这个方法是用来获取到的数据的

localStorage.setItem()这个方法是用来设置数据的

localStorage.clear()这个方法是用来清除数据的

JSON.stringify()这个方法是用来将数组数组转换为json字符串的

JSON.parse()这个方法是用来将json字符串转换为数组的

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

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

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

作者: huanggr

7

发表评论取消回复

评论列表 6人参与

微信扫一扫关注我们

6

搜索框下方保留搜索记录

主要用到的api

localStorage.getItem()这个方法是用来获取到的数据的

localStorage.setItem()这个方法是用来设置数据的

localStorage.clear()这个方法是用来清除数据的

JSON.stringify()这个方法是用来将数组数组转换为json字符串的

JSON.parse()这个方法是用来将json字符串转换为数组的

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

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

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

作者: huanggr

为您推荐

Java文件复制

微信公众号查看文章列表

他来了！WannaRen勒索病毒作者主动提供解密密钥

不使用js制作的二级导航菜单

最新qq默认表情包分享下载

前端[yarnpkg/yarn] There appears to be trouble with your network connection.

7

发表评论 取消回复

评论列表 6人参与

微信扫一扫关注我们

发表评论取消回复