Lagring på klientsidan är viktigt för webbapplikationer. Det kanske inte är lika skottsäkert som lagring på serversidan, men utan det skulle webbappar inte kunna implementera många moderna funktioner. Alla typer av funktioner är beroende av lagring på klientsidan, från sessioner i spel till kundvagnar på e-handelswebbplatser.

Lagring på klientsidan gör det också möjligt för webbappar att implementera en integritetscentrerad arkitektur. Du kan använda den för att säkerställa att känslig data aldrig lämnar en användares enhet.

Vad är lagring på klientsidan?

Inom webbutveckling avser lagring på klientsidan de olika sätt som webbläsare kan lagra data på. En applikation kan sedan använda denna data för att tillhandahålla funktionalitet till användarna. Lagring på klientsidan är avgörande av flera anledningar:

  • Data som lagras på klienten är betydligt snabbare att komma åt, och din app kan komma åt den utan internet.
  • Lagring på klientsidan gör det lättare för din applikation att komma ihåg inställningarna för varje användare.
  • Att lagra vissa data permanent på klienten gör det lättare att skydda användarnas integritet.
  • Att lagra all applikationsdata på servern är dyrt, särskilt i stor skala.

Det finns flera olika former av lagring på klientsidan du kan använda i dina webbappar.

Småkakor

En webbläsarcookie är en bit nyckel-/värdedata som lagras som en sträng på din dator. Webbläsare skickar alla cookies för en viss webbplats till webbplatsens server på varje begäran. Cookies var den första (och ett tag den enda) typen av lagring på klientsidan.

Det finns ingen officiell gräns för storleken på en cookie, men enskilda webbläsare sätter olika gränser för storleken och antalet cookies du kan ställa in. De RFC 6265 Avsnitt 6.1 anger följande minimifunktioner för cookies som webbläsare (användaragenter) ska tillhandahålla:

Praktiska implementeringar av användaragenter har begränsningar för antalet och storleken på cookies som de kan lagra. Användaragenter för allmänt bruk SKA ge var och en av följande minimifunktioner:

  • Minst 4096 byte per cookie (mätt som summan av längden på cookiens namn, värde och attribut).
  • Minst 50 cookies per domän.
  • Minst 3000 cookies totalt.

Cookies kan finnas kvar i webbläsaren under olika lång tid. Vissa löper ut i slutet av en sidsession, och vissa har godtyckliga utgångsdatum som kan sträcka sig så långt som månader in i framtiden.

Webbläsare skapar en sidsession när du öppnar en ny flik, och de avslutar den när du stänger fliken eller webbläsaren. Om du laddar om eller uppdaterar sidan kommer webbläsaren inte att avsluta sidsessionen.

Användningsfall för cookies

Cookies är bäst lämpade för att lagra små bitar av data som servern ofta behöver läsa eller ändra. Varför?

  • Cookies bifogas automatiskt till alla nätverksförfrågningar
  • Cookies kan bara lagra små mängder strängdata.

Du kan använda cookies för att identifiera en användare (som ett sessions-ID), registrera ett sidbesök för bokmärkesändamål eller lagra ett spels högsta poäng.

Lokalt utrymme

Precis som en cookie är localStorage ett nyckel-/värdelager som lagrar strängdata. Även om båda lagringstyperna är likartade skiljer sig localStorage och cookies på flera sätt:

  • LocalStorage är beroende av JavaScript.
  • Data i localStorage finns främst i webbläsaren. Du måste medvetet skicka den till servern, istället för att webbläsaren skickar den på varje begäran.
  • LocalStorage har inget utgångsdatum. Det finns kvar på klienten tills en utvecklare tar bort det med JavaScript eller tills användaren tömmer sin webbläsarlagring.
  • LocalStorage har en mycket större lagringskapacitet. De WHATWG spec anger ingen hård gräns men enligt Wikipedia, den minsta storleken på localStorage bland de stora webbläsarna är 5 MB:

Webbläsare begränsar cookies till 4 kilobyte. Webblagring ger mycket större lagringskapacitet:

  • Opera 10.50+ tillåter 5 MB
  • Safari 8 tillåter 5 MB
  • Firefox 34 tillåter 10 MB
  • Google Chrome tillåter 10 MB per ursprung
  • Internet Explorer tillåter 10 MB per lagringsområde

Användningsfall för LocalStorage

LocalStorage är perfekt för att lagra en stor mängd data som servern sällan behöver referera till. Detta kan vara en applikations användarinställningar, temakonfigurationsdetaljer eller data i ett nyligen ifyllt formulär. Detta beror på att localStorage har en mycket större lagringsgräns än cookies, men du måste anstränga dig extra för att skicka dess data till servern.

Om du lagrar data som JSON kan du lagra ganska komplex data med hjälp av localStorage, även om den bara kan lagra strängar.

LocalStorage är sårbart för XSS-attacker, så du bör inte lagra känslig klientdata i den.

SessionStorage

SessionStorage är ett nyckel-/värdelager som fungerar nästan samma som localStorage, förutom en sak. Den lagrade informationen kvarstår endast under en sidsession.

Användningsfall för SessionStorage

Du kan använda SessionStorage för att lagra samma typ av data som localStorage, men bara när data inte behöver finnas kvar efter en sidsession.

IndexeradDB

IndexedDB är ett kraftfullt webbläsar-API för att lagra stora mängder strukturerad data. Det är en transaktionell, objektorienterad databas som lagrar data i nyckel/värdepar.

Om du har att göra med mindre mängder data är localStorage/sessionStorage det bättre och enklare valet. Tyvärr är de begränsade av sin lagringskapacitet och det faktum att de bara kan lagra strängdata. IndexedDB tillåter inte bara att lagra olika typer av data inklusive filer/binära data, utan det kan också lagra mycket mer data. IndexedDB konstruerar också index över dess innehåll för att möjliggöra snabb sökning i databasen.

Användningsfall för IndexedDB

IndexedDB är i huvudsak en NoSQL-databas i webbläsaren, och den kan lagra mycket stora mängder data. Alla användningsfall som kräver lagring av över 10 MB data är lämpliga för IndexedDB.

Till skillnad från andra former av webbläsarlagring är IndexedDB inte begränsad till att lagra strängar. IndexedDB kan lagra data av alla vanliga JavaScript-typer. Om du bygger en webbapplikation för att huvudsakligen fungera offline, kan du använda IndexedDB för att lagra all applikationens data.

Förvaring på klientsidan är flexibel och kraftfull

Termen lagring på klientsidan syftar på att lagra applikationsdata i webbläsaren. Lagring på klientsidan är avgörande för att de flesta moderna webbapplikationer ska fungera. Det finns olika typer av lagring på klientsidan: cookies, lokal/sessionStorage och IndexedDB.

Alla typer av webbläsarlagring har olika begränsningar för sin kapacitet och vilken typ av data de kan lagra. Cookies är den mest begränsade typen, lokal/sessionStorage är den bekvämaste och IndexedDB är den mest kraftfulla.