sessionStorage, IndexedDB og valg af den rigtige API

sessionStorage stiller præcis de samme metoder til rådighed som localStorage, men levetiden er knyttet til fanen. Når fanen eller vinduet lukkes, ryddes dataene automatisk.

Det er også isoleret pr. fane, så to faner ikke deler sessionStorage-data.

sessionStorage er velegnet til en guide med flere trin, hvor du vil bevare fremskridtet under genindlæsninger i den aktuelle session, men kassere det, når fanen lukkes.

Brugeren kan genindlæse siden midt i formularen uden at miste indtastninger, men intet bliver liggende, når formularen er færdig eller brugeren forlader den.

IndexedDB er en asynkron, transaktionsbaseret database, der er indbygget i browseren. Den kan gemme langt mere end localStorage-grænsen på 5 MB og håndterer strukturerede objekter, arrays og endda binære data.

Fordi den er asynkron, blokerer den ikke hovedtråden, sådan som localStorage gør.

Den rå IndexedDB-API er omstændelig og hændelsesbaseret, så biblioteker som idb-keyval pakker den ind i enkle Promise-baserede funktioner som get, set og del.

Det giver dig en brugeroplevelse som med localStorage kombineret med IndexedDB's kapacitet og asynkrone adfærd.

Fordi IndexedDB kan gemme værdier af typen Blob og ArrayBuffer, er den ideel til cachelagring af billeder, lyd, downloadede filer eller aktiver til offlinebrug.

Disse ville hurtigt overskride localStorage-grænserne og skulle konverteres til strenge, hvilket IndexedDB undgår.

Cache-API'en, som ofte bruges sammen med service workers, gemmer hele HTTP-Response-objekter, der identificeres af anmodningen. Den er specifikt udviklet til offline-først-cachelagring af netværkssvar.

Brug den til at levere aktiver og API-svar uden at tilgå netværket, når du er offline.

localStorage bevares permanent, indtil det ryddes, sessionStorage varer kun under fanens session, IndexedDB bevares permanent, og cookies har et konfigurerbart udløb via deres attributter.

Ved at matche den nødvendige levetid med det rigtige lager undgår du overraskelser om, hvornår data forsvinder.

localStorage og sessionStorage er begrænset til omtrent 5 MB, cookies til cirka 4 KB hver, mens IndexedDB kan bruge hundredvis af megabyte eller mere afhængigt af enheden og browseren.

Til alt, der fylder meget, er IndexedDB den eneste praktiske mulighed i browseren.

localStorage, sessionStorage og cookies er synkrone og blokerer hovedtråden under adgang. IndexedDB og Cache API er asynkrone og Promise-baserede.

Asynkron adgang holder brugerfladen responsiv, selv når der læses eller skrives større datamængder.

Brug httpOnly-cookies til godkendelsestokens, så scripts ikke kan læse dem, localStorage til små, vedvarende indstillinger, IndexedDB til store filer og komplekse offlinedata samt sessionStorage til kortvarige kladder i et faneblad.

Tilpas lageret efter dataenes følsomhed, størrelse og levetid.

Der findes ikke én enkelt bedste lagrings-API; hver mulighed afvejer kapacitet, vedvarende lagring, synkroniseringsadfærd og sikkerhed forskelligt. Når du kender forskellene, kan du vælge bevidst.

En typisk app bruger flere muligheder: cookies til godkendelse, localStorage til indstillinger og IndexedDB til offlineaktiver.

Du sammenlignede sessionStorage, localStorage, IndexedDB, cookies og Cache API med hensyn til vedvarende lagring, kapacitet, synkroniseringsadfærd og sikkerhed.

Du lærte at vælge efter anvendelse: cookies til godkendelse, localStorage til små indstillinger, IndexedDB til store eller komplekse data og sessionStorage til kladder, der er afgrænset til et faneblad.