使用localStorage将搜索商品的记录保存在本地

最新推荐文章于 2022-12-13 23:35:13 发布

weixin_30315905

最新推荐文章于 2022-12-13 23:35:13 发布

阅读量655

点赞数

原文链接：http://www.cnblogs.com/qiuchuanji/p/7724983.html

版权

项目需求:

　　1.将用户搜索商品的记录保存在本地，形成历史搜索记录

　　2.如果本地有历史搜索记录就显示，如果没有则隐藏

　　3.在input中输入内容，点击按钮进行搜索，要同时在本地保存历史搜索记录

所遇倒的问题：

　　1.在APP中保存历史搜索记录是没有问题的，但是如果在用户切换账号之后有可能共享历史记录，

　　　　解决办法：取到用户ID， window.localStorage.setItem("record"+userID,recordArr); 根据用户ID生成不同的本地存储key值，

　　　　　　　　　那么取值的时候也是一样，这样就不会造成历史记录共享了。

　　2.第一个问题解决后有第二个问题，用户的搜索记录是多条的，所以当时想到用数组来存储，但是本地只能保存字符串，就算用数组，取出来的值还是以长字符串显示

　　　　解决办法：还是以数组的形式保存，取值的时候对字符串进行操作，以逗号进行分割形成新的数组，然后进行循环显示

　　3.保存历史搜索数据。分为两种情况，第一种是有数据的存储，第二种是在有数据的时候新增数据

　　　　解决办法：为了防止冲突，最好是使用两个数组进行存储，一个空数组和一个操作字符串形成的新的数组

以下为页面代码，不提供CSS代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <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" type="text/css" href="css/reset.css"/>
    <link rel="stylesheet" href="css/search_goods.css" />
    <script src="js/flexible.debug.js"></script>
    <script src="js/flexible_css.debug.js"></script>
    <script src="js/jquery-2.1.4.min.js"></script>
</head>
<body>
    <div class="app" style="display:block;">
        <!--搜索框-->
        <div class="nav">
            <div class="navL fl">
                <i></i>
                <input type="text" placeholder="输入您想找的商品" class="record_input">
            </div>
            <div class="navR fl">
                <button class="record_btn">搜索</button>
            </div>
        </div>
        <div class="hot_history" style="display: block;">
            <!--搜索历史-->
            <div class="history" style="display: block;">
                <p class="history_tit">搜索历史</p>
                <ul class="history_list">
                    <!--搜索历史循环列表-->
                    <li class="whole" style="display:none;">全部搜索记录</li>
                    <li class="close_whole" style="display:none;">清除搜索记录</li>
                </ul>
            </div>
        </div>
        <div class="hidden" style="display: none;">10</div>
    </div>
    <!--数据加载失败-->
    <div class="fail" style="display: none;">
        <img src="img/Network.png">
        <p class="result">数据加载失败，可能网络异常</p>
        <button class="F5">刷新</button>
    </div>
    <script>
        $(window).ready(function(){
            var userID=$('.hidden').html();//取得ID
            var getRecord=window.localStorage.getItem("record"+userID);//根据用户ID取到记录
            var recordArr=[];
            var recordArr2=[];
            console.log(getRecord);
            if(getRecord==null){
                $('.history').css('display','none');
                //向本地添加记录
                $('.record_btn').click(function(){
                    recordArr.push($('.record_input').val());
                    window.localStorage.setItem("record"+userID,recordArr);
                    $('.record_input').val('');
                });
            }
            else{
                recordArr2=getRecord.split(',');
                if(recordArr2.length>2){
                    $('.whole').css('display','block');
                    var str='';
                    for(var i=0;i<2;i++) {
                        str+='<li class="history_item">'+
                                '<i class="history_i"></i>'+
                                '<span>'+recordArr2[i]+'</span>'+
                                '<i class="x fr" data-index='+i+'></i>'+
                                '</li>';
                    }

                    $('.whole').before(str);

                    //显示全部记录
                    $('.whole').click(function(){
                        var str='';
                        for(var i=2;i<recordArr2.length;i++) {
                            str+='<li class="history_item">'+
                                    '<i class="history_i"></i>'+
                                    '<span>'+recordArr2[i]+'</span>'+
                                    '<i class="x fr" data-index='+i+'></i>'+
                                    '</li>';
                        }

                        $('.whole').before(str);
                        $(this).css('display','none');
                        $('.close_whole').css('display','block');
                    });
                    //清空历史记录
                    $('.close_whole').click(function(){
                        window.localStorage.removeItem('record'+userID);
                        $('.history').remove();
                    })

                }
                else{
                    recordShow(recordArr2);
                }
                //向本地添加记录
                $('.record_btn').click(function(){
                    recordArr2.push($('.record_input').val());
                    window.localStorage.setItem("record"+userID,recordArr2);
                    $('.record_input').val('');
                });

                //删除单条记录
                $('.history_list').on('click','.x',function(){
                    recordArr2.splice($(this).data('index'),1);
                    window.localStorage.setItem("record"+userID,recordArr2);
                    $('.history_item').remove();
                    if(recordArr2.length<3){
                        $('.whole').css('display','none');
                    }
                    recordShow(recordArr2);
                });
                //记录显示
                function recordShow(recordArr2){
                    var str2='';
                    for(var j=0;j<recordArr2.length;j++) {
                        str2+='<li class="history_item">'+
                                '<i class="history_i"></i>'+
                                '<span>'+recordArr2[j]+'</span>'+
                                '<i class="x fr" data-index='+j+'></i>'+
                                '</li>';
                    }
                    $('.whole').before(str2);
                }
            }
        });
    </script>


</body>
</html>