JavaScript objektumok tárolása HTML5 localStorage és sessionStorage tárolóban

JavaScript objektumok tárolása HTML5 localStorage és sessionStorage tárolóban
JavaScript objektumok tárolása HTML5 localStorage és sessionStorage tárolóban
Liam Lambert
2024. július 11., csütörtök 21:03:45

Munka az objektumokkal a webtárhelyen

A HTML5 localStorage vagy sessionStorage használata során a fejlesztők gyakran találkoznak problémákkal a JavaScript-objektumok tárolásakor. A primitív adattípusokkal és tömbökkel ellentétben az objektumok karakterláncokká konvertálódnak, ami zavart és váratlan eredményeket okozhat.

Az objektumok megfelelő tárolásának és visszakeresésének módja a Web Storage használatával számos webalkalmazás számára kulcsfontosságú. Ez az útmutató megvizsgálja, hogy miért konvertálják az objektumokat karakterláncokká, és egyszerű megoldást kínál az objektumok megfelelő tárolására és visszakeresésére.

Parancs Leírás
JSON.stringify() Átalakítja a JavaScript objektumot vagy értéket JSON-karakterláncsá, lehetővé téve a tárolást a localStorage-ban vagy a sessionStorage-ban.
localStorage.setItem() Kulcs-érték párt tárol a localStorage objektumban, lehetővé téve az adatok fennmaradását a böngészőmunkamenetek között.
localStorage.getItem() Lekéri az adott kulcshoz tartozó értéket a localStorage-ból.
JSON.parse() Elemez egy JSON-karakterláncot, és visszaalakítja JavaScript-objektummá, lehetővé téve az összetett adatszerkezetek lekérését.
sessionStorage.setItem() Tárol egy kulcs-érték párt a sessionStorage objektumban, lehetővé téve az adatok fennmaradását az oldalmunkamenet időtartama alatt.
sessionStorage.getItem() Lekéri az adott kulccsal társított értéket a sessionStorage-ból.

Objektumok hatékony tárolása és visszakeresése a webes tárhelyen

JavaScriptben, localStorage és sessionStorage webtárhely objektumok, amelyek lehetővé teszik a kulcs-érték párok elmentését a böngészőben. Ezek a tárolási megoldások azonban csak a karakterláncokat támogatják, ami azt jelenti, hogy egy JavaScript objektum közvetlen tárolásának kísérlete az objektumot karakterlánc-reprezentációvá alakítja, mint pl. [object Object]. Az objektumok hatékony tárolásához JSON-karakterláncra kell konvertálnia őket a használatával JSON.stringify(). Ez a metódus egy JavaScript objektumot vesz fel, és egy JSON-karakterláncot ad vissza, amelyben tárolható localStorage vagy sessionStorage.

A tárolt objektum lekéréséhez vissza kell alakítania a JSON-karakterláncot JavaScript-objektummá a használatával JSON.parse(). Ez a módszer egy JSON-karakterláncot vesz fel, és visszaadja a megfelelő JavaScript objektumot. A fenti példákban található szkriptek ezt a folyamatot mutatják be. Először egy objektumot kell létrehozni, és JSON-karakterláncsá konvertálni JSON.stringify() tárolás előtt localStorage segítségével localStorage.setItem(). Az objektum lekéréséhez a rendszer lekéri a JSON-karakterláncot localStorage segítségével localStorage.getItem() majd visszaelemezni egy JavaScript objektummá a használatával JSON.parse().

JavaScript-objektumok tárolása és visszakeresése a localStorage-ban

JavaScript és JSON használata a localStorage számára

// 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 }

JavaScript-objektumok tárolása és visszakeresése a sessionStorage-ban

JavaScript és JSON használata a sessionStorage-hoz

// 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 }

Fejlett technikák a webes tároláshoz

