H5与web端如何用localStorage实现历史纪录？

Posted 2021-01-05 夜雨叶落

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了H5与web端如何用localStorage实现历史纪录？相关的知识，希望对你有一定的参考价值。

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实现历史纪录？的主要内容，如果未能解决你的问题，请参考以下文章

在移动端如何用swiper实现导航栏效果

在服务器端如何用JNI实现 NavMesh寻路

手机端如何用JS实现触屏表格列左右滑动的效果