搜索历史缓存

最新推荐文章于 2024-03-10 13:39:10 发布

theOtherSky

最新推荐文章于 2024-03-10 13:39:10 发布

阅读量318

点赞数

分类专栏：前端例子移动端

本文链接：https://blog.csdn.net/qq_35181466/article/details/106925959

版权

前端例子同时被 2 个专栏收录

21 篇文章 1 订阅

订阅专栏

移动端

7 篇文章 0 订阅

订阅专栏

展示图

html：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>搜索</title>
    <link rel="stylesheet" href="css/all.css">
</head>
<style>
    .search_input {
        height: 2.4rem;
        padding: 0rem 0rem;
        position: relative;
        border-bottom: 0px solid #eee;
        z-index: 1000;
    }

    .search_input .search_sub {
        position: absolute;
        top: 0.91rem;
        left: 0.64rem;
        width: 0.30rem;
        height: 0.30rem;
        z-index: 10;
    }

    #searchInput {
        background-color: #fff;
        border-radius: 0.4rem;
        width: 6.94rem;
        height: 0.7rem;
        border: 0px solid #fff;
        font-size: 0.24rem;
        color: #333;
        padding-left: 0.8rem;
        box-sizing: border-box;
        position: absolute;
        top: 0.6rem;
        left: 0.28rem;
        z-index: 8;
    }

    .search_content {
        top: 2.4rem;
    }

    .noBack div {
        top: 2.4rem;
        height: 75vh;
    }
    .noBack img{
        margin-top:1.55rem;
    }
    #searchInput[type=search]::-webkit-search-cancel-button {
        -webkit-appearance: none;
        position: relative;
        height: 0.18rem;
        width: 0.18rem;
        border-radius: 50%;
        background: #EBEBEB url("img/no.png") no-repeat center;
        background-size: 0.18rem 0.18rem;
        margin-right: 0.2rem;
    }
    .history_btn{
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .history_btn span{
        color: #666;
        margin-right: 0.2rem;
        display: none;
    }
    .history_btn span.active{
        display: block;
    }
    .history_btn i{
        display: none;
    }
    .history_btn i.active{
        display: block;
    }
    .search_alike span{
        position: relative;
    }
    .search_alike span i{
        position: absolute;
        top: 0;
        right: 0;
        width: 0.2rem;
        height: 0.2rem;
        background: url("img/no_02.png");
        background-size: 100% 100%;
        display: none;
    }
    .search_alike span i.active{
        display: block;
    }
</style>

<body>
    <div class="search">
        <header class="header_bg"></header>
        <header class="header"><a href="javascript:history.go(-1)"></a>搜索</header>
        <div class="search_bg"></div>
        <div class="search_input">
            <img src="img/search.png" class="search_sub">
            <form action="" id="form">
                <input type="search" placeholder="搜疾病、症状、药品" id="searchInput">
            </form>
            <!-- 这里是输入input的联联想搜索，也暂时用不上 -->
            <ul class="search_content">
                <!-- <li>贝赫切特综合征</li>
                <li>肠病性关节炎</li>
                <li>肠病性肢端皮炎</li>
                <li>肠病性肢端皮炎综合征</li>
                <li>肠病疝</li>
                <li>肠壁水肿增厚</li> -->
            </ul>
            <div class="noBack">
                <div></div>
                <img src="img/orderenpty.png">
            </div>
        </div>
        <div class="history">
            <div class="search_title">
                <span id="ceshi">搜索历史</span>
                <p class="history_btn">
                    <span onclick="deleteAll()">清除全部</span>
                    <span onclick="deleteOk()">完成</span>
                    <i class="delete active" onclick="deleteOne()"></i>
                </p>
            </div>
            <div class="search_alike search_history">
                <!-- <span>五脏六腑虚损</span>
                <span>皮肤科</span>
                <span>骨质增生</span>
                <span>糖尿病</span>
                <span>高血压</span>
                <span>高血脂</span> -->
            </div>
        </div>
    </div>
    <div id="delectAll">
        <div class="delectAllBg" onclick="cancel()"></div>
        <ul>
            <li>
                <p>提示</p>
            </li>
            <li><span>确定清空搜索历史吗？</span></li>
            <li class="delectAllBtn">
                <button onclick="cancel()">取消</button>
                <button onclick="affirm()">确定</button>
            </li>
        </ul>
    </div>
    <div id="tipDiv">
        <center><img style="width:25px;" src="img/lodding.gif"></center>
        <div id="tipInfo"></div>
    </div>
</body>
<script src="js/jquery-3.1.1.min.js"></script>
<script src="js/box.js"></script>
<script>
    // 实时监测$("#searchInput")的输入框，这里暂时用不上
    // $("#searchInput").bind("input propertychange", function (event) {
    //     console.log($("#searchInput").val())
    //     if ($("#searchInput").val() != '' && $("#searchInput").val() != undefined) {
    //         $('.search_content').addClass('active');
    //         $('.search_history').css({display:'none'});
    //         $('.hot').css({display:'none'});
    //     } else {
    //         $('.search_history').css({display:'flex'});
    //         $('.hot').css({display:'block'});
    //         $('.search_content').removeClass('active');
    //     }
    //     if ($("#searchInput").val() == '' || $("#searchInput").val() == undefined) {
    //         $('.noBack').removeClass('active');
    //     }
    // });


    // // 搜索历史
    initLocalStorage();
    // $('#form').submit(function (e) {
    //     e.preventDefault()
    //     e.stopPropagation()
    //     var value = $("#searchInput").val();
    // })
    //标签搜索
    $('.search_sub').on('click', function () {
        setHistoryItems($("#searchInput").val());
        // 清除缓存刷新页面
        location.reload();
    })
    // 点击弹出删除按钮
    function deleteOne(){
        $('.search_alike span i').addClass('active')
        $('.history_btn span').addClass('active')
        $('.history_btn i').removeClass('active')
    }
    // 点击完成
    function deleteOk(){
        $('.search_alike span i').removeClass('active')
        $('.history_btn i').addClass('active')
        $('.history_btn span').removeClass('active')
        // 清除缓存刷新页面
        location.reload();
    }
    // 清除一个
    function deleteEve(num){
        clearHistoryOne(num)
        event.stopPropagation();
    }
    // 清除全部的弹框
    function deleteAll() {
        $('#delectAll').addClass('active');
    }
    // 取消
    function cancel() {
        $('#delectAll').removeClass('active');
    }
    // 确定清除全部
    function affirm() {
        clearHistory()
        cancel()
    }
    // --------------------------------
    (function (doc, win) {
        //      用原生方法获取用户设置的浏览器的字体大小(兼容ie)
        if (doc.documentElement.currentStyle) {
            var user_webset_font = doc.documentElement.currentStyle['fontSize'];
        }
        else {
            var user_webset_font = getComputedStyle(doc.documentElement, false)['fontSize'];
        }
        //      取整后与默认16px的比例系数
        var xs = parseFloat(user_webset_font) / 16;
        //      设置rem的js设置的字体大小
        var view_jsset_font, result_font;
        var docEl = doc.documentElement,
            resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
            clientWidth,
            recalc = function () {
                clientWidth = docEl.clientWidth;
                if (!clientWidth) return;
                if (!doc.addEventListener) return;
                // if (clientWidth < 750) {
                    //              设置rem的js设置的字体大小
                    view_jsset_font = 100 * (clientWidth / 750);
                    //              最终的字体大小为rem字体/系数
                    result_font = view_jsset_font / xs;
                    //              设置根字体大小
                    docEl.style.fontSize = result_font + 'px';
                // } else {
                //     docEl.style.fontSize = 100 + 'px';
                // }
            };
        win.addEventListener(resizeEvt, recalc, false);
        doc.addEventListener('DOMContentLoaded', recalc, false);
    })(document, window);
</script>

</html>

对应的box.js代码

// 搜索历史缓存开始
let toVal = ''
function initLocalStorage() {
    let { historyItems } = localStorage;
    console.log(historyItems + '--historyItems--')
    if (historyItems !== undefined) {
        const onlyItem = historyItems.split('|');
        if (onlyItem.length > 0) {
            key = '';
            for (var i = 0; i < onlyItem.length; i++) {
                key = key + '<span>' + onlyItem[i] + '<i onclick="deleteEve('+i+')"></i></span>'
            }
            $('.search_history').html(key);
        }
    }
    // $("#searchInput").val('');
    // $('.search_content').removeClass('active');
}
function setHistoryItems(keyword) {
    toVal = keyword
    var maxNum = 5;
    keyword = keyword.trim();
    let { historyItems } = localStorage;
    if (historyItems === undefined) {
        localStorage.historyItems = keyword;
        console.log(localStorage + '------')
    } else {
        var onlyItem = historyItems.split('|').filter(e => e != keyword);
        if (onlyItem.length >= 5) {
            onlyItem = onlyItem.splice(0, maxNum - 1);
        }
        if (onlyItem.length > 0) historyItems = keyword + '|' + onlyItem.join('|');
        localStorage.historyItems = historyItems;
    }
    initLocalStorage();
    // toDrugList(toVal)
}
// 清除缓存
function clearHistory() {
    //清除全部缓存
    localStorage.removeItem('historyItems');
    // 清除缓存刷新页面
    location.reload();
}
// 清除单个缓存
function clearHistoryOne(num) {
    let historyItems = localStorage.getItem('historyItems');
    historyItems = historyItems.split('|');
    // historyItems = historyItems.splice($.inArray('测试',historyItems),1);
    historyItems.splice(num, 1)
    let deleteOne = '';
    for (var i = 0; i < historyItems.length; i++) {
        deleteOne = deleteOne + '<span>' + historyItems[i] + '<i onclick="deleteEve('+i+')" class="active"></i></span>'
    }
    $('.search_history').html(deleteOne);
    // historyItems = historyItems.join('|')
    localStorage.setItem('historyItems', historyItems.join('|'));
}
// 搜索历史缓存结束

theOtherSky

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
搜索历史缓存

展示图html：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge">
复制链接

扫一扫

专栏目录