前端cookie记录搜索框的历史，在搜索框下面展示最近五条（多个页面的搜索框历史同步）

最新推荐文章于 2022-08-19 18:57:12 发布

原创

最新推荐文章于 2022-08-19 18:57:12 发布 · 2.1k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#搜索框历史 #前端cookie #cookie保存搜索历史 #jquery cookie #多个页面搜索框历史保持一致

本文介绍如何利用前端cookie实现跨页面搜索框历史记录的同步。通过设置相同cookie名称和路径，确保多个页面的搜索历史保持一致。当用户进行搜索操作时，无论是点击搜索按钮还是按回车键，都会将搜索词保存到cookie中。页面加载时，历史记录会被隐藏，待用户触发时显示。

多个页面的搜索框历史同步只需设置cookie的名称和路径一致即可

.gz_search_tab {
    width: 900px;
    height: 60px;
    line-height: 60px;
    background: #FFF;
    border-radius: 0px 5px 5px 0;
    margin: 0px auto;
    box-shadow: 0 0 10px #999;
}
.gz_search_tab input[type="text"] {
    font-size: 16px;
    width: 730px;
    background: url(serach.png) left center no-repeat;
    height: 60px;
    line-height: 60px;
    border: 0;
    margin-left: 20px;
    text-indent: 40px;
    outline: none;
}
#showHistory{background:#f1f1f1; width: 776px; padding:0px 20px; line-height: 30px; position: absolute; left: 50%; margin-left: -450px;z-index: 99;}
#showHistory span{ font-size:16px; display: block;height: 38px;line-height: 38px;}

<script type="text/javascript" src="jquery-1.8.3.min"></script>
<script type="text/javascript" src="jquery.cookie.js"></script>
<div class="gz_search"&