Persistent Storage API: Förstå och hantera lagringskvot för webbapplikationer

Persistent Storage API erbjuder webbutvecklare ett standardiserat sätt att begära och hantera lagringskvot inom en användares webbläsare. Till skillnad från traditionella lagringsmekanismer som cookies eller localStorage, som ofta är begränsade i storlek och utsätts för automatisk borttagning, tillåter Persistent Storage API applikationer att begära större mängder lagringsutrymme och, avgörande, begära att lagringen ska vara persistent – vilket innebär att webbläsaren inte automatiskt rensar den, inte ens under lagringstryck.

Varför persistent lagring är viktigt

I dagens webb, där progressiva webbappar (PWA) blir allt vanligare och användare förväntar sig rika offlineupplevelser, är tillförlitlig lagring avgörande. Tänk på följande scenarier:

• Offlineåtkomst till dokument: En dokumentredigeringsapplikation (som Google Docs) måste lagra dokument lokalt så att användare kan fortsätta arbeta även utan internetanslutning.
• Mediauppspelning: Streamingtjänster som Spotify eller Netflix tillåter användare att ladda ner innehåll för offlineuppspelning, vilket kräver betydande lagringsutrymme.
• Speldata: Onlinespel lagrar ofta användarframsteg, nivåer och tillgångar lokalt för att ge en smidig och responsiv upplevelse.
• Caching av stora datamängder: Applikationer som hanterar stora datamängder, som kartapplikationer (t.ex. Google Maps, OpenStreetMap-baserade appar), drar nytta av att cachera data lokalt för att minska nätverksförfrågningar och förbättra prestandan.
• Lokal databearbetning: Webbapplikationer som utför tung databearbetning (t.ex. bildredigering, videoredigering) kan lagra mellanresultat lokalt för att undvika upprepade beräkningar.

Utan persistent lagring kan webbläsaren automatiskt rensa lagringen som används av dessa applikationer när enheten har lite utrymme, vilket leder till en frustrerande användarupplevelse och potentiell dataförlust. Persistent Storage API åtgärdar detta problem genom att tillhandahålla en mekanism för applikationer att begära persistent lagring och spåra lagringsanvändning.

Förstå lagringskvot

Varje webbläsare tilldelar en viss mängd lagringsutrymme till varje ursprung (domän). Denna lagringskvot är inte fast och kan variera beroende på faktorer som enhetens totala lagringskapacitet, mängden ledigt utrymme och användarens webbläsarinställningar. Storage API tillhandahåller metoder för att fråga den tillgängliga lagringskvoten och mängden lagringsutrymme som redan används.

Fråga lagringskvot

Gränssnittet navigator.storage ger åtkomst till lagringsrelaterad information. Du kan använda metoden estimate() för att få en uppskattning av den tillgängliga lagringskvoten och mängden lagringsutrymme som används av din applikation. Det returnerade objektet innehåller egenskaperna usage och quota, båda mätta i byte.

            
async function getStorageEstimate() {
  if (navigator.storage && navigator.storage.estimate) {
    const estimate = await navigator.storage.estimate();
    console.log(`Usage: ${estimate.usage}`);
    console.log(`Quota: ${estimate.quota}`);
    console.log(`Percentage used: ${(estimate.usage / estimate.quota * 100).toFixed(2)}%`);
  } else {
    console.warn("Storage estimate API not supported.");
  }
}

getStorageEstimate();

            

              
                Copy
              
            
          

Exempel: Låt oss säga att estimate.usage returnerar 10485760 (10 MB) och estimate.quota returnerar 1073741824 (1 GB). Detta indikerar att din applikation har använt 10 MB av sin 1 GB kvot, vilket är ungefär 1 % av den tillgängliga lagringen.

Tolka kvotvärden

Värdet quota representerar den maximala mängden lagringsutrymme som din applikation *kan* använda. Det är dock viktigt att förstå att denna kvot inte är garanterad. Webbläsaren kan minska kvoten om enheten har lite lagringsutrymme eller om användaren rensar webbläsardata. Därför bör din applikation vara utformad för att hantera situationer där det tillgängliga lagringsutrymmet är mindre än den rapporterade kvoten.

