1.使用jq完成localStorage实现历史纪录版。
代码如下：
<!DOCTYPE html><html> ???<head lang="en"> ???????<meta charset="UTF-8"> ???????<title>没毛病</title> ???????<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> ???????<meta name="apple-mobile-web-app-capable" content="no"> ???????<meta name="apple-mobile-web-app-status-bar-style" content="black"> ???????<meta name="format-detection" content="telephone=no"> ???????<style> ???????????.history { ???????????????text-align: center; ???????????} ???????????????????????#sec { ???????????????width: 50%; ???????????????overflow: hidden; ???????????????text-align: left; ???????????????height: 38px; ???????????????border: 1px solid #ccc; ???????????????border-radius: 10px; ???????????} ???????????????????????.delete:after { ???????????????clear: both; ???????????????content: ‘.‘; ???????????????display: block; ???????????????width: 0; ???????????????height: 0; ???????????????visibility: hidden; ???????????} ???????????????????????.delete>div { ???????????????border-radius: 50px; ???????????????float: left; ???????????????height: 23px; ???????????????border: 1px solid #ccc; ???????????????background: #E0E0E0; ???????????????margin-top: 14px; ???????????????margin-right: 10px; ???????????????overflow: hidden; ???????????} ???????????????????????#search { ???????????????width: 141px; ???????????????height: 37px; ???????????????font-size: 14px; ???????????????line-height: 14px; ???????????????color: #959595; ???????????????padding-bottom: 2px; ???????????} ???????????????????????#his-dele { ???????????????width: 22px; ???????????????height: 22px; ???????????????line-height: 22px; ???????????????display: inline-block; ???????????????background: #E0E0E0; ???????????????color: #fff; ???????????????border-radius: 50%; ???????????????text-align: center; ???????????????margin-left: 10px; ???????????????float: right; ???????????????position: relative; ???????????????top: -26px; ???????????} ???????</style> ???</head> ???<body> ???????<input class="" id="sec"> ???????<!--搜索框--> ???????<button id="search">搜索</button> ???????<!--历史记录--> ???????<div class="current">最近搜索</div> ???????<div class="delete history" style="width: 100%;float: left"></div> ???????<!--删除按钮--> ???????<div class="history" id="his-dele">X</div> ???????<!--无存储记录--> ???????<div class="Storage" style="width: 100px;height: 100px;margin: 0 auto;">无存储记录</div> ???????<script src="../js/jquery-1.11.0.js"></script> ???????<script> ???????????/*搜索记录相关*/ ???????????var hisTime; //获取搜索时间数组 ???????????var hisItem; //获取搜索内容数组 ???????????var firstKey; //获取最早的1个搜索时间 ???????????function init() { ???????????????hisTime = []; //时间数组置空 ???????????????hisItem = []; //内容数组置空 ???????????????for(var i = 0; i < localStorage.length; i++) { //数据去重 ???????????????????if(!isNaN(localStorage.key(i))) { //判断数据是否合法 ???????????????????????hisTime.push(localStorage.key(i)); ???????????????????} ???????????????} ???????????????if(hisTime.length > 0) { ???????????????????hisTime.sort(); //排序 ???????????????????for(var y = 0; y < hisTime.length; y++) { ???????????????????????localStorage.getItem(hisTime[y]).trim() && hisItem.push(localStorage.getItem(hisTime[y])); ???????????????????} ???????????????} ???????????????console.log(hisTime); ???????????????console.log(hisItem); ???????????????$(".delete").html(""); //执行init(),每次清空之前添加的节点 ???????????????$(".Storage").show(); ???????????????for(var i = 0; i < hisItem.length; i++) { ???????????????????$(".delete").prepend(‘<div class="word-break">‘ + hisItem[i] + ‘</div>‘); ???????????????????if(hisItem[i] != ‘‘) { ???????????????????????$(".Storage").hide(); ???????????????????} ???????????????} ???????????} ???????????init(); //调用 ???????????$("#search").click(function() { ???????????????var value = $("#sec").val(); ???????????????var time = (new Date()).getTime(); ???????????????if(!value) { ???????????????????alert("你未输入搜索内容"); ???????????????????return false; ???????????????} ???????????????//输入的内容localStorage有记录 ???????????????if($.inArray(value, hisItem) >= 0) { ???????????????????for(var j = 0; j < localStorage.length; j++) { ???????????????????????if(value == localStorage.getItem(localStorage.key(j))) { ???????????????????????????localStorage.removeItem(localStorage.key(j)); ???????????????????????} ???????????????????} ???????????????????localStorage.setItem(time, value); ???????????????} else { ???????????????????localStorage.setItem(time, value); ???????????????} ???????????????init(); ???????????}); ???????????//清除记录功能 ???????????$("#his-dele").click(function() { ???????????????var f = 0; ???????????????for(; f < hisTime.length; f++) { ???????????????????localStorage.removeItem(hisTime[f]); ???????????????} ???????????????init(); ???????????}); ???????????//苹果手机不兼容出现input无法取值以下是解决方法 ???????????$(".delete").on("click", ".word-break", function() { ???????????????var div = $(this).text(); ???????????????$(‘#sec‘).val(div); ???????????}); ???????</script> ???</body></html>2.在react的框架中如何实现？
JS代码如下：
jsinarray(value,hisItem){ ?????const { organsearchhisTime = {} } = this.state; ???const { hisTime = [] } = organsearchhisTime; ?????const time = (new Date()).getTime()+‘‘; ?????let firstKey = null; ???????if(hisItem != ‘‘){ ?????????console.log(111); ?????????for( var k in hisItem){ ???????????if( hisItem[k] == value ){ ???????????????for(let j = 0; j < localStorage.length; j++) { ???????????????????????if(value == localStorage.getItem(localStorage.key(j))) { ???????????????????????????localStorage.removeItem(localStorage.key(j)); ???????????????????????} ???????????????????} ???????????????console.log(‘time:‘+hisItem); ???????????????console.log(‘value:‘+value); ???????????????????localStorage.setItem(time, value); ???????????} ???????????//清除第一条数（据限制数据为十条） ???????????if(k == hisItem.length-1){ ???????????????if(hisItem.length > 9){ ???????????????????firstKey = hisTime[hisTime.length-1]; ???????????????????????localStorage.removeItem(firstKey); ???????????????????localStorage.setItem(time, value); ???????????????}else{ ???????????????????localStorage.setItem(time, value); ???????????????} ???????????} ???????} ?????}else{ ?????????console.log(222); ?????????localStorage.setItem(time, value); ?????} ???this.init(); ???} ???//历史纪录 ?init() { ???????let { hisTime, hisItem, organsearchhisTime = {}, organsearchhisItem = {} } = this.state; ???????hisTime = []; ???????hisItem = []; ???????console.log(localStorage) ???????for(let i = 0; i < localStorage.length; i++) { //数据去重 ???????????if(!isNaN(localStorage.key(i))) { //判断数据是否合法 ???????????????hisTime.push(localStorage.key(i)); ???????????} ???????} ???????if(hisTime.length > 0) { ???????????hisTime.sort(); //排序 ???????????for(let y = 0; y < hisTime.length; y++) { ???????????????localStorage.getItem(hisTime[y]).trim() && hisItem.push(localStorage.getItem(hisTime[y])); ???????????} ???????} ???????//将数组反序 ???????hisTime = hisTime.reverse(); ???????hisItem = hisItem.reverse(); ???????console.log("hisTime:"+hisTime); ???????console.log(".reverse():"+hisItem); ???????this.setState({ ???????????organsearchhisTime: {hisTime}, ???????????organsearchhisItem: {hisItem}, ???????}); ???} ???//清除记录 ?removeItemhisTime(){ ?????let f = 0; ?????const { organsearchhisTime = {} } = this.state; ???const { hisTime = [] } = organsearchhisTime; ???????for(; f < hisTime.length; f++) { ???????????localStorage.removeItem(hisTime[f]); ???????} ???????this.init(); ?} ???????注意：以上代码所存localStorage数据是将一次搜索的文案存为一条localStorage，后续如再有localStorage数据将需要存储，那么就不能用以上的数据格式存储，同时，将会照成大量的localStorage数据，同时给用户带来较多的存储量。
优化：将一个地方使用的localStorage存储数据存在一条localStorage中，不与其他地方localStorage数据冲突，同时减少localStorage的存储数量。
代码如下：
//是否有一样的 ?jsinarray(value,hisItem){ ?????const { organsearchhisTime = {} } = this.state; ?????const time = (new Date()).getTime()+‘‘; ?????let firstKey = null; ?????let arrayList= JSON.parse(localStorage.getItem("historylist"))||[];// ???console.log(arrayList) ?????//输入的内容localStorage有记录 ?????let obj={‘name‘:value} ?????if(arrayList.length>0){ ???????for( let k in arrayList){ ???????????if(arrayList[k].name==value){ ???????????????arrayList.splice(k,1); ???????????} ???????} ???????if(arrayList.length>9){ ???????????arrayList.pop(); ???????????arrayList.unshift(obj); ???????}else{ ???????????arrayList.unshift(obj); ???????} ???}else{ ???????arrayList.push(obj); ???} ?????localStorage.setItem(‘historylist‘, JSON.stringify(arrayList)); ???this.init(); ???} ???//历史纪录 ?init() { ???????let { hisItem, organsearchhisTime = {}, organsearchhisItem = {} } = this.state; ???????hisItem = []; ???????console.log(localStorage); ???????hisItem = localStorage.getItem(‘historylist‘); ???????hisItem = JSON.parse(hisItem); ???????console.log(hisItem);// ???????console.log(students); ???????if(hisItem == null){ ???????????hisItem = ""; ???????????this.setState({ ???????????????organsearchhisItem: {hisItem}, ???????????}); ???????}else{ ???????????this.setState({ ???????????????organsearchhisItem: {hisItem: hisItem.map((historylist) => { return historylist.name })}, ???????????}); ???????} ???} ???//清除记录 ?removeItemhisTime(){ ???????localStorage.removeItem("historylist"); ???????this.init(); ?}以上优化的是react中使用的 localStorage 方法，jq版原理也是一样的，我这就不一一做优化了。
H5与web端如何用localStorage实现历史纪录？
原文地址：https://www.cnblogs.com/dreambin/p/9639465.html