Webopslag-API
De Web Storage API is een eenvoudige syntaxis voor het opslaan en ophalen van gegevens in de browser. Het is heel gemakkelijk te gebruiken:
Voorbeeld
localStorage.setItem("name", "John Doe");
localStorage.getItem("name");
De Web Storage API wordt in alle browsers ondersteund:
| Chrome | IE/Edge | Firefox | Safari | Opera |
| Yes | Yes | Yes | Yes | Yes |
Het localStorage-object
Het localStorage-object biedt toegang tot een lokale opslag voor een bepaalde website. Hiermee kunt u gegevensitems voor dat domein opslaan, lezen, toevoegen, wijzigen en verwijderen.
De gegevens worden zonder vervaldatum opgeslagen en worden niet verwijderd wanneer de browser wordt gesloten.
De gegevens zijn beschikbaar voor dagen, weken en jaren.
De setItem()-methode
De methode localStorage.setItem() slaat een gegevensitem op in een opslag.
Het heeft een naam en een waarde als parameters:
Voorbeeld
localStorage.setItem("name", "John Doe");
De methode getItem()
De methode localStorage.getItem() haalt een gegevensitem op uit de opslag.
Er is een naam nodig als parameter:
Voorbeeld
localStorage.getItem("name");
Het sessieOpslagobject
Het sessionStorage-object is identiek aan het localStorage-object.
Het verschil is dat het sessionStorage-object gegevens voor één sessie opslaat.
De gegevens worden verwijderd wanneer de browser wordt gesloten.
Voorbeeld
sessionStorage.getItem("name");
De setItem()-methode
De methode sessionStorage.setItem() slaat een gegevensitem op in een opslag.
Het heeft een naam en een waarde als parameters:
Voorbeeld
sessionStorage.setItem("name", "John Doe");
De methode getItem()
De methode sessionStorage.getItem() haalt een gegevensitem op uit de opslag.
Er is een naam nodig als parameter:
Voorbeeld
sessionStorage.getItem("name");
Eigenschappen en methoden voor opslagobjecten
| Property/Method | Description |
|---|---|
| key(n) | Returns the name of the nth key in the storage |
| length | Returns the number of data items stored in the Storage object |
| getItem(keyname) | Returns the value of the specified key name |
| setItem(keyname, value) | Adds that key to the storage, or update that key's value if it already exists |
| removeItem(keyname) | Removes that key from the storage |
| clear() | Empty all key out of the storage |
Gerelateerde pagina's voor Web Storage API
| Property | Description |
|---|---|
| window.localStorage | Allows to save key/value pairs in a web browser. Stores the data with no expiration date |
| window.sessionStorage | Allows to save key/value pairs in a web browser. Stores the data for one session |