Bästa praxis: Implementera en mekanism för att övervaka lagringsanvändningen och proaktivt informera användaren om applikationen närmar sig sin lagringsgräns. Ange alternativ för användaren att rensa onödiga data eller uppgradera sin lagringsplan (om tillämpligt).

Begära persistent lagring

Även om din applikation har tillräcklig lagringskvot kan webbläsaren fortfarande automatiskt rensa din applikations data under lagringstryck. För att förhindra detta kan du begära persistent lagring med metoden navigator.storage.persist().

            
async function requestPersistentStorage() {
  if (navigator.storage && navigator.storage.persist) {
    const isPersistent = await navigator.storage.persist();
    console.log(`Persistent storage granted: ${isPersistent}`);

    if (isPersistent) {
      console.log("Storage will not be cleared automatically.");
    } else {
      console.warn("Persistent storage not granted.");
      // Provide guidance to the user on how to enable persistent storage in their browser.
    }
  } else {
    console.warn("Persistent storage API not supported.");
  }
}

requestPersistentStorage();

            

              
                Copy
              
            
          

Metoden persist() returnerar ett booleskt värde som indikerar om begäran om persistent lagring beviljades. Webbläsaren kan uppmana användaren om tillstånd innan persistent lagring beviljas. Den exakta uppmaningen varierar beroende på webbläsare och användarens inställningar.

Användarinteraktion och tillstånd

Webbläsarens beslut att bevilja persistent lagring beror på flera faktorer, inklusive:

• Användarengagemang: Webbläsare är mer benägna att bevilja persistent lagring till applikationer som användaren interagerar med ofta.
• Användarinställningar: Användare kan konfigurera sina webbläsarinställningar för att kontrollera hur persistent lagringsförfrågningar hanteras. De kan välja att automatiskt bevilja alla förfrågningar, neka alla förfrågningar eller bli ombedda om varje förfrågan.
• Tillgänglig lagring: Om enheten har kritiskt lite lagringsutrymme kan webbläsaren neka begäran om persistent lagring, oavsett användarengagemang eller inställningar.
• Ursprungstro: Säkra kontexter (HTTPS) krävs generellt för persistent lagring.

Viktigt: Anta inte att begäran om persistent lagring alltid kommer att beviljas. Din applikation bör vara motståndskraftig mot situationer där lagringen inte är persistent. Implementera strategier för att säkerhetskopiera data till en server eller hantera dataförlust på ett smidigt sätt.

Kontrollera om det redan finns persistent lagring

Du kan använda metoden navigator.storage.persisted() för att kontrollera om din applikation redan har beviljats persistent lagring.

            
async function checkPersistentStorage() {
  if (navigator.storage && navigator.storage.persisted) {
    const isPersistent = await navigator.storage.persisted();
    console.log(`Persistent storage already granted: ${isPersistent}`);
  } else {
    console.warn("Persistent storage API not supported.");
  }
}

checkPersistentStorage();

            

              
                Copy
              
            
          

Lagringstekniker och kvot

• IndexedDB: En kraftfull NoSQL-databas för att lagra strukturerad data klientsidan. IndexedDB är föremål för begränsningar av lagringskvot och kan dra nytta av persistent lagring i hög grad.
• Cache API: Används av service workers för att cachera nätverksförfrågningar, vilket möjliggör offlineåtkomst och förbättrad prestanda. Cacher som skapas via Cache API bidrar också till den totala lagringskvoten.
• localStorage & sessionStorage: Enkla nyckel-värde-butiker för mindre mängder data. Medan localStorage är persistent som standard (såvida inte användaren rensar webbläsardata), är den begränsad i storlek och drar inte nytta av de persistensgarantier som tillhandahålls av Persistent Storage API lika mycket som IndexedDB eller Cache API. Deras användning räknas dock fortfarande in i den totala kvoten.
• Cookies: Även om cookies tekniskt sett är en lagringsmekanism, används de vanligtvis för sessionshantering och spårning snarare än att lagra stora mängder data. Cookies har sina egna storleksgränser och skiljer sig från den lagringskvot som hanteras av Storage API.

Exempel: En PWA använder IndexedDB för att lagra användarprofiler och offlinedata, och Cache API för att cachera statiska tillgångar som bilder och JavaScript-filer. Att begära persistent lagring säkerställer att dessa cachade data är mindre benägna att tas bort, vilket ger en konsekvent offlineupplevelse.

