Dit is een volledig standaard HTML-sjabloon die we kunnen vullen met dynamisch gegenereerde inhoud met behulp van JavaScript.

JavaScript

Gezien de structuur van de eenvoudige kladbloktoepassing in ons voorbeeld, is het eerste dat we moeten doen het bijhouden van de knopklikgebeurtenis. "Invoer toevoegen" en controleer of er informatie is ingevoerd in het tekstveld voor de invoer, dat wil zeggen dat deze op het moment dat de knop wordt ingedrukt niet leeg mag zijn. Iets als dit:

$("#add").klik(functie() (
//als het tekstveld leeg is
$("#alert").html(" Aandacht! Voer de vermelding in tekst in
veld.");
retour vals;
}

Dit is wat we doen met dit stukje code. Wanneer de knop wordt ingedrukt "Invoer toevoegen" we controleren of de gebruiker iets heeft ingevoerd in het nieuwe invoerveld. Als hij dit niet heeft gedaan, verschijnt de div die we hebben opgegeven voor het weergeven van berichten, waarbij de gebruiker wordt geïnformeerd dat het invoerveld voor de invoer niet is ingevuld en vervolgens, na 1000 ms (1 seconde), het div-element en dienovereenkomstig het bericht: verdwijnt. De functie retourneert vervolgens false, waarna de browser stopt met het uitvoeren van de rest van het script en de applicatie weer klaar is om een ​​nieuwe invoer in te voeren.

Onze volgende stap is het toevoegen van de waarde die in het invoerveld is ingevoerd aan het begin van de lijst door een nieuw lijstelement te genereren. Wanneer de gebruiker dus nog een item toevoegt, wordt dit altijd aan het begin van de lijst met geplande taken en verwachte gebeurtenissen geplaatst. Hierna hoeven we alleen maar de lijst op te slaan met behulp van het localStorage-mechanisme:

// Voeg een item toe aan de bestaande lijst
$("#todos").prepend("

Zoals je misschien hebt gemerkt, is hier niets ongewoons, er wordt gebruik gemaakt van de standaardversie van jQuery-code. Wanneer we toegang krijgen tot het localStorage-object, moeten we de gegevens die we opslaan specificeren in sleutel/waarde-vorm. Je kunt een willekeurige naam voor de sleutel gebruiken, en ik heb deze een naam gegeven "todos", dan moeten we aangeven wat we daadwerkelijk in het geheugen moeten opslaan. In dit geval is het een compleet fragment van HTML-opmaak, opgenomen in een ongeordende lijst (tussen de tags), die alle eerder door de gebruiker ingevoerde gegevens weergeeft. Uit de code kun je zien dat we eenvoudigweg het fragment ophalen dat we nodig hebben met behulp van de jQuery .html() -methode en aan het einde, nadat we alle noodzakelijke acties hebben voltooid, stellen we de retourwaarde van de functie in op false , waardoor de formuliergegevens niet kunnen worden weergegeven zodat deze niet wordt verzonden en daarom onze pagina opnieuw wordt geladen.

Laten we nu zeggen dat onze gebruiker eerder verschillende gegevens heeft ingevoerd, en voor een verdere normale werking van de applicatie moeten we controleren of localStorage informatie bevat die eerder op de computer is opgeslagen en, zo ja, deze voor de gebruiker weergeven. Omdat onze sleutelnaam "todos" is, moeten we het bestaan ​​ervan als volgt controleren:

// als er al gegevens in de lokale opslag staan, geef deze dan weer

}

Om de aanwezigheid van gegevens te controleren, gebruikten we een reguliere if-instructie en als aan de door ons opgegeven voorwaarde was voldaan, haalden we eenvoudigweg alle gegevens uit de lokale opslag op en plaatsten deze als HTML-opmaak in een ongeordende lijst, die de eerder ingevoerde gegevens weergeeft. door de gebruiker.

Als u de werking van uw eenvoudige applicatie controleert, zult u merken dat na het herladen van de pagina alles op zijn plaats blijft. En nu is het laatste dat we moeten doen een functie creëren waarmee de gebruiker, indien nodig, al zijn invoer kan verwijderen. Dit wordt geïmplementeerd door localStorage te wissen en de pagina opnieuw te laden om de aangebrachte wijzigingen te activeren. Vervolgens stellen we, net als in het vorige geval, false in als de retourwaarde van de functie, waardoor wordt voorkomen dat de hash in de URL verschijnt. ( *en scrollt niet omhoog op de pagina.):

// Volledige opschoning van localStorage
venster.localStorage.clear();
locatie.herladen();
retour vals;
});

