首先，来看下效果图(样式什么的就不必吐槽了哈)

html代码

css代码

* {

margin: 0;

padding: 0;

}

input {

border: 0;

vertical-align: middle;

float: left;

}

#searchbox {

width: 300px;

height: 50px;

background: #fff;

margin: 100px auto;

border: 1px solid #ccc;

position: relative;

}

#inpt {

width: 240px;

height: 50px;

outline: none;

text-indent: 10px;

}

#btn {

width: 60px;

height: 50px;

cursor: pointer;

}

/* 历史记录框 */

#historybox {

width: 280px;

padding: 10px 10px 50px;

border: 1px solid #ccc;

position: absolute;

top: 50px;

left: -1px;

/* 隐藏 */

display: none;

}

#historybox h3 {

margin-bottom: 10px;

}

#list {

list-style: none;

}

#list .on {

float: left;

border: 1px solid #ccc;

background: #aaa;

height: 30px;

line-height: 30px;

margin: 0 2px;

border: 1px solid #ccc;

border-radius: 5px;

}

#list .active {

color: #fff;

text-decoration: none;

padding: 2px;

}

js代码(这里需引入jQuery)

$(function () {

let max_history = 7;// 存储最大历史数据

// 鼠标移入事件

$('#inpt').on('focus', function () {

$('inpt').val = '';

let data = localStorage.getItem('data'); //从本地存储中读取数据

if (!data) {

$('#historybox').css('display', 'none');

} else {

$('#historybox').css('display', 'block');

historydata(JSON.parse(data)); // 渲染数据

}

})

// 鼠标移出事件

$('#inpt').on('blur', function () {

$('#historybox').css('display', 'none');

init_history();// 初始化历史记录，清空记录

})

//点击搜索按钮时，将搜索内容添加到本地存储

$('#btn').on('click', function () {

var search = inpt.value;

var data = localStorage.getItem('data'); //从本地存储中读取数据

if (data) {

var arr = JSON.parse(data); //如果有数据则转换成对象或数组

} else {

var arr = []; //如果没有数据，则新增一条

}

arr.push(search);

removalDuplicate(arr);// 对用户输入值进行处理(去重-筛选)

localStorage.setItem('data', JSON.stringify(arr)); //将数据写入到本地存储中

})

// 数组去重-筛选函数

function removalDuplicate(arr) {

for (let i = 0; i < arr.length; i++) {

var arritem = arr[i].trim(); // 去除字符串两端空格

// 如果值为空，则不添加

if (arritem == '') {

arr.splice(i, 1);

}

if (arritem !== "") {

for (let j = i + 1; j < arr.length; j++) {

if (arr[i] == arr[j]) {

arr.splice(i, 1);//如果第二次输入的值与第一次相同，则添加第二次的值

}

}

}

}

return arr;

}

// 渲染数据

function historydata(searchArr) {

searchArr.reverse();//反转，从后往前添加

// 遍历出数据

if (searchArr.length <= max_history) {//如果存储数据小于等于max_history,则遍历渲染

for (let i = 0; i < searchArr.length; i++) {

$('#list').append(`

${searchArr[i]}`);

}

} else {//否则渲染最大历史记录条数

for (let i = 0; i < max_history; i++) {

$('#list').append(`

${searchArr[i]}`);

}

}

}

// 初始化-清空历史记录

function init_history() {

$('#list').html('');

}

})

总结

以上所述是小编给大家介绍的使用JS location实现搜索框历史记录功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！