js搜索框添加历史记录
时间: 2023-09-10 21:16:04 浏览: 150
要在 JavaScript 中为搜索框添加历史记录,你可以使用 localStorage 对象来存储搜索历史。以下是一个简单的示例代码:
```javascript
// 获取搜索框元素
const searchBox = document.getElementById('search-box');
// 监听搜索框的键盘事件
searchBox.addEventListener('keyup', function(event) {
// 按下回车键时保存搜索历史
if (event.key === 'Enter') {
// 获取当前输入的搜索关键字
const keyword = searchBox.value.trim();
// 确保关键字不为空
if (keyword !== '') {
// 获取之前保存的搜索历史
const searchHistory = localStorage.getItem('searchHistory') ? JSON.parse(localStorage.getItem('searchHistory')) : [];
// 将当前关键字添加到搜索历史中
searchHistory.push(keyword);
// 更新 localStorage 中的搜索历史
localStorage.setItem('searchHistory', JSON.stringify(searchHistory));
// 清空搜索框
searchBox.value = '';
}
}
});
```
在上面的示例中,我们首先获取了搜索框的元素,并添加了一个键盘事件监听器。当用户按下回车键时,我们获取当前输入的关键字,并将其存储到 localStorage 中的名为 "searchHistory" 的变量中。如果之前没有保存过搜索历史,则创建一个新的空数组。然后,我们将新的关键字添加到数组中,并更新 localStorage 中的搜索历史。最后,我们清空搜索框的值,以便用户可以输入新的关键字。
你可以根据自己的需求进一步扩展这个示例,例如:显示搜索历史,使用户能够点击历史记录并进行搜索等。
相关推荐
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)