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: 300px;height: 30px;margin-right: 50px;background:url(images/all_search.png) no-repeat left top ;background-size: 30px;padding-left: 30px;font-size: 18px;}:focus{outline: none;}.contain{margin: 10px;}.contain a{background: #E7E7E8;margin-bottom: 10px;margin-right: 10px;border-radius: 10px;padding: 5px 10px;line-height: 50px;}.info{height: 200px;width: 300px;background: url(images/pic12.png) no-repeat center;background-size: 300px 200px;padding: 50px;box-sizing: border-box;font-weight: 700;font-size: 20px;}.search,.del{background: beige;line-height: 30px;display: inline-block;border-radius: 5px;margin-top: 10px;padding: 0px 10px;}.search{margin-right: 180px;}
</style>

js

<script type="text/javascript">
//取值写入页面$(function(){//历史记录  localStorage.historyItemsvar str=localStorage.historyItems;var s = '';if(str== undefined){$(".contain").append('<div class="info"></div>');}else{var strs= [];strs=str.split("|");for(var i=0;i<strs.length;i++){s += "<a href='https://www.baidu.com/'  οnclick='dianji(this)'><p>"+strs[i]+"</p></a>";}$(".contain .fr").html(s);$('.history_top').show();}});//点击搜索历史function dianji(obj){var tem=objvar word=$(tem).text();setWorld(word);}//点击搜索$('.input_top').on('keydown',function(e){          if(e.keyCode=='13'){location.href='https://www.baidu.com/';var keyword=$('.input_top').val();setWorld(keyword);$('.input_top').val('');}})    //存值方法,新的值添加在首位//当为空的时候设置一个关键字进去，判断如果关键字是否存在，不存在就追加新的关键字  function setWorld(keyword){$('.history_top').show();
//      var {historyItems}=localStorage;var historyItems=localStorage.historyItemsif(historyItems===undefined){localStorage.historyItems=keyword;}else{historyItems=keyword+'|'+historyItems.split('|').filter(e=>e!=keyword).join('|');localStorage.historyItems=historyItems;            }       }//清除值$('.del').click(function(){localStorage.removeItem('historyItems');$('.contain .fr').html('');$('.history_top').hide();$('.contain').append('<div class="info"></div>');})$('.del').mouseover(function(){$(this).css('background','peachpuff')})$('.del').mouseout(function(){$(this).css('background','beige')})</script>

js实现搜索历史记录功能相关推荐

JS实现搜索匹配功能
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
微信小程序—实现搜索功能，搜索历史记录功能
本文主要基于微信小程序实现和uni-app实现搜索商品和历史记录的功能. 不详细介绍,主看代码注释即可!! 1.搜索组件页面代码块 <template><view><!- ...
微信小程序显示用户搜索历史记录功能实现
效果是点击首页输入框跳转到搜索页面,用户搜索后将搜索的内容在历史搜索中展示如下图所示首页输入框布局和样式这里我就不展示了 js就是点击跳转页面历史搜索记录模块wxml <view clas ...
微信小程序 - 搜索历史记录功能（纯前端）
前言网上大部分教程提供的代码都非常臃肿且 BUG 多,本文以最健壮的代码实现该功能. 本示例可直接用于您的项目,利用缓存特性可永久存储(除非用户手动清除缓存), 完成了搜索后自动写入历史.排序最新在 ...
uni-app - 搜索历史记录功能（纯前端）
前言网上大部分教程提供的代码都非常臃肿且 BUG 多,本文以最健壮的代码实现该功能,兼容多端. 本示例可直接用于您的项目,利用缓存特性可永久存储(除非用户手动清除缓存), 完成了搜索后自动写入历史. ...
js百度搜索框功能模拟
这里我们就废话不多说了,直接上代码 <!DOCTYPE html> <html><head><meta charset="UTF-8"&g ...
HTML5 JQuery 实现搜索匹配功能
HTML5 JQuery 实现搜索匹配功能效果动态图: 源代码: all.html <!doctype html> <html> <head> <meta ...
java搜索页面历史记录,使用JS location实现搜索框历史记录功能
首先,来看下效果图(样式什么的就不必吐槽了哈) html代码搜索记录: //用于保存记录信息 css代码 * { margin: 0; padding: 0; } input { border: 0 ...
chosen.jquery.js 有搜索功能、多选功能的下拉框插件
chosen.jquery.js 有搜索功能.多选功能的下拉框插件官方源码: https://github.com/harvesthq/chosen 该源码中的样例index.html有该插件的详 ...
html table 筛选记录,JS实现table表格内针对某列内容进行即时搜索筛选功能
JS实现table表格内针对某列内容进行即时搜索筛选功能发布时间:2020-08-29 09:26:37 来源:脚本之家阅读:103 作者:Marx-link 本文实例讲述了JS实现table表格 ...

js实现搜索历史记录功能

js实现搜索历史记录功能

html

js

js实现搜索历史记录功能相关推荐

最新文章

热门文章