Hoe HTML5 offline opslag op uw website te gebruiken

Afgezien van nieuwe elementen in HTML5, biedt deze nieuwe webtechnologie ons offline opslag . Er zijn een aantal typen offline opslag, en in dit artikel zullen we specifiek bespreken sessionStorage en localStorage. Met offline opslag kunnen we gegevens opslaan in de browser van de gebruiker en onze web-apps of games zonder verbinding (voor een bepaalde periode) laten werken.

In een echt wereldvoorbeeld kunnen ontwikkelaars het voordeel van offline opslag als back-up nemen in het geval er geen internetverbinding beschikbaar is. Ze kunnen de gegevens vervolgens naar de online server verzenden wanneer ze weer verbinding maken.

Als je jezelf afvraagt ​​hoe je de functie van deze browser op je website kunt gebruiken, bekijk dan dit artikel.

sessionStorage

sessionStorage is een vorm van opslag die gegevens tijdelijk opslaat in de browser. De gegevens in sessionStorage worden ingesteld bij sleutel en waardeparing en zijn exclusief voor het browservenster of tabblad. Zolang de browser of het tabblad nog steeds open is, zouden de gegevens er nog steeds zijn, tenzij we het opzettelijk wissen of we de browser afsluiten .

Voor het opslaan van gegevens in sessionStorage kunnen we .setItem() . Hier is een voorbeeld waar we "Hello World" opslaan.

 sessionStorage.setItem ("keyExample", "Hello World"); 

Als alternatief kunnen we ook het volgende doen. Hiermee wordt een gegevensitem gemaakt met anotherKeyName als de sleutel en 'Hello Too' als de waarde.

 sessionStorage.anotherKeyExample = "Hallo ook"; 

In Webkit-gebaseerde browsers zoals Safari, Chrome en Opera, kunt u de gegevens bekijken op het tabblad Bronnen . In Firefox kunt u de gegevens zoeken die zich onder het tabblad DOM van Firebug bevinden.

Het is vermeldenswaard dat sessionStorage alleen een string of platte tekst kan opslaan. Een integer wordt naar string vertaald.

Als u JSON-gegevens hebt, moet u deze opmaken in string met JSON.stringify() en deze ophalen met JSON.parse() om de tekenreeks terug te converteren als JSON. Hieronder zijn enkele codevoorbeelden:

 var json = JSON.stringify ({[1, 2, 3]}); sessionStorage.anotherKeyExample = json; 

Gegevens in sesssionStorage ophalen

We hebben ook twee manieren om de gegevens uit sessionStorage op te halen. Ten eerste kunnen we het .getItem() of door de naam van de sleutel rechtstreeks aan te wijzen, als volgt.

 var a = sessionStorage.getItem ("keyExample"); var b = sessionStorage.anotherKeyExample; 

Gegevens in sessionStorage verwijderen

Zoals hierboven vermeld, worden de gegevens in sessionStorage verwijderd wanneer de gebruiker het browservenster of -tabblad sluit. Maar we kunnen het ook opzettelijk verwijderen. We kunnen de methode .removeItem() of de delete, zoals zo.

 sessionStorage.removeItem ( "keyExample"); delete sessionStorage.anotherKeyExample; 

lokale opslag

We kunnen ook gegevens opslaan in de browser in de vorm van localStorage . Maar in tegenstelling tot sessionStorage, zijn de lokale opslaggegevens persistent; de gegevens blijven in de browser staan ​​zolang we deze niet opzettelijk verwijderen.

Het opslaan van de gegevens in localStorage is net zo eenvoudig als we deden in sessionStorage. In feite zijn de technische details allemaal hetzelfde, behalve dat we nu het object localStorage gebruiken. We kunnen een gegevensinvoer invoeren met de methode .setItem() of deze rechtstreeks instellen met de naam van de sleutel.

 localStorage.setItem ("keyName", "Hello, Local Storage"); localStorage.anotherKeyName = 1; 

We halen de gegevens op met de methode .getItem() .

 var c = localStorage.getItem ("keyName"); var d = localStorage.anotherKeyName 

Evenzo kunnen we data-invoer verwijderen van localStroge met de methode .removeItem() en de richtlijn delete .

Offline opslaglimietgrootte

Zowel sessionStorage als localStorage hebben limieten in termen van maximale capaciteit en elke browser heeft zijn eigen limiet. De limiet voor Firefox, Chrome en Opera is 5 MB per domein. Internet Explorer biedt meer ruimte met 10 MB per domein. Zorg er dus voor dat uw gegevens de limiet niet overschrijden. Als uw gegevens de limiet overschrijden, kunt u het andere alternatief, zoals SQLite, overwegen.

Functie detectie

Bovendien, hoewel die ondersteuning voor sessionStorage en localStorage vrij groot is (IE8 ondersteunt ze), wil je misschien nog wel browser feature-detectie uitvoeren voordat je een functie uitvoert die een entry naar sessionStorage of localStorage plaatst. Dit is zo dat je een fallback-functie kunt toevoegen zoals met Cookies in het geval de browser geen ondersteuning biedt voor het Offline Opslagformulier.

Je kunt Modernizr hiervoor gebruiken of je script inpakken met deze voorwaardelijke verklaring, zoals zo.

 if (window.localStorage) {} else {alert ('localStorage is niet beschikbaar'); } 

Conclusie

Offline opslag is echt een geweldige functie waarmee web-apps en -games offline kunnen werken. In het verleden hebben we je ook laten zien hoe je het kunt gebruiken in echte voorbeelden.

Ik hoop dat dit korte artikel je kan helpen om aan de slag te gaan met offline opslag.

20+ gratis afdrukbare kalenders voor 2017

Het kiezen van een interessante en creatieve kalender is de beste manier om het nieuwe jaar te beginnen. Het is belangrijk om de juiste kalender voor het komende jaar te kiezen, want dit is iets waar je het hele jaar naar zult kijken, dus het moet inspirerend genoeg zijn om je interesse te wekken telkens als je het ziet

(Technische en ontwerptips)

30 esthetisch aangename iPhone-spellen die u zou moeten spelen

Als je een smartphone bezit, is de kans groot dat je er een favoriet spel op hebt staan, een spel dat je gebruikt om de tijd in wachtrijen te doden of terwijl je pendelt. Het kan een indiespel zijn dat de mainstream-competitie wegblaast, of een minimalistisch spel met eenvoudige gameplay en regels. Mobiel gamen maakt zelfs een groot deel uit van het leven van een mobiele gebruiker - of we het nu toegeven of niet

(Technische en ontwerptips)