アイデア：
1.ブラウザのキャッシュは永久に検索履歴データを保存します。
2.ページ変数にページの初期化データを保存します。
3.検索履歴や削除に加えてどのようにキャッシュを同期させること。
---------------- ----------------コードで直接見て
*ここでのコードの断片である、遠位VUEを使用してください*
divの1ページ
<！---历史搜索開始---->
<divのスタイル= "マージントップ：46px">
<divのV-IF = "this.showFlag ===真"クラス= "検索履歴を">
<div要素クラス= "チップイン言葉">
<divのスタイル= "フロート：左;">
<H4>搜索历史</ H4>
</ div>
<divのスタイル= "フロート：右;" @> = "clearHistoryItems"をクリックし
、<IMG SRC = "../../のimg / IMG /削除-1.pngを"幅= "16pxに" />
</ div>
</ div>
<Pスタイル= "margin-底：10pxの">＆NBSP; </ P>
<DIV V-ため=" searchHistoryListで（項目、インデックス）」：キー= "インデックス"
@クリック= "searchByHistoryKeyWord（アイテム）"クラス= "履歴キーワード"> ＆NBSP;＆NBSP; {{アイテム}}＆NBSP;＆NBSP。
</ div>
</ div>
</ div>
<！---履歴検索終了---->
2. VUEデータ
データ（）{
リターン{
//検索履歴
searchHistoryListは：[]、
//は、検索履歴マーク
showFlagを：falseに、
loadShow：偽へ
}
}、
いくつかの方法は、履歴を検索3.vue
方法：{
showHistory（）{
（this.searchHistoryList.length> 0）{IF
this.showFlag = trueに
}
、}
//クリア履歴
）（clearHistoryItems {
localStorage.removeItem（ 'historyItems'）
this.searchHistoryList = []
この=偽.showFlagに
、}
、濾過された空気の検索結果のレコードが追加される//ヌルフィルタ
{appendKeywords（値）
/ **
* 1一部のキーワードを追加していないが
10を超える場合* 2、配列の先頭に追加します最後のものは削除されます
* 3がキャッシュに追加
* /
=真appendFlagにVAR
IF（this.searchHistoryList！== NULL && this.searchHistoryList！==未定義&& this.searchHistoryList.length> 0）{
this.searchHistoryList.forEach（関数（currentValueは、インデックス）{
IF（currentValueは===値）{
appendFlag = FALSE
リターン
}
}）
//判断-添加
する場合（appendFlag === TRUE）{
//长度判断
する場合（this.searchHistoryList.length> = 10）{
this.searchHistoryList.unshift（値）
this.searchHistoryList.pop（ ）
}他{
this.searchHistoryList.unshift（値）
}
localStorage.setItem（ 'historyItems'、JSON.stringify（this.searchHistoryList））
}
}そうでなければ{
this.searchHistoryList = []
this.searchHistoryList.push（値）
localStorage.setItem（ 'historyItems'、JSON.stringify（this.searchHistoryList ））
}
}、
searchByHistoryKeyWord（アイテム）{
this.loadTip = ''
this.queryData.inputInfo =項目
//查询
fetchGetDataByKeyWord（アイテム）.then（応答=> {
//查询赋值
this.dataList = response.data.body .DATA
（this.dataList.length === 0）{もし
this.loadTip = '没有符合条件数据'
this.showHistory（）
}他{
this.loadTip = ''
this.showFlag =偽
}
}）
}
}