HTML5 használatakor localStorage és sessionStorage, a fejlesztőknek gyakran bonyolultabb adatokat kell tárolniuk, nem csupán karakterláncokat. Míg a JSON szerializálás és deszerializálás hatékony az alapvető objektumok esetében, a fejlettebb forgatókönyvek további megfontolásokat igényelhetnek. Ha például mélyen beágyazott objektumokkal vagy metódusokat tartalmazó objektumokkal dolgozik, kifinomultabb megközelítésre van szüksége. Az egyik gyakori technika egy olyan könyvtár használata, mint pl Flatted vagy circular-json körkörös hivatkozások és bonyolultabb objektumstruktúrák kezelésére.

Ezek a könyvtárak kiterjesztik a szabványt JSON.stringify() és JSON.parse() metódusok az objektumok körkörös hivatkozásokkal történő szerializálásának és deszerializálásának támogatására, ami robusztusabb megoldást tesz lehetővé az objektumok webtárhelyen történő tárolására. Egy másik szempont az adattömörítés. Nagy objektumok esetén olyan könyvtárakat használhat, mint pl LZ-String az adatok tömörítésére a tárolás előtt localStorage vagy sessionStorage, csökkentve a felhasznált hely mennyiségét. Ez különösen hasznos lehet azoknál az alkalmazásoknál, amelyeknek jelentős mennyiségű ügyféloldali adatot kell tárolniuk.

Gyakori kérdések az objektumok webtárhelyen való tárolásával kapcsolatban

  1. Tárolhatok benne funkciókat localStorage vagy sessionStorage?
  2. Nem, a funkciók nem tárolhatók közvetlenül a webtárhelyen. A függvénykódot karakterláncként tárolhatja és használhatja eval() újra létrehozni, de ez általában nem ajánlott biztonsági kockázatok miatt.
  3. Hogyan kezelhetem a körkörös hivatkozásokat az objektumokban?
  4. Használj olyan könyvtárakat, mint pl Flatted vagy circular-json amelyek a JavaScript objektumok körkörös hivatkozásainak kezelésére szolgálnak.
  5. Mire vonatkozik a tárolási korlát localStorage?
  6. Tárolási korlát: localStorage általában 5 MB körül van, de böngészőnként változhat.
  7. Tömöríthetem az adatokat tárolás előtt?
  8. Igen, használhatsz könyvtárakat, mint pl LZ-String az adatok tömörítésére, mielőtt eltárolná azokat localStorage vagy sessionStorage.
  9. Hogyan tárolhatok objektumok tömbjét?
  10. Konvertálja a tömböt JSON-karakterláncra a használatával JSON.stringify() mielőtt tárolná localStorage vagy sessionStorage.
  11. Biztonságos-e az érzékeny adatok tárolása? localStorage?
  12. Nem, nem biztonságos az érzékeny adatok tárolása localStorage mivel JavaScripten keresztül érhető el, és feltörhet, ha a webhelyet megtámadják.
  13. Használhatom localStorage különböző domainek között?
  14. Nem, localStorage ugyanarra az eredetre korlátozódik, ami azt jelenti, hogy nem érhető el különböző tartományokból.
  15. Mi történik, ha a felhasználó törli a böngésző adatait?
  16. Az összes tárolt adat localStorage és sessionStorage eltávolításra kerül, ha a felhasználó törli a böngésző adatait.

Utolsó gondolatok az objektumtárolás kezeléséről

Az objektumok hatékony tárolása és visszakeresése a HTML5 webtárhelyen megköveteli, hogy az objektumokat JSON-karakterláncokká konvertálják JSON.stringify() majd visszaelemzi őket azzal JSON.parse(). Ez a módszer biztosítja, hogy az adatok sértetlenek és használhatók maradjanak a különböző böngészőmunkamenetekben. Ezen technikák megértésével és használatával a fejlesztők a localStorage és a sessionStorage szolgáltatást összetettebb adatkezelési feladatokhoz használhatják, javítva webalkalmazásaik funkcionalitását és teljesítményét.