JavaScript-objecten opslaan in HTML5 localStorage en sessionStorage

Werken met objecten in webopslag

Bij het werken met HTML5 localStorage of sessionStorage komen ontwikkelaars vaak problemen tegen bij het opslaan van JavaScript-objecten. In tegenstelling tot primitieve gegevenstypen en arrays lijken objecten te worden geconverteerd naar strings, wat tot verwarring en onverwachte resultaten kan leiden.

Voor veel webapplicaties is het van cruciaal belang dat u begrijpt hoe u objecten op de juiste manier kunt opslaan en ophalen met Webopslag. In deze handleiding wordt onderzocht waarom objecten naar tekenreeksen worden geconverteerd en wordt een eenvoudige oplossing geboden om ervoor te zorgen dat uw objecten correct worden opgeslagen en opgehaald.

Commando	Beschrijving
JSON.stringify()	Converteert een JavaScript-object of -waarde naar een JSON-tekenreeks, waardoor opslag in localStorage of sessionStorage mogelijk wordt.
localStorage.setItem()	Slaat een sleutel-waardepaar op in het localStorage-object, waardoor gegevens in browsersessies behouden blijven.
localStorage.getItem()	Haalt de waarde op die aan een bepaalde sleutel is gekoppeld uit localStorage.
JSON.parse()	Parseert een JSON-tekenreeks en converteert deze terug naar een JavaScript-object, waardoor complexe gegevensstructuren kunnen worden opgehaald.
sessionStorage.setItem()	Slaat een sleutel-waardepaar op in het sessionStorage-object, waardoor gegevens gedurende de paginasessie blijven bestaan.
sessionStorage.getItem()	Haalt de waarde op die aan een bepaalde sleutel is gekoppeld uit sessionStorage.

Effectief opslaan en ophalen van objecten in webopslag

In JavaScript, En zijn webopslagobjecten waarmee u sleutel-waardeparen in de browser kunt opslaan. Deze opslagoplossingen ondersteunen echter alleen strings, wat betekent dat een poging om een ​​JavaScript-object rechtstreeks op te slaan ertoe zal leiden dat het object wordt geconverteerd naar een stringrepresentatie zoals . Om objecten effectief op te slaan, moet u ze converteren naar een JSON-tekenreeks met behulp van JSON.stringify(). Deze methode neemt een JavaScript-object en retourneert een JSON-tekenreeks, die kan worden opgeslagen in of .

Om het opgeslagen object op te halen, moet u de JSON-tekenreeks terug converteren naar een JavaScript-object met behulp van . Deze methode gebruikt een JSON-tekenreeks en retourneert het bijbehorende JavaScript-object. De scripts in de bovenstaande voorbeelden demonstreren dit proces. Eerst wordt een object gemaakt en geconverteerd naar een JSON-string met voordat het wordt opgeslagen gebruik makend van localStorage.setItem(). Om het object op te halen, wordt de JSON-tekenreeks opgehaald gebruik makend van en vervolgens terug geparseerd naar een JavaScript-object met behulp van .

// Create an object
var testObject = {'one': 1, 'two': 2, 'three': 3};

// Convert the object to a JSON string and store it in localStorage
localStorage.setItem('testObject', JSON.stringify(testObject));

// Retrieve the JSON string from localStorage and convert it back to an object
var retrievedObject = JSON.parse(localStorage.getItem('testObject'));

// Verify the type and value of the retrieved object
console.log('typeof retrievedObject: ' + typeof retrievedObject);
console.log('Value of retrievedObject: ', retrievedObject);

// Output should be:
// typeof retrievedObject: object
// Value of retrievedObject: { one: 1, two: 2, three: 3 }

// Create an object
var testObject = {'one': 1, 'two': 2, 'three': 3};

// Convert the object to a JSON string and store it in sessionStorage
sessionStorage.setItem('testObject', JSON.stringify(testObject));

