移動端與pc端如何用localStorage實現歷史紀錄？

本文轉載自查看原文 2018-09-13 11:23 1567 JavaScript

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版原理也是一樣的，我這就不一一做優化了。

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 實現過程全紀錄——自己寫一個“微信朋友圈”（包括移動端與PC端） post歷史紀錄消失用Vue寫的歷史紀錄 idea查看項目的歷史紀錄 pc端和移動端的區別移動及pc端實現簽名功能 pc端與移動端的區別判斷是PC端還是移動端如何判斷是pc端還是移動端實現PC端和移動端的界面切換