検索履歴を実装するjQueryプラグイン

毎日jQueryプラグイン - 検索履歴を作成するためのものです。参考までに、具体的な内容は次のとおりです。

効果は以下のとおりです

コードセクション

<!DOCTYPE html>
<html>
 <ヘッド>
  <メタ文字セット="utf-8">
  <title>検索履歴を実行する</title>
  <script src="js/jquery-3.4.1.min.js"></script>
  <スタイル>
   *{
    マージン: 0px;
    パディング: 0px;
   }
   #検索ボックス{
    /* 境界線: 1px 実線ライトグレー; */
    高さ: 40px;
    幅: 720ピクセル;
    位置: 相対的;
   }
   #検索入力{
    境界線: 1px 実線のライトグレー;
    境界線の半径: 5px 0px 0px 5px;
    高さ: 28px;
    位置: 絶対;
    右: 45px;
    上: 5px;
    左: 5px;
    幅: 670ピクセル;
    アウトライン: なし;
    テキストインデント: 12px;
    フォントサイズ: 12px;
    色: グレー;
   }
   #検索入力:フォーカス{
    境界線の色: rgb(252,25,68);
   }
   #検索入力:フォーカス~#その他のボックス{
    ディスプレイ:フレックス;
   }
   #検索ボタン{
    高さ: 30px;
    幅: 40px;
    境界線: なし;
    境界線の半径: 0px 5px 5px 0px;
    背景色: rgb(252,25,68);
    位置: 絶対;
    右: 5px;
    上: 5px;
    ディスプレイ: フレックス;
    コンテンツの中央揃え: 中央;
    アイテムの位置を中央揃えにします。
    カーソル: ポインタ;
   }
   #検索ボタン画像{
    幅: 25px;
    高さ: 25px;
   }
   #モアボックス{
    境界線: 1px 実線のライトグレー;
    位置: 絶対;
    上: 40px;
    左: 5px;
    右: 5px;
    高さ: 370ピクセル;
    zインデックス: 7;
    境界線の半径: 2px;
    ディスプレイ: フレックス;
    表示: なし;
   }
   ＃押す{
    フレックス: 1;
    /* 境界線: 1px 実線ライトグレー; */
    位置: 相対的;
   }
   ＃歴史{
    /* 表示: なし; */
    フレックス: 1;
    /* 境界線: 1px 実線ライトグレー; */
    位置: 相対的;
   }
   。頭{
    位置: 絶対;
    上: 0px;
    幅: 100%;
    高さ: 30px;
    border-bottom: 1px 実線ライトグレー;
    フォントサイズ: 12px;
    ディスプレイ: フレックス;
    アイテムの位置を中央揃えにします。
    テキストインデント: 12px;
    色: rgb(252,85,49);
   }
   。主要{
    位置: 絶対;
    上: 30px;
    幅: 100%;
    下: 0px;
    オーバーフロー-x:非表示;
    オーバーフロー-y: 自動;
   }
   。アイテム{
    フォントサイズ: 12px;
    高さ: 30px;
    ディスプレイ: フレックス;
    アイテムの位置を中央揃えにします。
    テキストインデント: 12px;
    カーソル: ポインタ;
   }
   .item:ホバー{
    背景色: ライトグレー;
   }
  </スタイル>
 </head>
 <本文>
  <div id="検索ボックス">
   <input id="searchinput" placeholder="c下" />
   <button id="searchbtn"><img src="img/sc.png"></button>
   <div id="morebox">
    <div id="履歴">
     <div class="head">検索履歴</div>
     <div class="main"></div>
    </div>
    <div id="push">
     <div class="head">ホットなおすすめ</div>
     <div class="main">
      <div class="item">マイクロソフトがついに JDK に対して措置を講じた</div>
      <div class="item">Xiaomi のワイヤレス充電テクノロジー</div>
      <div class="item">一般的な Linux コマンド</div>
      <div class="item">A Fei は一生懸命働いており、文章を書くのが得意です</div>
      <div class="item">毎日 jQuery プラグインを学習すれば、プラグインは不要になります。それは道徳の低下か、それとも人間性の歪みか?
     </div>
    </div>
   </div>
  </div>
 </本文>
</html>
<スクリプト>
 $(ドキュメント).ready(関数(){
  //検索をクリックするたびにキャッシュに保存されます//
  $(".item").click(function(){
   var str = $(this).text();
   $("#検索入力").val(str)
  })
   // localStorage["history"] = '[]'//キャッシュをクリアします。
  履歴を描画します。
  $("#searchbtn").click(function(){
   var str = $("#searchinput").val();
   if(str&&str!=""){
    var arr = getSession();
    arr.push(str);
    localStorage["history"] = JSON.stringify(arr);
    履歴を描画します。
   }
  })
  セッションを取得します。
  //キャッシュに基づいて履歴を検索し、検索履歴関数drawhistory(){を生成します
   var arr = getSession();
   $("#history .main .item").remove();
   arr.forEach(item=>{
    var $item = $("<div class='item'>"+item+"</div>");
    $item.appendTo($("#history .main"));
   })
  }
  //キャッシュを取得する関数 getSession(){
   var ses = localStorage["履歴"];
   var arr = ses==undefined?[]:JSON.parse(ses);
   arr を返します。
  }
 })
</スクリプト>