Læseoplevelse

10-03-2023

Hos den frie bibel lægger de stor vægt på at brugeren skal kunne tilpasse deres læseoplevelse (læs mere her). Så jeg skulle finde ud af hvordan det kunne gøres. I første omgang troede jeg React context skulle bruges, men umiddelbart lader til at være begrænset til den side man er på, og da jeg bruger Next.js nu, skal disse indstillinger gemmes på tværs af sider og på tværs af sessions (Altså hvis brugeren kommer tilbage, skal siden bruge de samme indstillinger).

Det skal altså fungere på den måde, at når en bruger går ind på 'læseoplevelse', og ændrer på indstillingerne, skal bibelteksten tilpasse sig efter det brugeren har valgt. F.eks. hvis bruger vælger at slå versnumre og fodnoter fra, bliver teksten ændret på følgende måde:


Jeg læste diverse artikler, men det var svært at komme frem til en god form for persistens. Jeg endte dog med en YouTube tutorial, hvor han viste noget om localStorage i JavaScript. Det fungere på den måde, at man kan skrive en string til localStorage og angive en 'key' som denne string passer til. F.eks. kunne det være "settings", og så kan jeg skrive en string til dette. Jeg er blevet en stor fan af JSON, så jeg kom frem til at et "settings"-objekt, skulle laves om til JSON, og så skrives til localStorage. I sammenhæng med en React hook, bliver der så gemt til localStorage hver gang en indstillinger ændres med 'onChange' i diverse checkboxes eller selects.