feat: save history to localstorage

src/lib/components/input/search.svelte

@@ -8,7 +8,7 @@
 	import { goto } from '$app/navigation';
 	import { fade, scale } from 'svelte/transition';
 	import { ArrowLeftRight, Box, Key, SearchIcon, UserSearch } from 'lucide-svelte';
-	import { history, addHistory } from '$lib/state/search.svelte';
+	import { SearchHistory } from '$lib/state/search.svelte';
 	import Button from '$lib/components/button/button.svelte';
 	import { Stack } from '$lib/components/layout';
 	import { truncateCenter } from '$lib/utils';
@@ -30,6 +30,9 @@
 	let searchValue: string = $state('');
 	let selectedIndex: number | undefined = $state();
 
+	const searchHistory = new SearchHistory();
+	const history = searchHistory.get();
+
 	const searchType = $derived.by(() => {
 		/* eslint-disable @typescript-eslint/no-unused-vars */
 		/* eslint-disable no-empty */
@@ -107,7 +110,7 @@
 					selectedIndex = 0;
 					return;
 				}
-				// Select next history item
+				// Select next searchHistory item
 				selectedIndex = (history.length + selectedIndex + 1) % history.length;
 				return;
 			}
@@ -117,21 +120,21 @@
 					selectedIndex = history.length;
 					return;
 				}
-				// Select previous history item
+				// Select previous searchHistory item
 				selectedIndex = (history.length + selectedIndex - 1) % history.length;
 				return;
 			}
 
 			if (selectedIndex !== undefined && event.key === 'Enter') {
-				goToHistory(history[selectedIndex].result);
+				goTosearchHistory(history[selectedIndex].result);
 			}
 		}
 	}
 
 	function goToResult() {
 		if (result) {
 			goto(result);
-			addHistory({ result, searchType, searchValue });
+			searchHistory.add({ result, searchType, searchValue });
 		}
 		closeSearch();
 	}
@@ -141,7 +144,7 @@
 		searchValue = '';
 	}
 
-	function goToHistory(url: string) {
+	function goTosearchHistory(url: string) {
 		goto(url);
 		closeSearch();
 	}

src/lib/state/search.svelte.ts

@@ -1,3 +1,5 @@
+import { browser } from '$app/environment';
+
 type SearchResult = {
 	result: string;
 	searchType: string;
@@ -6,11 +8,47 @@ type SearchResult = {
 
 const maxHistoryLength = 10;
 
-export const history = $state<SearchResult[]>([]);
+export class SearchHistory {
+	history = $state<SearchResult[]>([]) as SearchResult[];
+	storageKey = 'searchHistory';
+
+	constructor() {
+		if (browser) {
+			const item = localStorage.getItem(this.storageKey);
+			if (item) this.history = this.deserialize(item);
+		}
+	}
+
+	private serialize(value: SearchResult[]): string {
+		return JSON.stringify(value);
+	}
+
+	private deserialize(item: string): SearchResult[] {
+		return JSON.parse(item);
+	}
+
+	private saveHistory() {
+		if (browser) {
+			localStorage.setItem(this.storageKey, this.serialize(this.history));
+		}
+	}
+
+	add(s: SearchResult) {
+		this.history.unshift(s);
+		if (history.length > maxHistoryLength) {
+			this.history.splice(maxHistoryLength);
+		}
+		this.saveHistory();
+	}
+
+	// remove() {}
+
+	get(): SearchResult[] {
+		return this.history;
+	}
 
-export function addHistory(s: SearchResult) {
-	history.unshift(s);
-	if (history.length > maxHistoryLength) {
-		history.splice(maxHistoryLength);
+	clear() {
+		this.history = [];
+		this.saveHistory();
 	}
 }