js点击历史记录

最新推荐文章于 2023-06-08 15:29:11 发布
最新推荐文章于 2023-06-08 15:29:11 发布
阅读量1.8k 收藏
点赞数 1
分类专栏： HTMLCSSJS学习 文章标签： javascript js dom html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44417051/article/details/109573574
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>history对象</title>
</head>
<input type="button" id="btn" value="获取历史记录">
<body>


<script>
    var btn=document.getElementById("btn");
    btn.onclick=function () {
       var length= history.length;
        alert(length);
    }
</script>
</body>
</html>

新时代程序猿
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js历史查询记录功能
weixin_44134816的博客
08-10 857
js历史查询记录功能。
js历史记录
weixin_30823683的博客
11-19 217
1. history 是什么？ window上的一个对象，由来存储浏览器访问过的历史 2. 用途： 可以动态跳转任意一个已在历史记录中的地址 3..history方法： 1.forward() : 向后翻一页 2. back(): 回退一页 3. go(num) : num为负值时 表示回退 num为正值时表示前进 4. pushState(data, title, ur...
javascript利用json操作浏览历史记录
04-02
NULL 博文链接：https://alandeng2012.iteye.com/blog/1441353
js 实现浏览历史记录示例
10-26
主要介绍了如何使用js实现浏览历史记录,需要的朋友可以参考下
js历史记录管理
11-29 1099
方式1： loaction.hash onhashchange 事件 JS代码来设置loaction.hash值后 会在浏览器的历史记录中添加一条记录 并更新到地址栏URL (更新的值体现在地址栏中#号结尾部分URL+#+值) 注册window.onhashchange事件单用户点击前进回退按钮后 促发事件再通过location.hash值来获取记录的值 在离开页面时候可以将应用
Vue 实现输入框新增搜索历史记录功能
10-16
当用户点击任何历史记录时，触发historysearch方法，这个方法负责根据所点击的搜索历史记录重新执行搜索操作。如果用户想要清空历史记录，可以通过点击界面上的“清空历史记录”按钮触发clearhis方法。 总而言之，...
使用JS location实现搜索框历史记录功能
10-15
在本例中，我们利用`location`对象来实现搜索框的历史记录功能，不过实际上并没有直接使用`location`对象，而是通过`localStorage`来存储用户的搜索历史。`localStorage`是HTML5提供的一个特性，它允许我们在用户...
基于jQuery的history历史记录插件
10-28
1. jQuery history插件功能：该插件的作用主要是为JavaScript支持的应用程序提供历史记录支持，包括前进、后退按钮以及书签功能。它允许用户存储应用程序的状态到URL的哈希部分，并能够在需要时从哈希中恢复状态。 ...
清除网页历史记录，屏蔽后退按钮!
09-06
网页历史记录和屏蔽后退按钮是网页开发中的一个重要议题，特别是在设计交互性强或者有特定流程的网站时。本文主要探讨了如何防止用户通过浏览器的后退功能打乱预定的页面访问顺序，以及如何处理表单提交后可能出现的...
js搜索历史记录
QSWの
10-21 592
效果地址：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历史记录本地存储（localStorage）
weixin_51086854的博客
12-23 1174
js历史记录本地存储localStorage方法 存储类型自定义，本文以数组类型存储 添加历史记录 localAdd(name,value){ let stu; let stuStr; if (`${name}` in localStorage){//检测搜索记录存在时 stu= JSON.parse(localStorage[name]); for (let i = 0; i < stu.length; i++) { if (value == st
js返回历史记录
stupider0623的博客
02-10 628
href="javascript:history.go(-1);"
js实现搜索历史记录功能
MMryyy的博客
04-23 3463
版权声明：本文为博主原创文章，未经博主允许不得转载。 https://mp.csdn.net/mdeditor# js实现搜索历史记录功能 html <div class="top"> <div class="f1"> <input type="text" class="input_top"/> <span>取消</sp...
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 6452
在上面的代码中，调用pushState方法设置了一个状态对象，其中包含了一个名为page的属性，值为"index"，将URL地址改变为/index.html。随后监听了popstate事件，当调用back方法回到上一个历史记录时，popstate事件会被触发，可以在事件处理函数中获取到当前历史记录的状态对象，通过JSON.stringify方法将其序列化为字符串输出到控制台中。在上面的示例中，当用户在浏览器中点击后退按钮时，popstate事件将被触发，并且状态对象将被输出到控制台。
【004JavaScript Window History】完全掌握浏览器历史记录的使用技巧
最新发布
燃正科技
06-08 1343
本教程将详细介绍JavaScript Window History对象及其在浏览器中的应用。
js 刷新和 历史记录
w542791595的博客
11-12 1132
1. javascript 返回上一页 history.go(-1),返回两个页面:history.go(-2); 2.history.back() 3.window.history.forward() 返回下一页 4.window.history.go(返回第几页，也可以使用访问过的URL) Javascript刷新页面的几种方法： 1    history.go(0) 2 
原生js实现搜索历史记录案例
weixin_45630548的博客
09-18 2779
<header> <input type="text" id="search"> <input type="button" id="btn" value="搜索"> </header> <main> <div> <h3>搜索记录</h3> <span id="clear">清空&l...
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(); }); ``` 以上代码实现了搜索历史记录的存储、添加、清空和展示功能。当用户输入关键词时，将关键词添加到搜索历史记录中；页面加载时展示搜索历史记录；当用户点击清空按钮时，清空搜索历史记录并重新展示。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值