Opbevaring på klientsiden er afgørende for webapplikationer. Det er måske ikke så skudsikkert som lager på serversiden, men uden det ville webapps ikke være i stand til at implementere mange moderne funktioner. Alle slags funktioner afhænger af lagring på klientsiden, fra sessioner i spil til indkøbskurve på e-handelswebsteder.

Opbevaring på klientsiden gør det også muligt for webapps at implementere en privatlivscentreret arkitektur. Du kan bruge det til at sikre, at følsomme data aldrig forlader en brugers enhed.

Hvad er Client-Side Storage?

I webudvikling refererer lagring på klientsiden til de forskellige måder, webbrowsere kan gemme data på. En applikation kan derefter bruge disse data til at levere funktionalitet til brugerne. Opbevaring på klientsiden er kritisk af et par årsager:

  • Data, der er gemt på klienten, er betydeligt hurtigere at få adgang til, og din app kan få adgang til dem uden internettet.
  • Opbevaring på klientsiden gør det nemmere for din applikation at huske hver enkelt brugers præferencer.
    • instagram viewer
  • At gemme nogle data permanent på klienten gør det nemmere at beskytte brugernes privatliv.
  • Det er dyrt at gemme alle applikationsdata på serveren, især i store skalaer.

Der er flere forskellige former for lagring på klientsiden, du kan bruge i dine webapps.

Cookies

En browser-cookie er et stykke nøgle-/værdidata, der er gemt som en streng på din computer. Browsere sender alle cookies for et bestemt websted til webstedets server på hver anmodning. Cookies var den første (og i et stykke tid den eneste) type lagring på klientsiden.

Der er ingen officiel grænse for størrelsen af ​​en cookie, men individuelle browsere sætter forskellige grænser for størrelsen og antallet af cookies, du kan indstille. Det RFC 6265 Afsnit 6.1 angiver følgende minimumscookiefunktioner, som browsere (brugeragenter) skal give:

Praktiske implementeringer af brugeragenter har begrænsninger på antallet og størrelsen af ​​cookies, som de kan gemme. Brugeragenter til generel brug SKAL give hver af følgende minimumsfunktioner:

  • Mindst 4096 bytes pr. cookie (målt ved summen af ​​længden af ​​cookiens navn, værdi og attributter).
  • Mindst 50 cookies pr. domæne.
  • Mindst 3000 cookies i alt.

Cookies kan forblive i browseren i varierende længder af tid. Nogle udløber i slutningen af ​​en sidesession, og nogle har vilkårlige udløbsdatoer, der kan strække sig så langt som måneder ud i fremtiden.

Browsere opretter en sidesession, når du åbner en ny fane, og de afslutter den, når du lukker fanen eller browseren. Hvis du genindlæser eller opdaterer siden, vil browseren ikke afslutte sidesessionen.

Brugstilfælde til cookies

Cookies er bedst egnede til at gemme små stykker data, som serveren ofte skal læse eller ændre. Hvorfor?

  • Cookies vedhæftes automatisk til alle netværksanmodninger
  • Cookies kan kun gemme små mængder strengdata.

Du kan bruge cookies til at identificere en bruger (såsom et sessions-id), registrere et sidebesøg til bogmærkeformål eller gemme et spils højeste score.

LocalStorage

Ligesom en cookie er localStorage et nøgle/værdilager, der gemmer strengdata. Selvom begge lagringstyper er ens, adskiller localStorage og cookies sig på flere måder:

  • LocalStorage afhænger af JavaScript.
  • Data i localStorage ligger primært i browseren. Du skal bevidst sende det til serveren, i stedet for at browseren sender det på hver anmodning.
  • LocalStorage har ingen udløbsdato. Det forbliver på klienten, indtil en udvikler sletter det med JavaScript, eller brugeren rydder deres browserlager.
  • LocalStorage har en meget større lagerkapacitet. Det WHATWG spec angiver ikke en hård grænse, men iflg Wikipedia, minimumsstørrelsen på localStorage blandt de store browsere er 5 MB:

Browsere begrænser cookies til 4 kilobyte. Weblagring giver langt større lagerkapacitet:

  • Opera 10.50+ tillader 5 MB
  • Safari 8 tillader 5 MB
  • Firefox 34 tillader 10 MB
  • Google Chrome tillader 10 MB pr. oprindelse
  • Internet Explorer tillader 10 MB pr. lagerområde

Use Cases til LocalStorage

LocalStorage er perfekt til at gemme en stor mængde data, som serveren sjældent behøver at referere til. Dette kan være en applikations brugerindstillinger, temakonfigurationsdetaljer eller dataene i en nyligt udfyldt formular. Dette skyldes, at localStorage har en meget større lagringsgrænse end cookies, men du skal gøre en ekstra indsats for at sende dens data til serveren.

Hvis du gemmer dataene som JSON, kan du gemme rimeligt komplekse data ved hjælp af localStorage, selvom det kun kan gemme strenge.

LocalStorage er sårbar overfor XSS angreb, så du bør ikke gemme følsomme klientdata i den.

SessionStorage

SessionStorage er et nøgle/værdilager, der fungerer næsten det samme som localStorage, bortset fra én ting. De lagrede data eksisterer kun i længden af ​​en sidesession.

Use Cases til SessionStorage

Du kan bruge SessionStorage til at gemme den samme type data som localStorage, men kun når dataene ikke behøver at bestå ud over en sidesession.

IndekseretDB

IndexedDB er en kraftfuld browser API til lagring af store mængder strukturerede data. Det er en transaktionel, objektorienteret database, der gemmer data i nøgle/værdi-par.

Hvis du har at gøre med mindre mængder data, er localStorage/sessionStorage det bedre og nemmere valg. Desværre er de begrænset af deres lagerkapacitet og det faktum, at de kun kan gemme strengdata. IndexedDB tillader ikke kun lagring af forskellige typer data inklusive filer/binære data, men det kan også gemme meget flere data. IndexedDB konstruerer også indekser af dets indhold for at muliggøre hurtig søgning i databasen.

Use Cases for IndexedDB

IndexedDB er i bund og grund en NoSQL-database i browseren, og den kan gemme meget store mængder data. Enhver use case, der kræver lagring af over 10 MB data, er passende for IndexedDB.

I modsætning til de andre former for browserlagring er IndexedDB ikke begrænset til lagring af strenge. IndexedDB kan gemme data af alle standard JavaScript-typer. Hvis du bygger en webapplikation til primært at fungere offline, kan du bruge IndexedDB til at gemme alle applikationens data.

Opbevaring på klientsiden er fleksibel og kraftfuld

Udtrykket klientsidelagring refererer til lagring af applikationsdata i browseren. Opbevaring på klientsiden er afgørende for, at de fleste moderne webapplikationer fungerer. Der er forskellige typer lagring på klientsiden: cookies, lokal/sessionStorage og IndexedDB.

Alle typer browserlagring har forskellige begrænsninger for deres kapacitet og den type data, de kan lagre. Cookies er den mest begrænsede type, lokal/sessionStorage er den mest bekvemme, og IndexedDB er den mest kraftfulde.