Bästa praxis för hantering av lagringskvot

Effektiv hantering av lagringskvot är avgörande för att bygga robusta och användarvänliga webbapplikationer. Här är några bästa metoder att följa:

1. Övervaka lagringsanvändningen regelbundet

Implementera en mekanism för att regelbundet övervaka din applikations lagringsanvändning med navigator.storage.estimate(). Detta gör att du proaktivt kan identifiera potentiella lagringsproblem och vidta korrigerande åtgärder innan de påverkar användarupplevelsen.

2. Implementera ett UI för lagringshantering

Ge användarna ett tydligt och intuitivt gränssnitt för att hantera sin lagring. Detta UI bör tillåta användare att:

• Visa sin nuvarande lagringsanvändning.
• Identifiera de data som förbrukar mest lagringsutrymme.
• Ta bort onödiga data (t.ex. cachade filer, nedladdat innehåll).

Exempel: En fotoredigeringsapplikation kan tillhandahålla ett UI som visar användarna en uppdelning av lagringsutrymme som används av enskilda foton och album, så att de enkelt kan ta bort foton de inte längre behöver.

3. Optimera datalagring

Optimera din applikations datalagring för att minimera dess lagringsfotavtryck. Detta inkluderar:

• Komprimera data innan du lagrar den.
• Använda effektiva dataformat (t.ex. Protocol Buffers, MessagePack).
• Undvika att lagra redundant data.
• Implementera policyer för datautgång för att automatiskt ta bort gamla eller oanvända data.

4. Implementera en strategi för smidig nedbrytning

Designa din applikation för att hantera situationer smidigt där lagringen är begränsad eller persistent lagring inte beviljas. Detta kan innebära:

• Inaktivera vissa funktioner som kräver betydande lagringsutrymme.
• Visa ett varningsmeddelande till användaren.
• Ge ett alternativ för att säkerhetskopiera data till en server.

5. Utbilda användare om persistent lagring

Om din applikation är starkt beroende av persistent lagring, utbilda användarna om fördelarna med att bevilja tillstånd för persistent lagring. Förklara hur persistent lagring förbättrar applikationens prestanda och säkerställer att deras data inte rensas automatiskt.

6. Hantera lagringsfel smidigt

Var beredd att hantera lagringsfel, som QuotaExceededError, som kan uppstå när din applikation överskrider sin lagringskvot. Ge informativa felmeddelanden till användaren och föreslå möjliga lösningar (t.ex. rensa lagring, uppgradera sin lagringsplan).

7. Överväg att använda Service Workers

Service workers kan avsevärt förbättra offlinefunktionerna i din webbapplikation genom att cachera statiska tillgångar och API-svar. När du använder service workers, var uppmärksam på lagringskvoten och implementera strategier för att hantera cacheminnet effektivt.

Internationaliseringsöverväganden

När du utformar din applikations UI för lagringshantering, tänk på följande internationaliseringsaspekter (i18n):

• Nummerformatering: Använd lämplig nummerformatering för olika lokaler när du visar värden för lagringsanvändning. I vissa lokaler används till exempel kommatecken som decimaltecken, medan i andra används punkter. Använd JavaScripts metod toLocaleString() för att formatera siffror enligt användarens lokal.
• Datum- och tidsformatering: Om din applikation lagrar datum och tider, formatera dem enligt användarens lokal när du visar dem i UI för lagringshantering. Använd JavaScripts metoder toLocaleDateString() och toLocaleTimeString() för lokalmedveten datum- och tidsformatering.
• Enhetslokalisering: Överväg att lokalisera lagringsenheter (t.ex. KB, MB, GB) för att matcha de konventioner som används i olika regioner. Även om standardenheterna är allmänt förstådda kan tillhandahållande av lokaliserade alternativ förbättra användarupplevelsen.
• Textriktning: Se till att ditt UI för lagringshantering stöder både textriktningar från vänster till höger (LTR) och från höger till vänster (RTL). Använd CSS-egenskaper som direction och unicode-bidi för att hantera textriktningen korrekt.

Säkerhetsöverväganden

När du hanterar persistent lagring är säkerhet av största vikt. Följ dessa bästa säkerhetsmetoder:

• Använd HTTPS: Visa alltid din applikation via HTTPS för att skydda data under överföring och förhindra man-in-the-middle-attacker. HTTPS är också ett krav för persistent lagring i många webbläsare.
• Rensa användarindata: Rensa alla användarindata innan du lagrar den för att förhindra sårbarheter för cross-site scripting (XSS).
• Kryptera känslig data: Kryptera känslig data innan du lagrar den lokalt för att skydda den från obehörig åtkomst. Överväg att använda Web Crypto API för kryptering.
• Implementera säkra metoder för datahantering: Följ säkra kodningsmetoder för att förhindra dataläckor och säkerställa integriteten hos dina lagrade data.
• Granska och uppdatera din kod regelbundet: Håll dig uppdaterad med de senaste säkerhetshoten och sårbarheterna och granska och uppdatera din kod regelbundet för att åtgärda dem.

Exempel från olika regioner

Låt oss överväga hur hanteringen av lagringskvot kan skilja sig åt mellan olika regioner:

• Regioner med begränsad bandbredd: I regioner med begränsad eller dyr internetbandbredd kan användare vara mer beroende av offlineåtkomst och cachning. Därför bör applikationer prioritera effektiv lagringsanvändning och ge tydlig vägledning om hantering av cachade data. Till exempel, i vissa delar av Afrika eller Sydostasien är datakostnaderna ett stort problem.
• Regioner med datasekretessbestämmelser: I regioner med strikta datasekretessbestämmelser, som Europeiska unionen (GDPR), måste applikationer vara transparenta om hur de använder lagring och få explicit samtycke från användare innan de lagrar personuppgifter. De måste också ge användarna möjlighet att komma åt, rätta och ta bort sina data.
• Regioner med äldre enheter: I regioner där användare är mer benägna att använda äldre eller mindre kraftfulla enheter bör applikationer vara särskilt uppmärksamma på lagringsanvändningen och optimera sin datalagring för att minimera inverkan på enhetens prestanda.
• Regioner med specifika språkkrav: UI för lagringshantering måste vara fullständigt lokaliserade, med hänsyn till nummerformat (t.ex. användning av kommatecken eller punkter för decimaltecken), datum-/tidsformat och korrekt textriktning.

Exempel: En nyhetsapplikation som riktar sig till användare i Indien kan tillåta användare att ladda ner nyhetsartiklar för offlineläsning, med tanke på potentialen för intermittent internetanslutning. Applikationen skulle också tillhandahålla ett tydligt UI för lagringshantering på flera indiska språk, så att användare enkelt kan ta bort nedladdade artiklar för att frigöra utrymme.

Framtiden för Storage API:er

Persistent Storage API utvecklas ständigt och nya funktioner och möjligheter läggs till för att möta de växande kraven från moderna webbapplikationer. Några potentiella framtida utvecklingar inkluderar:

• Förbättrad hantering av lagringskvot: Mer detaljerad kontroll över lagringskvot, vilket gör att applikationer kan tilldela specifika mängder lagringsutrymme till olika typer av data.
• Integration med molnlagring: Sömlös integration med molnlagringstjänster, vilket gör att applikationer transparent kan lagra data i molnet när lokal lagring är begränsad.
• Avancerad datasynkronisering: Mer sofistikerade mekanismer för datasynkronisering, vilket gör det möjligt för applikationer att effektivt synkronisera data mellan lokal lagring och molnet.
• Standardiserad datakryptering: Ett standardiserat API för att kryptera data som lagras i lokal lagring, vilket förenklar processen att säkra känslig data.

Slutsats

Persistent Storage API är ett kraftfullt verktyg för webbutvecklare som vill bygga robusta och användarvänliga webbapplikationer som kan ge rika offlineupplevelser. Genom att förstå hantering av lagringskvot, begära persistent lagring och följa bästa praxis för datalagring och säkerhet, kan du skapa applikationer som är tillförlitliga, prestandaorienterade och respektfulla för användarnas integritet. När webben fortsätter att utvecklas kommer Persistent Storage API att spela en allt viktigare roll för att möjliggöra nästa generations webbapplikationer.

Vidare läsning

• MDN Web Docs: Storage API
• web.dev: Storage for the web
• WICG: Storage Quota API