feat: mix bilibili history

src/components/SearchBar/SearchBar.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { watchOnce } from '@vueuse/core'
 import type { HistoryItem, SuggestionItem } from './searchHistoryProvider'
 import {
   addSearchHistory,
@@ -21,10 +22,6 @@ const searchHistory = shallowRef<HistoryItem[]>([])
 const historyItemRef = ref<HTMLElement[]>([])
 const suggestionItemRef = ref<HTMLElement[]>([])
 
-onMounted(() => {
-  searchHistory.value = getSearchHistory()
-})
-
 function handleInput() {
   selectedIndex.value = -1
   if (keyword.value.length > 0) {
@@ -42,7 +39,7 @@ function handleInput() {
   }
 }
 
-function navigateToSearchResultPage(keyword: string) {
+async function navigateToSearchResultPage(keyword: string) {
   if (keyword) {
     window.open(`//search.bilibili.com/all?keyword=${keyword}`, '_blank')
     const searchItem = {
@@ -50,14 +47,14 @@ function navigateToSearchResultPage(keyword: string) {
       timestamp: Number(new Date()),
     }
     addSearchHistory(searchItem)
-    searchHistory.value = getSearchHistory()
+    searchHistory.value = await getSearchHistory()
   }
 }
 
-function handleDelete(value: string) {
+async function handleDelete(value: string) {
   removeSearchHistory(value)
   searchHistory.value.length = 0
-  searchHistory.value = getSearchHistory()
+  searchHistory.value = await getSearchHistory()
 }
 
 function handleKeyUp() {
@@ -130,6 +127,12 @@ function handleClearSearchHistory() {
   clearSearchHistory()
   searchHistory.value = []
 }
+
+watchOnce(isFocus, async (focus) => {
+  // 延后加载搜索历史
+  if (focus && searchHistory.value.length === 0)
+    searchHistory.value = await getSearchHistory()
+})
 </script>
 
 <template>

src/components/SearchBar/searchHistoryProvider.ts

@@ -1,4 +1,5 @@
 const SEARCH_HISTORY_KEY = 'bew_search_history'
+const BILIBILI_HISTORY_KEY = 'search_history:search_history'
 const SEARCH_HISTORY_LIMIT = 10
 
 export interface HistoryItem {
@@ -9,23 +10,57 @@ export interface SuggestionItem {
   value: string
   timestamp: number
 }
+export interface StorageEvent {
+  type: 'COLS_RES'
+  id?: string
+  key: string
+  value: string
+}
 
 function historySort(historyItems: HistoryItem[]) {
   historyItems.sort((a, b) => b.timestamp - a.timestamp)
   return historyItems
 }
 
-export function getSearchHistory(): HistoryItem[] {
-  const history = localStorage.getItem(SEARCH_HISTORY_KEY)
+export async function getSearchHistory(): Promise<HistoryItem[]> {
+  let history: string | HistoryItem[] | null = localStorage.getItem(SEARCH_HISTORY_KEY)
   if (!history) {
     localStorage.setItem(SEARCH_HISTORY_KEY, JSON.stringify([]))
-    return []
+    history = []
   }
-  return historySort(JSON.parse(history))
+  else {
+    history = JSON.parse(history)
+  }
+
+  const iframe = Array.from(document.getElementsByTagName('iframe')).find(i => i.src.includes('https://s1.hdslb.com/bfs/seed/jinkela/short/cols/iframe.html'))
+  if (iframe && iframe.contentWindow) {
+    function getStorage() {
+      return new Promise<StorageEvent>((resolve) => {
+        iframe!.contentWindow!.postMessage({ type: 'COLS_GET', key: BILIBILI_HISTORY_KEY }, iframe!.src)
+        window.addEventListener('message', (e: MessageEvent<StorageEvent>) => {
+          if (e.origin === 'https://s1.hdslb.com' && e.data && e.data?.type === 'COLS_RES' && e.data?.key === BILIBILI_HISTORY_KEY)
+            resolve(e.data)
+        }, { once: true })
+      })
+    }
+
+    const e = await getStorage()
+    if (e.value && Array.isArray(history)) {
+      try {
+        const h = JSON.parse(e.value)
+        history.push(...Array.isArray(h) ? h : [])
+      }
+      catch {
+        // ignore
+      }
+    }
+  }
+
+  return historySort(history as HistoryItem[])
 }
 
-export function addSearchHistory(historyItem: HistoryItem) {
-  let history = getSearchHistory()
+export async function addSearchHistory(historyItem: HistoryItem) {
+  let history = await getSearchHistory()
 
   let hasSameValue = false
   history.forEach((item) => {
@@ -47,12 +82,15 @@ export function addSearchHistory(historyItem: HistoryItem) {
   localStorage.setItem(SEARCH_HISTORY_KEY, JSON.stringify(history))
 }
 
-export function removeSearchHistory(value: string) {
-  let history = getSearchHistory()
+export async function removeSearchHistory(value: string) {
+  let history = await getSearchHistory()
   history = history.filter(item => item.value !== value)
   localStorage.setItem(SEARCH_HISTORY_KEY, JSON.stringify(history))
 }
 
 export function clearSearchHistory() {
   localStorage.setItem(SEARCH_HISTORY_KEY, JSON.stringify([]))
+  const iframe = Array.from(document.getElementsByTagName('iframe')).find(i => i.src.includes('https://s1.hdslb.com/bfs/seed/jinkela/short/cols/iframe.html'))
+  if (iframe && iframe.contentWindow)
+    iframe.contentWindow.postMessage({ type: 'COLS_CLR', key: 'search_history' }, iframe.src)
 }