VUE +のマングース+ Node.jsのプロジェクト概要の歴史を保存_localStorage第五章

I.はじめに

1、歴史的な記録の検索の保全にも共通の特徴です。

歴史的な記録の保存の2つの一般的な方法：

localStorage： https://developer.mozilla.org/zh-CN/docs/Web/API/Window/localStorage

sessionStorage： https://developer.mozilla.org/zh-CN/docs/Web/API/Window/sessionStorage

混乱3、いくつかのこと：クッキー、セッション、localStorageを、のsessionStorage

https://www.cnblogs.com/pengc/p/8714475.html

第二に、主なコンテンツ

図1に示すように、紙を作製しました

Vueの-cliの足場は、コードの高い可読性を可能にするために、人工的なウェブストレージを個別のコードファイルのjsに包装することができます

図2に示すように、のlocalStorage更新、削除、クリアメソッドのlocalStorageにカプセル化されています

注意事項：アレイに保存された時間は、本明細書で使用される文字列に変換する必要があるようにのlocalStorageは、配列に格納することができない。JSON.stringify（）

/ * 
UpdateSearch（）アイデア：
          1）各検索のために物事を格納する配列を必要とする

          検索履歴レコードの保存のアレイ既に存在する場合は、最初のローカル参照する場合、各更新メソッドが呼び出される2）
        
          直接が追加されている場合3）、それは新しい上に存在しない場合は
     
          、検索配列のlocalStorageの存在下で）4 

* / 


エクスポート機能updateSearch（searchval）{ 
  保管しましょう = window.localStorageを、
   IF（storage.search）{ // ストレージ内の検索の配列がある場合、履歴保存 
    LETを= JSON.parse検索（storage.search）; // 検索履歴列を削除し、配列に彼

    のlet指数 = search.indexOf（searchvalは）; // 検索配列searchval入力内部検索するかどうか
    のiF（インデックス！= -1）{ // 見つけ、
      ; search.splice（インデックス,. 1）// 1削除する前に、格納された 
      search.unshift（searchvalを）; // プリペンド配列がちょうど入っ 
    } 他 { // 見つからない
      IF（search.length <= 7 ）{ // 検索が配列よりも小さい場合7。 
        search.unshift（searchval）; // searchvalちょうどアレイの正面に挿入見つける 
      } 他 { // 。検索は既に内部より大きい7 
        search.splice（-search.length 1 ,. 1。 ）; // 最後の削除 
        search.unshift（searchvalを）; // だけ前方に挿入される入力アレイ
      } 
    } 
    検索 = JSON.stringify（検索）; //アレイは、アレイのlocalStorage保存サポートされていないので、文字列記憶されているのlocalStorageに変換さ 
    storage.setItem（「検索」;、検索）
  } 他 { // そうでない場合には 
    LET =検索JSON.stringify（[searchvalを]）; 
    storage.setItem （検索を「検索」）; // 検索アレイを備えていない場合
  } 
} 

// 履歴レコードの削除 
エクスポート関数deleteOne（インデックス）{ 
  LETストレージ = ; window.localStorage 
  LET探索 = JSON.parse（storage.searchを）; // 配列に検索 
  search.splice（インデックス,. 1 ）; 
  検索 = JSON.stringify（検索）。
  storage.setItem（ '検索'、検索）; // 保存
}
 // すべての履歴削除 
エクスポート機能をクリア（）{ 
  ましょうストレージ = window.localStorage; 
  letの検索 = JSON.stringify（[]）; // クリアセット場合、アレイ 
  storage.setItem（ '検索' 、検索）; 
}

使用して3、

手順1：コンポーネント]ページには、オンデマンドでロードする必要があります

  '../../common/js/localStorage' からインポート{updateSearch}

ステップ2：あなたは歴史の配列について更新し、各コール検索方法

  // 検索機能
      getSearchList（）{ 
        updateSearch（この .searchText）; // 検索リストに現在のテキスト

        この $ Axios.get（ `/ API /検索= $ {検索テキスト？。この .searchText}`）.then （（RES）=> {
          この .user = res.data.user;
           この .moodList = res.data.moodList; 

         IF（この .user || この.moodList.length）{
             この .resNo = falseに; 
          } 他{
             この .resNo = trueに; 
          }
          console.log（RES）
        }）
      }、

第三ステップ：削除し、コールを空にする

方法：{ 
      GETLIST（）{ // locallStorage格納されている現在の検索リスト取得
        IF （window.localStorage.search）{
           この .searchList = JSON.parse（window.localStorage.search）; 
        } 
      }、
      _deleteOne（インデックス）{ 
        deleteOneを（インデックス）; 
        この.getList（）; 
      }、
      _clear（）{ 
        クリア（）; 
        この .getList（）; // ここでは、現在の配列を取得するために、リアルタイムでの検索の歴史を忘れてはなりません
      } 
    }

VUE +のマングース+ Node.jsのプロジェクト概要の歴史を保存_localStorage第五章

おすすめ