Saves MIDI channel, bank, and patch in local storage

src/App.tsx

@@ -5,11 +5,14 @@ import PatchSquare from "./PatchSquare.tsx";
 import {WebMidi, Output} from "webmidi";
 
 function App() {
-  const [bankNumber, setBankNumber] = useState(0)
-  const [patchNumber, setPatchNumber] = useState(0)
+  let initBankNumber = parseInt(localStorage.getItem("bank-number")??"0")
+  let initPatchNumber = parseInt(localStorage.getItem("patch-number")??"0")
+  let initMidiChannel = parseInt(localStorage.getItem("midi-channel")??"1")
+  const [bankNumber, setBankNumber] = useState(initBankNumber)
+  const [patchNumber, setPatchNumber] = useState(initPatchNumber)
   const [midiDeviceMap, setMidiDeviceMap] = useState<Map<string, Output>>(new Map())
   const [selectedMidiDevice, setSelectedMidiDevice] = useState<string>()
-  const [selectedMidiChannel, setSelectedMidiChannel] = useState<number>(1)
+  const [selectedMidiChannel, setSelectedMidiChannel] = useState<number>(initMidiChannel)
 
   function connect() {
     WebMidi.enable()
@@ -47,10 +50,12 @@ function App() {
 
   function handleBankSelect(selection: number) {
     setBankNumber(selection)
+    localStorage.setItem("bank-number", selection.toString())
   }
 
   function handlePatchSelect(selection: number) {
     setPatchNumber(selection)
+    localStorage.setItem("patch-number", selection.toString())
   }
 
   function sendPatchNumber() {
@@ -112,6 +117,7 @@ function App() {
 
   function handleMidiChannelSelect(e: ChangeEvent<HTMLSelectElement>) {
     setSelectedMidiChannel(parseInt(e.target.value))
+    localStorage.setItem("midi-channel", e.target.value)
   }
 
   return (
@@ -123,7 +129,9 @@ function App() {
           <select onChange={handleMidiDeviceSelect}>{midiDeviceOptions()}</select>
         </div>
         <div>
-          <select onChange={handleMidiChannelSelect}>{midiChannelOptions()}</select>
+          <select value={selectedMidiChannel} onChange={handleMidiChannelSelect}>
+            {midiChannelOptions()}
+          </select>
         </div>
       </div>
       <div>