当用户在搜索框中输入关键词并点击搜索按钮时,将该关键词保存到浏览器的本地存储中。怎么实现
时间: 2024-02-17 14:03:35 浏览: 22
在前端页面上,我们可以使用`localStorage`对象来进行浏览器本地存储的操作。以下是一个示例代码,演示如何将用户搜索的关键词保存到浏览器本地存储中:
```javascript
// 获取搜索框和搜索按钮元素
const searchInput = document.getElementById('searchInput');
const searchButton = document.getElementById('searchButton');
// 监听搜索按钮的点击事件
searchButton.addEventListener('click', () => {
// 获取用户输入的搜索关键词
const keyword = searchInput.value.trim();
// 如果搜索关键词为空,则不进行保存操作
if (!keyword) {
return;
}
// 将搜索关键词保存到浏览器本地存储中
const historyList = JSON.parse(localStorage.getItem('searchHistory') || '[]');
historyList.unshift(keyword);
localStorage.setItem('searchHistory', JSON.stringify(historyList));
});
```
在上述代码中,我们首先获取了搜索框和搜索按钮的元素,并通过`addEventListener`方法监听了搜索按钮的点击事件。当用户点击搜索按钮时,我们获取了用户输入的搜索关键词,并进行了一些简单的处理(如去除空格等)。接着,我们通过`localStorage`对象获取了之前保存的搜索历史记录列表,将当前搜索关键词添加到列表的最前面,并将更新后的列表重新保存到本地存储中。需要注意的是,在将列表保存到本地存储中时,我们使用了`JSON.stringify`方法将其转换为字符串格式。