Persistent Storage API: Inzicht in en beheer van opslagquota voor webapplicaties

De Persistent Storage API biedt webontwikkelaars een gestandaardiseerde manier om opslagquota binnen de browser van een gebruiker aan te vragen en te beheren. In tegenstelling tot traditionele opslagmechanismen zoals cookies of localStorage, die vaak beperkt zijn in grootte en onderhevig zijn aan automatische verwijdering, stelt de Persistent Storage API applicaties in staat om grotere hoeveelheden opslag aan te vragen en, cruciaal, aan te vragen dat de opslag persistent is – wat betekent dat de browser deze niet automatisch zal wissen, zelfs niet onder opslagdruk.

Waarom Persistent Storage belangrijk is

In de huidige webomgeving, waar Progressive Web Apps (PWA's) steeds gebruikelijker zijn en gebruikers rijke, offline ervaringen verwachten, is betrouwbare opslag essentieel. Denk aan deze scenario's:

• Offline toegang tot documenten: Een documentbewerkingsapplicatie (zoals Google Docs) moet documenten lokaal opslaan zodat gebruikers kunnen blijven werken, zelfs zonder internetverbinding.
• Media afspelen: Streamingdiensten zoals Spotify of Netflix stellen gebruikers in staat om content te downloaden voor offline weergave, wat aanzienlijke opslagruimte vereist.
• Spelgegevens: Online games slaan vaak de voortgang van de gebruiker, niveaus en assets lokaal op om een soepele en responsieve ervaring te bieden.
• Caching van grote datasets: Applicaties die te maken hebben met grote datasets, zoals kaartapplicaties (bijvoorbeeld Google Maps, OpenStreetMap-gebaseerde apps), profiteren van het lokaal cachen van gegevens om netwerkverzoeken te verminderen en de prestaties te verbeteren.
• Lokale gegevensverwerking: Webapplicaties die intensieve gegevensverwerking uitvoeren (bijv. beeldbewerking, videobewerking) kunnen tussentijdse resultaten lokaal opslaan om herhaalde berekeningen te voorkomen.

Zonder persistent storage kan de browser automatisch de opslag wissen die door deze applicaties wordt gebruikt wanneer het apparaat weinig ruimte heeft, wat leidt tot een frustrerende gebruikerservaring en mogelijk gegevensverlies. De Persistent Storage API pakt dit probleem aan door een mechanisme te bieden waarmee applicaties persistente opslag kunnen aanvragen en het opslaggebruik kunnen volgen.

Opslagquota begrijpen

Elke browser wijst een bepaalde hoeveelheid opslagruimte toe aan elke origin (domein). Dit opslagquota is niet vast en kan variëren afhankelijk van factoren zoals de totale opslagcapaciteit van het apparaat, de hoeveelheid beschikbare vrije ruimte en de browserinstellingen van de gebruiker. De Storage API biedt methoden om het beschikbare opslagquota en de hoeveelheid reeds gebruikte opslag op te vragen.

Opslagquota opvragen

De navigator.storage-interface biedt toegang tot opslaggerelateerde informatie. U kunt de methode estimate() gebruiken om een schatting te krijgen van het beschikbare opslagquota en de hoeveelheid opslag die door uw applicatie wordt gebruikt. Het geretourneerde object bevat de eigenschappen usage en quota, beide gemeten in bytes.

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

getStorageEstimate();

            

              
                Copy
              
            
          

Voorbeeld: Stel dat estimate.usage 10485760 (10MB) retourneert en estimate.quota 1073741824 (1GB) retourneert. Dit geeft aan dat uw applicatie 10MB van zijn 1GB quota heeft gebruikt, wat ongeveer 1% van de beschikbare opslag is.

Quota-waarden interpreteren

De waarde quota vertegenwoordigt de maximale hoeveelheid opslag die uw applicatie *kan* gebruiken. Het is echter belangrijk om te begrijpen dat dit quota niet gegarandeerd is. De browser kan het quota verlagen als het apparaat weinig opslagruimte heeft of als de gebruiker browsergegevens wist. Daarom moet uw applicatie worden ontworpen om situaties aan te kunnen waarin de beschikbare opslag minder is dan het gerapporteerde quota.

Best Practice: Implementeer een mechanisme om het opslaggebruik te monitoren en de gebruiker proactief te informeren als de applicatie de opslaglimiet nadert. Bied opties voor de gebruiker om onnodige gegevens te wissen of hun opslagplan te upgraden (indien van toepassing).

Persistente opslag aanvragen

Zelfs als uw applicatie voldoende opslagquota heeft, kan de browser de gegevens van uw applicatie nog steeds automatisch wissen onder opslagdruk. Om dit te voorkomen, kunt u persistente opslag aanvragen met behulp van de methode navigator.storage.persist().

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

    if (isPersistent) {
      console.log("Opslag wordt niet automatisch gewist.");
    } else {
      console.warn("Persistente opslag niet verleend.");
      // Geef de gebruiker instructies over hoe persistente opslag in hun browser kan worden ingeschakeld.
    }
  } else {
    console.warn("Persistent storage API niet ondersteund.");
  }
}