Hierdoor hebben we een volledig functionerende applicatie. En als we alle bovenstaande fragmenten samenvoegen, krijgen we de volledige applicatiecode:

$("#add").klik(functie() (
var Beschrijving = $("#description").val();
if($("#beschrijving").val() == "") (
$("#alert").html(" Aandacht! Voer invoer in
tekstveld.");
$("#alert").fadeIn().delay(1000).fadeOut();
retour vals;
}
$("#todos").prepend("

if(localStorage.getItem("todos")) (
$("#todos").html(localStorage.getItem("todos"));
}

$("#clear").klik(functie() (
venster.localStorage.clear();
locatie.herladen();
retour vals;
});

Browser-ondersteuning.

De HTML5-specificatie biedt behoorlijk krachtige ondersteuning voor webopslagtechnologie, waardoor deze ook door de meeste populaire browsers wordt geïmplementeerd, zelfs IE8. Het enige probleem blijft IE7, als je nog steeds geïnteresseerd bent.

Conclusie.

In zulke kleine toepassingen kan het localStorage-mechanisme met succes het gebruik van databases vervangen. Om kleine hoeveelheden data op te slaan is het niet nodig om complexere alternatieven te gebruiken.

* Noot van de vertaler.

Berichtweergaven: 475

Ik heb je een artikel gestuurd met een verhaal over HTML5 LocalStorage in browsers. Wij geven hem het woord.

Ik heb geprobeerd de eenvoudigste en meest begrijpelijke handleiding te schrijven voor het gebruik van localStorage-technologie. Het artikel bleek vrij kort te zijn, omdat de technologie zelf en de middelen om ermee te werken niet ingewikkeld zijn. Om aan de slag te gaan, hoeft u alleen maar een beetje JavaScript te kennen. Besteed dus 10 minuten aan dit artikel en u kunt veilig de regel “Ik kan werken met localStorage” aan uw cv toevoegen.

Wat is lokale opslag?

Zo ziet een JavaScript-object eruit:

Var myCar = ( wielen: 4, deuren: 4, motor: 1, naam: "Jaguar" )

En zo ziet JSON eruit. Bijna hetzelfde als bij een gewoon js-object, alleen moeten alle eigenschappen tussen aanhalingstekens staan.

( "firstName": "Ivan", "lastName": "Ivanov", "address": ( "streetAddress": "Moskovskoe sh., 101, apt. 101", "city": "Leningrad", "postalCode": 101101 ), "telefoonnummers": [ "812 123-1234", "916 123-4567" ] )

Om te begrijpen wat localStorage is, stelt u zich eens voor dat er ergens in uw browser zo'n object is ingebouwd dat we kunnen gebruiken. Tegelijkertijd wist dit object de waarden die we daar schrijven niet als we de pagina opnieuw laden of zelfs de browser volledig sluiten.

In JavaScript-termen is localStorage een eigenschap van het globale browserobject (venster). Het is toegankelijk als window.localStorage of gewoon localStorage.

Het is ook de moeite waard om te zeggen dat de browser een localStorage-kloon heeft genaamd sessionStorage. Hun enige verschil is dat deze laatste gegevens slechts voor één tabblad (sessie) opslaat en eenvoudigweg de ruimte vrijmaakt zodra we het tabblad sluiten

Laten we het live bekijken. In Google Chrome moet je bijvoorbeeld DevTools (F12) openen, naar het tabblad “Bronnen” gaan en in het linkerdeelvenster zie je de localStorage voor dit domein en alle waarden die deze bevat.

Je zou trouwens moeten weten hoe localStorage met domeinen werkt. Voor elk domein maakt uw browser zijn eigen localStorage-object, en dit kan alleen op dat domein worden bewerkt of bekeken. Het domein mijndomein-1.com heeft bijvoorbeeld geen toegang tot de localStorage van uw mijndomein-2.com.

Waarom heb ik lokale opslag nodig?

LocalStorage is maar voor één ding nodig: om bepaalde gegevens tussen gebruikerssessies op te slaan. Je kunt duizend-en-een dingen bedenken die kunnen worden opgeslagen in de lokale opslag van de browser. Bijvoorbeeld browsergames die het gebruiken als opslagbestand, of het moment registreren waarop de gebruiker stopte tijdens het kijken naar een video, verschillende gegevens voor formulieren, enz.

Hoe ga ik aan de slag met localStorage?

Heel eenvoudig.

Werken met localStorage lijkt sterk op het werken met objecten in JavaScript. Er zijn verschillende methoden om ermee te werken.

localStorage.setItem("sleutel", "waarde")

Een methode die een nieuwe sleutel met een waarde toevoegt aan localStorage (en als zo'n sleutel al bestaat, wordt deze overschreven met een nieuwe waarde). We schrijven bijvoorbeeld localStorage.setItem('myKey', 'myValue');

localStorage.getItem("sleutel")

We halen een specifieke waarde uit de sleutelopslag.

localStorage.removeItem("Sleutel")

Het verwijderen van de sleutel

lokale opslag.clear()

Alle opslagruimte wissen

Nu kunt u het tabblad localStorage in uw browser openen en zelf oefenen met het opnemen en ophalen van gegevens uit deze opslag. Als er iets gebeurt, schrijven we alle code in een js-bestand.

//Voeg de waarde toe of wijzig deze: localStorage.setItem("myKey", "myValue"); //nu heb je de sleutel "myKey" met de waarde "myValue" opgeslagen in localStorage // Voer deze uit naar de console: var localValue = localStorage.getItem("myKey"); console.log(lokalewaarde); //"mijnWaarde" //verwijder: localStorage.removeItem("mijnSleutel"); //de volledige opslag wissen localStorage.clear() Hetzelfde, alleen met vierkante haakjes: localStorage["Key"] = "Waarde" //de waarde instellen localStorage["Key"] //De waarde ophalen delete localStorage[" Sleutel"] // Waarde verwijderen

Ik zou ook willen opmerken dat localStorage uitstekend werkt met geneste structuren, bijvoorbeeld objecten.

//maak een object var obj = ( item1: 1, item2: , item3:"hello" ); var serialObj = JSON.stringify(obj); // serialiseer het localStorage.setItem("myKey", serialObj); //schrijf het naar de opslag met behulp van de sleutel "myKey" var returnObj = JSON.parse(localStorage.getItem("myKey")) //parseer het terug als een object

U moet ook weten dat browsers 5 MB toewijzen aan localStorage. En als u deze overschrijdt, ontvangt u een uitzondering QUOTA_EXCEEDED_ERR. Je kunt er overigens mee checken of er nog ruimte is in je opslag.

Probeer ( localStorage.setItem("key", "value"); ) catch (e) ( if (e == QUOTA_EXCEEDED_ERR) ( alert("Limiet overschreden"); ) )

In plaats van een conclusie

Ik zou graag willen dat ontwikkelaars uit dit korte artikel een eenvoudige conclusie trekken dat deze technologie al volledig kan worden gebruikt in uw projecten. Het heeft een goede standaardisatie en uitstekende ondersteuning, die zich alleen maar in de loop van de tijd ontwikkelt.

Beoordeling van webopslag

Op internet kan informatie op twee plaatsen worden opgeslagen: op de webserver en op de webclient (dat wil zeggen: de computer van de paginabezoeker). Bepaalde soorten gegevens kunnen het beste op een van deze plaatsen worden opgeslagen, en andere typen op een andere.

De juiste plaats om vertrouwelijke en belangrijke gegevens op te slaan is een webserver. Als u bijvoorbeeld artikelen aan uw winkelwagentje in een online winkel toevoegt, worden gegevens over uw potentiële aankoop opgeslagen op een webserver. Er worden slechts enkele bytes aan trackinggegevens met informatie over u (of beter gezegd, over uw computer) op uw computer opgeslagen, zodat de webserver weet welk winkelwagentje van u is. Zelfs met de nieuwe functies van HTML5 is het niet nodig dit systeem te veranderen; het is betrouwbaar, veilig en efficiënt.

Maar het opslaan van gegevens op een server is niet altijd de beste aanpak, omdat... Soms is het gemakkelijker om niet-essentiële informatie op de computer van de gebruiker op te slaan. Het is bijvoorbeeld zinvol om gebruikersvoorkeuren (bijvoorbeeld instellingen die bepalen hoe een webpagina wordt weergegeven) en de applicatiestatus (een momentopname van de huidige status van de webapplicatie) lokaal op te slaan, zodat de bezoeker deze later op dezelfde plek kan ophalen. .

Vóór HTML5 was de enige manier om gegevens lokaal op te slaan het gebruik van het bestandsmechanisme koekjes, dat oorspronkelijk was ontworpen om kleine hoeveelheden identificerende informatie uit te wisselen tussen webservers en browsers. Cookies zijn ideaal voor het opslaan van kleine hoeveelheden gegevens, maar het JavaScript-model om ermee te werken is een beetje onhandig. Het cookiesysteem dwingt de ontwikkelaar ook om met vervaldata te rommelen en bij elk paginaverzoek onnodig gegevens heen en weer over het internet te sturen.

HTML5 introduceert een beter alternatief voor cookies, waardoor het eenvoudig en eenvoudig wordt om informatie op de computer van een bezoeker op te slaan. Deze informatie kan voor onbepaalde tijd op de computer van de klant worden opgeslagen, wordt niet naar de webserver verzonden (tenzij de ontwikkelaar dat doet), kan groot van formaat zijn en vereist slechts een paar eenvoudige, efficiënte JavaScript-objecten om te manipuleren.

Deze functie heet webopslag en is vooral geschikt voor gebruik met offline websites, omdat Hiermee kunt u zelfvoorzienende, offline applicaties maken die alle benodigde informatie kunnen opslaan, zelfs als er geen internetverbinding is.

Dankzij de HTML5-webopslagfunctionaliteit kan een webpagina gegevens op de computer van de bezoeker opslaan. Deze informatie kan van korte duur zijn, wat wordt verwijderd wanneer u de browser uitschakelt, of van lange termijn, die bij volgende bezoeken aan de webpagina beschikbaar blijft.

Informatie die in webopslag wordt opgeslagen, wordt niet daadwerkelijk op internet opgeslagen, maar op de computer van de webpaginabezoeker. Met andere woorden, webopslag betekent dat gegevens niet op internet worden opgeslagen, maar dat gegevens van internet worden opgeslagen.

Er zijn twee soorten webopslag, die op de een of andere manier aan twee objecten zijn gekoppeld:

Gebruikt voorwerp lokale opslag om gegevens voor de gehele website permanent op te slaan. Dit betekent dat als een webpagina gegevens opslaat in lokale opslag, die gegevens beschikbaar zullen zijn voor de gebruiker wanneer hij de volgende dag, volgende week of volgend jaar terugkeert naar die webpagina.

Uiteraard bieden de meeste browsers de gebruiker ook de mogelijkheid om de lokale opslag te wissen. Sommige browsers implementeren dit als een alles-of-niets-strategie en verwijderen alle lokale gegevens, net zoals cookies worden verwijderd. (In sommige browsers zijn het cookiesysteem en de lokale opslag zelfs met elkaar verbonden, dus de enige manier om lokale gegevens te verwijderen is door de cookies te verwijderen.) En andere browsers kunnen de gebruiker toestaan ​​gegevens voor elke individuele website te bekijken en gegevens voor elke individuele website te verwijderen. een geselecteerde site of sites.

Gebruikt voorwerp sessieOpslag voor tijdelijke opslag van gegevens voor één browservenster of tabblad. Deze gegevens zijn alleen beschikbaar totdat de gebruiker het venster of tabblad sluit, waarna de sessie eindigt en de gegevens worden verwijderd. Maar sessiegegevens blijven behouden als de gebruiker naar een andere website gaat en vervolgens weer terugkeert, zolang dit in hetzelfde browservenster gebeurt.

Vanuit het perspectief van webpaginacode werken zowel lokale opslag als sessiegegevensopslag precies hetzelfde. Het enige verschil is de duur van de gegevensopslag.

Het gebruik van lokale opslag biedt de beste mogelijkheid om de vereiste informatie op te slaan voor volgende bezoeken aan een webpagina door de gebruiker. En de sessieopslag wordt gebruikt om gegevens op te slaan die van de ene pagina naar de andere moeten worden overgebracht. (Sessieopslag kan ook tijdelijke gegevens opslaan die slechts op één pagina worden gebruikt, maar gewone JavaScript-variabelen werken prima voor dit doel.)

Zowel lokale opslag als sessieopslag zijn gekoppeld aan het websitedomein. Als u dus gegevens voor de www..html-pagina opslaat in de lokale opslag, zijn deze gegevens beschikbaar voor de www..html-pagina, omdat beide pagina's hebben hetzelfde domein. Maar deze gegevens zijn niet beschikbaar voor pagina's op andere domeinen.

Bovendien, omdat webopslag bevindt zich op de computer (of mobiel apparaat) van een bepaalde gebruiker, is gekoppeld aan die computer, en een webpagina die op die computer wordt geopend en gegevens opslaat in de lokale opslag, heeft geen toegang tot informatie die op een andere computer is opgeslagen . Op dezelfde manier creëert een webpagina aparte lokale opslag als u inlogt met een andere gebruikersnaam of een andere browser gebruikt.

Hoewel de HTML5-specificatie geen harde regels stelt met betrekking tot maximale opslag, beperken de meeste browsers deze tot 5 MB. Je kunt veel gegevens in dit volume stoppen, maar dat zal niet genoeg zijn als je lokale opslag wilt gebruiken voor prestatie-optimalisatie en grote hoeveelheden afbeeldingen of video's erin wilt cachen (en in werkelijkheid is lokale opslag niet ontworpen voor dergelijke doeleinden).

Voor het opslaan van grote hoeveelheden gegevens, een nog steeds evoluerende databasestandaard GeïndexeerdeDB maakt lokale opslag van veel grotere hoeveelheden mogelijk - meestal 50 MB om mee te beginnen en meer als de gebruiker ermee instemt.

Gegevens opslaan

Voordat een stukje informatie in de lokale opslag of sessieopslag kan worden geplaatst, moet het een beschrijvende naam krijgen. Deze naam wordt een sleutel genoemd en is nodig zodat de gegevens in de toekomst kunnen worden opgehaald.

De syntaxis voor het opslaan van gegevens is als volgt:

lokale opslag = gegevens;

// JS localStorage["gebruikersnaam"] = "Ivan Petrov";

Het heeft uiteraard geen zin om een ​​fragment statische tekst op te slaan. Normaal gesproken moeten we een soort variabele gegevens opslaan, zoals de huidige datum, het resultaat van een wiskundige berekening of tekstgegevens die door de gebruiker in formuliervelden zijn ingevoerd. Hier volgt een voorbeeld van het opslaan van door de gebruiker ingevoerde tekstgegevens:

Functie saveData() ( // Haal de waarden van de tekstvelden op var localData = document.getElementById("localData").value; var sessionData = document.getElementById("sessionData").value; // Sla de ingevoerde tekst op in het tekstveld in de lokale opslag localStorage["localData"] = localData; // Bewaar de tekst die in het tekstveld is ingevoerd in de sessieopslag sessionStorage["sessionData"] = sessionData functie loadData() ( // Laad opgeslagen gegevens van storage var localData = localStorage ["localData"]; var sessionData = sessionStorage["sessionData"]; // Geef deze gegevens weer in tekstvelden if (localData != null) ( document.getElementById("localData").value = localData; ) if (sessionData ! = null) ( document.getElementById("sessionData").value = sessionData; ) )

De pagina bevat twee tekstvelden: voor lokale opslag (bovenaan) en voor sessieopslag (onderaan). Als u op de knop "Opslaan" klikt, wordt de tekst opgeslagen die in de tekstvelden is ingevoerd, en als u op de knop "Laden" klikt, worden de overeenkomstige opgeslagen gegevens in de velden weergegeven.

Webopslag ondersteunt ook de minder gebruikelijke syntaxis van eigendommen. Volgens de regels van deze syntaxis verwijzen we naar de opslaglocatie met de naam gebruikersnaam localStorage.username in plaats van localStorage["gebruikersnaam"]. Beide typen syntaxis zijn gelijkwaardig, en het gebruik van de een of de ander is een kwestie van persoonlijke voorkeur.

Webopslag werkt niet zonder een webserver

Tijdens uw onderzoek naar webopslag kunt u een onverwacht probleem tegenkomen. In veel browsers werkt webopslag alleen voor pagina's die door de webserver worden aangeboden. Het maakt niet uit waar de server zich bevindt, op internet of op uw eigen computer, het belangrijkste is simpelweg dat de pagina's niet vanaf de lokale harde schijf worden gestart (bijvoorbeeld door te dubbelklikken op het pictogram van het paginabestand).

Deze functie is een neveneffect van de manier waarop browsers lokale opslagruimte toewijzen. Zoals eerder vermeld beperken browsers de lokale opslag per website tot 5 MB, waardoor ze elke pagina die lokale opslag wil gebruiken, moeten koppelen aan het domein van de website.

Wat gebeurt er als u een pagina opent die webopslag gebruikt vanaf uw lokale harde schijf? Het hangt allemaal af van de browser. Internet Explorer lijkt de ondersteuning voor webopslag volledig te verliezen. De localStorage- en sessionStorage-objecten verdwijnen en pogingen om deze te gebruiken veroorzaken een JavaScript-fout.

In Firefox blijven de localStorage- en sessionStorage-objecten op hun plaats en lijken ze te worden ondersteund (zelfs Modernizr stelt vast dat ze worden ondersteund), maar alles wat naar de opslag wordt gestuurd, verdwijnt naar God weet waar. De Chrome-browser is opnieuw iets anders: de meeste webopslagfunctionaliteit werkt zoals het zou moeten, maar sommige functies (zoals de onStorage-gebeurtenis) werken niet.

Soortgelijke problemen doen zich voor bij het gebruik van de File API. Je bespaart jezelf dus een hoop gedoe als je de pagina die je test op een testserver zet om al die onzekerheden te voorkomen.

Browserondersteuning voor webopslag

Webopslag is een van de meest ondersteunde functies van HTML5, met goede ondersteuning in elke grote browser. De onderstaande tabel toont de minimale versies van de belangrijkste browsers die webopslag ondersteunen:

Al deze browsers bieden lokale opslag en opslagmogelijkheden voor sessiegegevens. Maar ondersteuning voor de onStorage-gebeurtenis vereist latere versies van browsers, zoals IE 9, Firefox 4 of Chrome 6.

De meest problematische versie is IE 7, die helemaal geen webopslag ondersteunt. Als tijdelijke oplossing kunt u webopslag emuleren met behulp van cookies. Het is niet bepaald een perfecte oplossing, maar het werkt. Hoewel er geen officieel script bestaat om dit gat te dichten, zijn er enkele goede uitgangspunten te vinden op de HTML5 Cross Browser-pagina (onder "Webopslag").

Het rechtstreeks opslaan van gegevens in de browser heeft veel voordelen, waarvan de belangrijkste een snelle en netwerkonafhankelijke toegang tot de “database” is. Er zijn momenteel vier actieve methoden hiervoor (plus één verouderd):

1. Lokale opslag
2. Sessie opslag
3. GeïndexeerdeDB
4. WebSQL (verouderd)

Koekjes

Cookies zijn een klassieke manier om eenvoudige tekenreeksgegevens in een document op te slaan. Doorgaans worden cookies van de server naar de client verzonden, die ze kan opslaan en vervolgens bij daaropvolgende verzoeken terug naar de server kan sturen. Dit kan worden gebruikt voor zaken als het beheren van accountsessies of het bijhouden van gebruikersinformatie.

Bovendien kunnen cookies worden gebruikt om eenvoudig gegevens aan de clientzijde op te slaan. Daarom worden ze ook vaak gebruikt om algemene gegevens zoals gebruikersinstellingen op te slaan.

Basis CRUD-bewerkingen met cookies

// Maak document.cookie = "user_name=Ire Aderinokun"; document.cookie = "user_age=25;max-age=31536000;veilig"; // Lezen (alles) console.log(document.cookie); // Update document.cookie = "user_age=24;max-age=31536000;secure"; // Document verwijderen.cookie = "user_name=Ire Aderinokun;expires=Do, 01 Jan 1970 00:00:01 GMT";

Voordelen van cookies

• Ze kunnen worden gebruikt om met de server te communiceren
• We kunnen instellen dat cookies automatisch verlopen in plaats van ze handmatig te verwijderen.

Nadelen van cookies

• Ze worden toegevoegd aan het laden van de documentpagina
• Ze kunnen een kleine hoeveelheid gegevens opslaan
• Ze kunnen alleen strings bevatten.
• Mogelijke beveiligingsproblemen.
• Deze methode wordt niet aanbevolen voor het opslaan van gegevens op de client sinds de komst van de Web Storage API (lokale opslag en sessieopslag).

Browser-ondersteuning

Cookies hebben basisondersteuning in alle grote browsers.

Lokale opslag

Lokale opslag is een subset van de Web Storage API, een speciale API voor het opslaan van gegevens in de browser in een sleutelwaarde-indeling. Deze API is gemaakt als oplossing voor cookieproblemen en is een meer intuïtieve en veilige manier om eenvoudige gegevens in de browser op te slaan.

Hoewel we technisch gezien alleen tekenreeksen in lokale opslag kunnen opslaan, wordt dit ondervangen door te converteren naar JSON. Op deze manier kunnen we complexere gegevens in lokale opslag opslaan in vergelijking met cookies.

Basis CRUD-bewerkingen met lokale opslag

// Creëer const user = (naam: "Ire Aderinokun", leeftijd: 25) localStorage.setItem("user", JSON.stringify(user)); // Lees (enkel) console.log(JSON.parse(localStorage.getItem("user"))) // Update const bijgewerktUser = ( naam: "Ire Aderinokun", leeftijd: 24) localStorage.setItem("user", JSON.stringify(updatedUser)); // Verwijder localStorage.removeItem("gebruiker");

Voordelen van lokale opslag

• Biedt een eenvoudigere en intuïtievere interface voor gegevensopslag.
• Veiliger voor het opslaan van gegevens op de client.
• Hiermee kunt u meer gegevens opslaan (alle 3 punten - vergeleken met cookies).

Nadelen van lokale opslag

• Hiermee kunt u alleen strings opslaan

Browser-ondersteuning

Sessie opslag

Sessieopslag is het tweede type webopslag-API. Het is precies hetzelfde als lokale opslag, behalve dat de gegevens alleen worden opgeslagen voor de browsertabsessie. Zodra de gebruiker de pagina verlaat en de browser sluit, worden de gegevens gewist.

Basis CRUD-bewerkingen met sessieopslag

// Creëer const user = (naam: "Ire Aderinokun", leeftijd: 25) sessionStorage.setItem("user", JSON.stringify(user)); // Lees (enkel) console.log(JSON.parse(sessionStorage.getItem("user"))) // Update const bijgewerktUser = (naam: "Ire Aderinokun", leeftijd: 24) sessionStorage.setItem("user", JSON.stringify(updatedUser)); // Verwijder sessionStorage.removeItem("gebruiker");

De voordelen, nadelen en ondersteuning in browsers zijn precies hetzelfde als voor lokale opslag.

GeïndexeerdeDB

IndexedDB is een veel complexere en volwassener oplossing voor het opslaan van gegevens in de browser, omdat het een low-level API is voor het opslaan van aanzienlijke hoeveelheden gestructureerde gegevens op de client. In de kern is het een objectgeoriënteerde database op basis van JavaScript waarmee we eenvoudig op sleutel geïndexeerde gegevens kunnen opslaan en ophalen.

WebSQL

WebSQL is een relationele database-API aan de clientzijde, vergelijkbaar met SQLite. Vanaf 2010 is de W3C-werkgroep gestopt met het werken aan deze specificatie en deze API maakt geen deel meer uit van de HTML-specificatie en mag niet worden gebruikt.

Het maken van een takenlijst-app is meestal de eerste app die u maakt als u JavaScript leert, maar het probleem met al deze apps is dat wanneer u de pagina opnieuw laadt, al deze lijsten verdwijnen.
Er is een eenvoudige oplossing: gebruik maken van lokale opslag. Het voordeel van lokale opslag is dat u stukjes gegevens op de computer van de gebruiker kunt opslaan en dat wanneer de pagina opnieuw wordt geladen, alle takenlijsten nog steeds aanwezig zijn.

Wat is lokale opslag?

Lokale gegevensopslag maakt deel uit van een opslagnetwerk, dat zelf deel uitmaakt van de HTML5-specificatie. Er zijn twee mogelijkheden om gegevens in een specificatie op te slaan:

• Lokale opslag: slaat gegevens op zonder vervaldatum. Dit is de optie die we gebruiken omdat we willen dat onze vermeldingen zo lang mogelijk op de pagina blijven staan.
• Sessieopslag: slaat slechts gegevens op voor één sessie, dus als een gebruiker een tabblad sluit en opnieuw opent, gaan al zijn gegevens verloren.

Simpel gezegd: het enige dat webopslag doet, is het lokaal opslaan van sleutel-waardeparen met een naam. In tegenstelling tot cookies worden deze gegevens zelfs opgeslagen als u uw browser sluit of uw computer uitschakelt.

Als we nadenken over een to-do-lijst, dan heb je het volgende nodig:

• Entree waar u onze lijst kunt plaatsen
• Enter-knop om lijst toe te voegen
• Knop om het hele dagboek te wissen
• Een ongeordende lijstcontainer waarin onze lijst in een lijst met elementen wordt geplaatst
• En ten slotte hebben we een container-DIV nodig om een ​​melding weer te geven wanneer u een lege taak probeert in te voeren.

Dus onze HTML zou er ongeveer zo uit moeten zien: