js实现搜索历史记录功能

最新推荐文章于 2023-02-21 13:48:52 发布
最新推荐文章于 2023-02-21 13:48:52 发布
阅读量3.4k 收藏 19
点赞数 2
分类专栏： js 文章标签： js实现搜索历史记录
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/MMryyy/article/details/89477032
版权

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/MMryyy/article/details/89477032

js实现搜索历史记录功能

首先我们来对比一下localStorage和sessionStorage：

localStorage生命周期是永久，这意味着除非用户显示在浏览器提供的UI上清除localStorage信息，否则这些信息将永远存在。

sessionStorage生命周期为当前窗口或标签页，一旦窗口或标签页被永久关闭了，那么所有通过sessionStorage存储的数据也就被清空了。
在这里插入图片描述

html

<div class="top">
			<div class="f1">
				<input type="text" class="input_top"/>
				<span>取消</span>
			</div>
		</div>
		<div class="history">
			<div class="history_top" style="display: none;">
				<span class="search">搜索历史</span>
				<span class="del">删除历史</span>
			</div>
			<div class="contain">
				<div class="fr"></div>
			</div>
		</div>
<style type="text/css">
	.top{
   
		background:whitesmoke;
		line-height: 70px;
    	padding-left: 10px;
	}
	.input_top{
   
		border-radius: 20px;
    	width:
最低0.47元/天 解锁文章
你的星辰大海
关注
专栏目录
使用JS location实现搜索框历史记录功能
10-15
主要介绍了使用JS location实现搜索框历史记录功能，本文通过实例 代码讲解的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
js 实现历史搜索记录功能
jia2799897415的博客
07-14 2627
废话不多说，上代码： html css就不展示了 {{--历史搜索--}} <div class="hot-keyword history"> <div class="title_keyword">历史搜索</div> <ul class="keyword_list history_list"> </ul> </div> js：最原始的js代码，没有经过优化的，你可
js搜索历史记录
QSWの
10-21 605
效果地址：http://www.seetao.com/m_search.html 手机端 html： <body> <div class="search_top"> <img src="__IMG__/search_icon2.png" class="search_fang" /> <input type="...
js历史记录
weixin_30823683的博客
11-19 224
1. history 是什么？ window上的一个对象，由来存储浏览器访问过的历史 2. 用途： 可以动态跳转任意一个已在历史记录中的地址 3..history方法： 1.forward() : 向后翻一页 2. back(): 回退一页 3. go(num) : num为负值时 表示回退 num为正值时表示前进 4. pushState(data, title, ur...
原生js实现搜索历史记录案例
weixin_45630548的博客
09-18 2877
<header> <input type="text" id="search"> <input type="button" id="btn" value="搜索"> </header> <main> <div> <h3>搜索记录</h3> <span id="clear">清空&l...
Vue 实现输入框新增搜索历史记录功能
10-16
现在，让我们看看如何通过实例代码实现搜索历史记录的保存和检索。我们定义了一个名为saveSearch的函数，这个函数首先通过good-storage的get方法获取当前存储的搜索历史记录数组。然后，它调用insertArray函数将新的...
JS--历史搜索记录的实现
qq_21058391的博客
09-22 7628
公司最近要做商城，真是压力山大啊！还好招到了一个UI，要不然都不知道如何是好。 不罗嗦，商城一般都要有历史搜索记录的实现： 看一下效果图： 1.实现思路 1）用localStorage实现存储，如果重复的搜索内容不存就可以了 2）动态添加到列表中 2.html 搜索历史记录的使用
JS实现localstorage搜索历史记录
火腿肠的博客
03-29 579
由于localstorage不支持数组所以需要parse、stringfy来处理 let id = '123'; let history = []; localStorage.getItem("searchHistory")?history= JSON.parse(localStorage.getItem("searchHistory")) :history=[]; console.log(history); if(history.length !
js实现搜索记录列表
weixin_34162695的博客
04-23 824
<div class="sy_div28"> <div class="sy_div23"> <span>搜索历史</span> ...
javascript利用json操作浏览历史记录
04-02
NULL 博文链接：https://alandeng2012.iteye.com/blog/1441353
js 实现浏览历史记录示例
10-26
主要介绍了如何使用js实现浏览历史记录,需要的朋友可以参考下
js历史查询记录功能
weixin_44134816的博客
08-10 942
js历史查询记录功能。
js点击历史记录
qq_44417051的博客
11-30 1814
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>history对象</title></head><input type="button" id="btn" value="获取历史记录"><...
JavaScriptAPI编程_History对象(获取浏览历史)
热门推荐
JiuMeilove的博客
06-21 2万+
JavaScript history 对象中包含了用户在浏览器中访问过的历史记录，其中包括通过浏览器浏览过的页面，以及当前页面中通过加载的页面。我们可以通过 window 对象中的 history 属性来获取 history 对象，由于 window 对象是一个全局对象，因此在使用window.history时可以省略 window 前缀，例如window.history.go()可以简写为history.go()。下表中列举了 JavaScript history 对象中常用的属性及其描述：示例 下表中列
js中history对象
m0_61696809的博客
02-21 6498
在上面的代码中，调用pushState方法设置了一个状态对象，其中包含了一个名为page的属性，值为"index"，将URL地址改变为/index.html。随后监听了popstate事件，当调用back方法回到上一个历史记录时，popstate事件会被触发，可以在事件处理函数中获取到当前历史记录的状态对象，通过JSON.stringify方法将其序列化为字符串输出到控制台中。在上面的示例中，当用户在浏览器中点击后退按钮时，popstate事件将被触发，并且状态对象将被输出到控制台。
前端实现搜索记录功能
Tomato的博客
04-22 1062
@Tomato 文章目录搜索记录功能 搜索记录功能 简介：搜索功能在商品很多的时候尤为重要，那为什么要历史记录呢，是在乎用户的感受，节约用户思路和操作的时候而产生的一项新的功能 使用cookies（session 依赖于cookies，每次去取session时都会访问一次） 1.使用cookies session 依赖于cookies，每次去取session时都会访问一次 // 工具类方法 get...
js写一个搜索添加记录，点击记录删除内容
qq_43378240的博客
01-09 528
大概内容如下图，输入框输入内容，点击搜索清空输入框并且在下面生成一个有搜索内容的标签，点击下面的标签则清除此标签 css <style> *{margin:0;padding:0;} #one{width:200px;height:50px;border:1px solid;font-size:18px;} #two{width:50px;height:50px;border:1px solid;cursor:pointer;} </style> html <div
js实现搜索历史记录
最新发布
05-24
可以使用localStorage存储搜索历史记录，具体实现可以参考以下代码： 首先在HTML中添加一个搜索框和一个搜索历史记录列表： ```html <input type="text" id="searchBox"> <ul id="historyList"></ul> ``` 然后在JavaScript中实现搜索历史记录的存储和展示： ```js // 获取搜索历史记录 function getHistory() { let history = localStorage.getItem('searchHistory'); if (history) { return JSON.parse(history); } else { return []; } } // 添加搜索历史记录 function addHistory(keyword) { let history = getHistory(); if (history.indexOf(keyword) === -1) { history.push(keyword); localStorage.setItem('searchHistory', JSON.stringify(history)); } } // 清空搜索历史记录 function clearHistory() { localStorage.removeItem('searchHistory'); } // 展示搜索历史记录 function showHistory() { let history = getHistory(); let html = ''; for (let i = history.length - 1; i >= 0; i--) { html += '<li>' + history[i] + '</li>'; } document.querySelector('#historyList').innerHTML = html; } // 监听搜索框输入事件 document.querySelector('#searchBox').addEventListener('input', function() { let keyword = this.value.trim(); if (keyword) { addHistory(keyword); } }); // 页面加载时展示搜索历史记录 window.addEventListener('load', function() { showHistory(); }); // 清空搜索历史记录 document.querySelector('#clearBtn').addEventListener('click', function() { clearHistory(); showHistory(); }); ``` 以上代码实现了搜索历史记录的存储、添加、清空和展示功能。当用户输入关键词时，将关键词添加到搜索历史记录中；页面加载时展示搜索历史记录；当用户点击清空按钮时，清空搜索历史记录并重新展示。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值