requestPersistentStorage();

            

              
                Copy
              
            
          

De methode persist() retourneert een booleaanse waarde die aangeeft of het verzoek om persistente opslag is gehonoreerd. De browser kan de gebruiker om toestemming vragen voordat persistente opslag wordt verleend. De exacte prompt varieert afhankelijk van de browser en de instellingen van de gebruiker.

Gebruikersinteractie en toestemming

De beslissing van de browser om persistente opslag te verlenen, hangt af van verschillende factoren, waaronder:

• Gebruikersbetrokkenheid: Browsers zullen eerder persistente opslag verlenen aan applicaties waarmee de gebruiker vaak bezig is.
• Gebruikersinstellingen: Gebruikers kunnen hun browserinstellingen configureren om te bepalen hoe verzoeken om persistente opslag worden behandeld. Ze kunnen ervoor kiezen om alle verzoeken automatisch te verlenen, alle verzoeken te weigeren of voor elk verzoek te worden gevraagd.
• Beschikbare opslag: Als het apparaat kritiek weinig opslagruimte heeft, kan de browser het verzoek om persistente opslag weigeren, ongeacht de gebruikersbetrokkenheid of instellingen.
• Origin Trust: Veilige contexten (HTTPS) zijn over het algemeen vereist voor persistente opslag.

Belangrijk: Ga er niet van uit dat het verzoek om persistente opslag altijd wordt gehonoreerd. Uw applicatie moet bestand zijn tegen situaties waarin de opslag niet persistent is. Implementeer strategieën voor het back-uppen van gegevens naar een server of het op een goede manier afhandelen van gegevensverlies.

Controleren op bestaande persistentie

U kunt de methode navigator.storage.persisted() gebruiken om te controleren of uw applicatie al persistente opslag heeft gekregen.

            
async function checkPersistentStorage() {
  if (navigator.storage && navigator.storage.persisted) {
    const isPersistent = await navigator.storage.persisted();
    console.log(`Persistente opslag al verleend: ${isPersistent}`);
  } else {
    console.warn("Persistent storage API niet ondersteund.");
  }
}

checkPersistentStorage();

            

              
                Copy
              
            
          

Opslagtechnologieën en quota

De Persistent Storage API werkt samen met verschillende opslagtechnologieën die beschikbaar zijn in de browser. Het begrijpen van de impact van deze technologieën op quota is cruciaal.

• IndexedDB: Een krachtige NoSQL-database voor het lokaal opslaan van gestructureerde gegevens. IndexedDB is onderhevig aan opslagquotabeperkingen en kan aanzienlijk profiteren van persistente opslag.
• Cache API: Wordt gebruikt door service workers om netwerkverzoeken te cachen, waardoor offline toegang en verbeterde prestaties mogelijk zijn. Caches die via de Cache API worden gemaakt, dragen ook bij aan het totale opslagquota.
• localStorage & sessionStorage: Eenvoudige key-value stores voor kleinere hoeveelheden gegevens. Hoewel localStorage standaard persistent is (tenzij de gebruiker browsergegevens wist), is de grootte beperkt en profiteert het niet zoveel van de persistentiegaranties die de Persistent Storage API biedt als IndexedDB of de Cache API. Het gebruik ervan telt echter nog steeds mee voor het totale quota.
• Cookies: Hoewel technisch gezien een opslagmechanisme, worden cookies doorgaans gebruikt voor sessiebeheer en tracking in plaats van het opslaan van grote hoeveelheden gegevens. Cookies hebben hun eigen groottebeperkingen en verschillen van het opslagquota dat door de Storage API wordt beheerd.

Voorbeeld: Een PWA gebruikt IndexedDB om gebruikersprofielen en offline gegevens op te slaan, en de Cache API om statische assets zoals afbeeldingen en JavaScript-bestanden te cachen. Het aanvragen van persistente opslag zorgt ervoor dat deze gecachede gegevens minder snel worden verwijderd, wat een consistente offline ervaring biedt.

Best practices voor opslagquotabeheer

Effectief opslagquotabeheer is essentieel voor het bouwen van robuuste en gebruiksvriendelijke webapplicaties. Hier zijn enkele best practices om te volgen:

1. Monitor het opslaggebruik regelmatig

Implementeer een mechanisme om het opslaggebruik van uw applicatie periodiek te monitoren met behulp van navigator.storage.estimate(). Hierdoor kunt u proactief potentiële opslagproblemen identificeren en corrigerende maatregelen nemen voordat ze de gebruikerservaring beïnvloeden.