// Retrieve the JSON string from sessionStorage and convert it back to an object
var retrievedObject = JSON.parse(sessionStorage.getItem('testObject'));

// Verify the type and value of the retrieved object
console.log('typeof retrievedObject: ' + typeof retrievedObject);
console.log('Value of retrievedObject: ', retrievedObject);

// Output should be:
// typeof retrievedObject: object
// Value of retrievedObject: { one: 1, two: 2, three: 3 }

Geavanceerde technieken voor webopslag

Bij gebruik van HTML5 En , moeten ontwikkelaars vaak complexere gegevens opslaan dan alleen tekenreeksen. Hoewel JSON-serialisatie en deserialisatie effectief zijn voor basisobjecten, vereisen meer geavanceerde scenario's mogelijk aanvullende overwegingen. Als u bijvoorbeeld werkt met diep geneste objecten of objecten die methoden bevatten, heeft u een meer geavanceerde aanpak nodig. Een veelgebruikte techniek is het gebruik van een bibliotheek zoals of circular-json om cirkelreferenties en complexere objectstructuren te verwerken.

Deze bibliotheken breiden de standaard uit En methoden om serialisatie en deserialisatie van objecten met cirkelreferenties te ondersteunen, waardoor een robuustere oplossing mogelijk wordt voor het opslaan van objecten in webopslag. Een andere overweging is datacompressie. Voor grote objecten kunt u bibliotheken gebruiken zoals om de gegevens te comprimeren voordat ze worden opgeslagen localStorage of , waardoor de hoeveelheid gebruikte ruimte wordt verminderd. Dit kan met name handig zijn voor toepassingen die een aanzienlijke hoeveelheid gegevens aan de clientzijde moeten opslaan.

1. Kan ik functies opslaan in of ?
2. Nee, functies kunnen niet rechtstreeks in de webopslag worden opgeslagen. U kunt de functiecode als string opslaan en gebruiken om het opnieuw te maken, maar dit wordt over het algemeen niet aanbevolen vanwege veiligheidsrisico's.
3. Hoe ga ik om met cirkelverwijzingen in objecten?
4. Gebruik bibliotheken zoals of die zijn ontworpen om kringverwijzingen in JavaScript-objecten te verwerken.
5. Waar is de opslaglimiet voor ?
6. De opslaglimiet voor is doorgaans ongeveer 5 MB, maar dit kan per browser variëren.
7. Kan ik gegevens comprimeren voordat ik ze opsla?
8. Ja, u kunt bibliotheken gebruiken zoals om uw gegevens te comprimeren voordat u deze opslaat of .
9. Hoe sla ik een array van objecten op?
10. Converteer de array naar een JSON-tekenreeks met behulp van voordat u het opbergt of .
11. Is het veilig om gevoelige gegevens op te slaan? ?
12. Nee, het is niet veilig om gevoelige gegevens op te slaan omdat het toegankelijk is via JavaScript en kan worden aangetast als de site wordt aangevallen.
13. Kan ik gebruiken over verschillende domeinen?
14. Nee, is beperkt tot dezelfde oorsprong, wat betekent dat het niet toegankelijk is via verschillende domeinen.
15. Wat gebeurt er als de gebruiker zijn browsergegevens wist?
16. Alle gegevens opgeslagen in En worden verwijderd als de gebruiker zijn browsergegevens wist.

Voor het effectief opslaan en ophalen van objecten in HTML5-webopslag moeten objecten naar JSON-tekenreeksen worden geconverteerd en ze vervolgens terug te parseren . Deze methode zorgt ervoor dat de gegevens intact en bruikbaar blijven in verschillende browsersessies. Door deze technieken te begrijpen en te gebruiken, kunnen ontwikkelaars localStorage en sessionStorage inzetten voor complexere gegevensbeheertaken, waardoor de functionaliteit en prestaties van hun webapplicaties worden verbeterd.