2. Implementeer een UI voor opslagbeheer

Bied gebruikers een duidelijke en intuïtieve interface voor het beheren van hun opslag. Met deze UI kunnen gebruikers het volgende doen:

• Hun huidige opslaggebruik bekijken.
• De gegevens identificeren die de meeste opslag verbruiken.
• Onnodige gegevens verwijderen (bijv. gecachede bestanden, gedownloade content).

Voorbeeld: Een beeldbewerkingsapplicatie kan een UI bieden die gebruikers een uitsplitsing laat zien van de opslag die wordt gebruikt door afzonderlijke foto's en albums, waardoor ze gemakkelijk foto's kunnen verwijderen die ze niet langer nodig hebben.

3. Optimaliseer gegevensopslag

Optimaliseer de gegevensopslag van uw applicatie om de opslagvoetafdruk te minimaliseren. Dit omvat:

• Gegevens comprimeren voordat ze worden opgeslagen.
• Efficiënte gegevensindelingen gebruiken (bijvoorbeeld Protocol Buffers, MessagePack).
• Het vermijden van het opslaan van redundante gegevens.
• Implementeren van beleid voor gegevensverloop om oude of ongebruikte gegevens automatisch te verwijderen.

4. Implementeer een strategie voor geleidelijke degradatie

Ontwerp uw applicatie om op een goede manier om te gaan met situaties waarin de opslag beperkt is of persistente opslag niet wordt verleend. Dit kan het volgende inhouden:

• Bepaalde functies uitschakelen die aanzienlijke opslag vereisen.
• Een waarschuwingsbericht aan de gebruiker weergeven.
• Een optie bieden om gegevens naar een server te back-uppen.

5. Informeer gebruikers over persistente opslag

Als uw applicatie sterk afhankelijk is van persistente opslag, informeer gebruikers dan over de voordelen van het verlenen van toestemming voor persistente opslag. Leg uit hoe persistente opslag de prestaties van de applicatie verbetert en ervoor zorgt dat hun gegevens niet automatisch worden gewist.

6. Ga op een goede manier om met opslagfouten

Wees voorbereid op het afhandelen van opslagfouten, zoals QuotaExceededError, die kunnen optreden wanneer uw applicatie het opslagquota overschrijdt. Geef informatieve foutmeldingen aan de gebruiker en stel mogelijke oplossingen voor (bijv. opslag wissen, hun opslagplan upgraden).

7. Overweeg het gebruik van service workers

Service workers kunnen de offline mogelijkheden van uw webapplicatie aanzienlijk verbeteren door statische assets en API-antwoorden te cachen. Houd bij het gebruik van service workers rekening met het opslagquota en implementeer strategieën voor het effectief beheren van de cache.

Internationalisatieoverwegingen

Houd bij het ontwerpen van de UI voor opslagbeheer van uw applicatie rekening met de volgende internationalisatie (i18n)-aspecten:

• Getalnotatie: Gebruik de juiste getalnotatie voor verschillende landinstellingen bij het weergeven van waarden voor opslaggebruik. In sommige landinstellingen worden bijvoorbeeld komma's gebruikt als decimale scheidingsteken, terwijl in andere punten worden gebruikt. Gebruik de methode toLocaleString() van JavaScript om getallen op te maken volgens de landinstelling van de gebruiker.
• Datum- en tijdnotatie: Als uw applicatie datums en tijden opslaat, formatteer ze dan volgens de landinstelling van de gebruiker wanneer ze in de UI voor opslagbeheer worden weergegeven. Gebruik de methoden toLocaleDateString() en toLocaleTimeString() van JavaScript voor landinstellingafhankelijke datum- en tijdnotatie.
• Eenheidslokalisatie: Overweeg om opslageenheden (bijvoorbeeld KB, MB, GB) te lokaliseren om overeen te komen met de conventies die in verschillende regio's worden gebruikt. Hoewel de standaardenheden algemeen worden begrepen, kan het aanbieden van gelokaliseerde alternatieven de gebruikerservaring verbeteren.
• Tekstrichting: Zorg ervoor dat de UI voor opslagbeheer zowel links-naar-rechts (LTR) als rechts-naar-links (RTL) tekstrichtingen ondersteunt. Gebruik CSS-eigenschappen zoals direction en unicode-bidi om de tekstrichting correct af te handelen.

Beveiligingsoverwegingen

Bij het omgaan met persistente opslag is beveiliging van het grootste belang. Volg deze best practices voor beveiliging:

• Gebruik HTTPS: Dien uw applicatie altijd via HTTPS om gegevens tijdens de overdracht te beschermen en man-in-the-middle-aanvallen te voorkomen. HTTPS is ook een vereiste voor persistente opslag in veel browsers.
• Gebruikersinvoer opschonen: Maak alle gebruikersinvoer schoon voordat u deze opslaat om cross-site scripting (XSS)-kwetsbaarheden te voorkomen.
• Gevoelige gegevens versleutelen: Versleutel gevoelige gegevens voordat u deze lokaal opslaat om deze te beschermen tegen ongeoorloofde toegang. Overweeg om de Web Crypto API te gebruiken voor versleuteling.
• Implementeer veilige praktijken voor gegevensverwerking: Volg veilige coderingspraktijken om gegevenslekken te voorkomen en de integriteit van uw opgeslagen gegevens te waarborgen.
• Herzie en update uw code regelmatig: Blijf op de hoogte van de nieuwste beveiligingsbedreigingen en -kwetsbaarheden en herzie en update uw code regelmatig om ze aan te pakken.

Voorbeelden in verschillende regio's

Laten we eens kijken hoe opslagquotabeheer kan verschillen in verschillende regio's:

• Regio's met beperkte bandbreedte: In regio's met beperkte of dure internetbandbreedte kunnen gebruikers meer afhankelijk zijn van offline toegang en caching. Daarom moeten applicaties prioriteit geven aan efficiënt opslaggebruik en duidelijke richtlijnen geven voor het beheren van gecachede gegevens. In sommige delen van Afrika of Zuidoost-Azië zijn de datakosten bijvoorbeeld een belangrijke zorg.
• Regio's met gegevensprivacyregelgeving: In regio's met strenge gegevensprivacyregelgeving, zoals de Europese Unie (AVG), moeten applicaties transparant zijn over hoe ze opslag gebruiken en expliciete toestemming van gebruikers verkrijgen voordat ze persoonlijke gegevens opslaan. Ze moeten gebruikers ook de mogelijkheid bieden om toegang te krijgen tot hun gegevens, deze te corrigeren en te verwijderen.
• Regio's met oudere apparaten: In regio's waar gebruikers waarschijnlijk oudere of minder krachtige apparaten gebruiken, moeten applicaties bijzonder attent zijn op het opslaggebruik en hun gegevensopslag optimaliseren om de impact op de prestaties van het apparaat te minimaliseren.
• Regio's met specifieke taalvereisten: Opslagbeheer-UI's moeten volledig worden gelokaliseerd, rekening houdend met getalformaten (bijv. gebruik van komma's of punten voor decimale scheidingstekens), datum-/tijdformaten en de juiste tekstrichting.

Voorbeeld: Een nieuwsapplicatie die zich richt op gebruikers in India kan gebruikers toestaan ​​om nieuwsartikelen te downloaden om offline te lezen, waarbij de mogelijkheid van een onregelmatige internetverbinding wordt erkend. De applicatie zou ook een duidelijke UI voor opslagbeheer in meerdere Indiase talen bieden, zodat gebruikers gemakkelijk gedownloade artikelen kunnen verwijderen om ruimte vrij te maken.

De toekomst van Storage API's

De Persistent Storage API evolueert voortdurend en er worden nieuwe functies en mogelijkheden toegevoegd om te voldoen aan de groeiende eisen van moderne webapplicaties. Enkele potentiële toekomstige ontwikkelingen zijn:

• Verbeterd opslagquotabeheer: Nauwkeuriger controle over opslagquota, waardoor applicaties specifieke hoeveelheden opslag kunnen toewijzen aan verschillende soorten gegevens.
• Integratie met cloudopslag: Naadloze integratie met cloudopslagdiensten, waardoor applicaties gegevens transparant in de cloud kunnen opslaan wanneer lokale opslag beperkt is.
• Geavanceerde gegevenssynchronisatie: Meer geavanceerde gegevenssynchronisatiemechanismen, waardoor applicaties gegevens efficiënt kunnen synchroniseren tussen lokale opslag en de cloud.
• Gestandaardiseerde opslagversleuteling: Een gestandaardiseerde API voor het versleutelen van gegevens die zijn opgeslagen in lokale opslag, waardoor het proces van het beveiligen van gevoelige gegevens wordt vereenvoudigd.

Conclusie

De Persistent Storage API is een krachtig hulpmiddel voor webontwikkelaars die robuuste en gebruiksvriendelijke webapplicaties willen bouwen die rijke offline ervaringen kunnen bieden. Door opslagquotabeheer te begrijpen, persistente opslag aan te vragen en best practices voor gegevensopslag en -beveiliging te volgen, kunt u applicaties creëren die betrouwbaar, performant en respectvol zijn voor de privacy van de gebruiker. Naarmate het web zich blijft ontwikkelen, zal de Persistent Storage API een steeds belangrijkere rol spelen bij het mogelijk maken van de volgende generatie webapplicaties.

Verder lezen

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