Ukladanie objektov JavaScript v HTML5 localStorage a sessionStorage

Ukladanie objektov JavaScript v HTML5 localStorage a sessionStorage
Ukladanie objektov JavaScript v HTML5 localStorage a sessionStorage
Liam Lambert
štvrtok 11. júla 2024, 21:46:27

Práca s objektmi vo webovom úložisku

Pri práci s HTML5 localStorage alebo sessionStorage sa vývojári často stretávajú s problémami pri pokuse o uloženie objektov JavaScriptu. Na rozdiel od primitívnych dátových typov a polí sa zdá, že objekty sú konvertované na reťazce, čo môže viesť k zmätku a neočakávaným výsledkom.

Pochopenie, ako správne ukladať a získavať objekty pomocou webového úložiska, je kľúčové pre mnohé webové aplikácie. Táto príručka preskúma, prečo sa objekty konvertujú na reťazce, a poskytne jednoduché riešenie, ktoré zabezpečí správne uloženie a načítanie vašich objektov.

Príkaz Popis
JSON.stringify() Konvertuje objekt alebo hodnotu JavaScriptu na reťazec JSON, čo umožňuje uloženie v localStorage alebo sessionStorage.
localStorage.setItem() Ukladá pár kľúč – hodnota v objekte localStorage, čo umožňuje uchovávanie údajov v reláciách prehliadača.
localStorage.getItem() Načíta hodnotu spojenú s daným kľúčom z localStorage.
JSON.parse() Analyzuje reťazec JSON a konvertuje ho späť na objekt JavaScript, čím umožňuje získavanie zložitých dátových štruktúr.
sessionStorage.setItem() Uloží pár kľúč – hodnota do objektu sessionStorage, čo umožňuje, aby údaje zostali zachované počas trvania relácie stránky.
sessionStorage.getItem() Načíta hodnotu spojenú s daným kľúčom zo sessionStorage.

Efektívne ukladanie a získavanie objektov vo webovom úložisku

V JavaScripte localStorage a sessionStorage sú objekty webového úložiska, ktoré vám umožňujú uložiť páry kľúč – hodnota v prehliadači. Tieto riešenia ukladania však podporujú iba reťazce, čo znamená, že pokus o priame uloženie objektu JavaScript bude mať za následok konverziu objektu na reťazcovú reprezentáciu, napr. [object Object]. Ak chcete efektívne ukladať objekty, musíte ich previesť na reťazec JSON pomocou JSON.stringify(). Táto metóda berie objekt JavaScript a vracia reťazec JSON, ktorý je možné uložiť localStorage alebo sessionStorage.

Ak chcete získať uložený objekt, musíte skonvertovať reťazec JSON späť na objekt JavaScript pomocou JSON.parse(). Táto metóda berie reťazec JSON a vracia zodpovedajúci objekt JavaScript. Skripty uvedené v príkladoch vyššie demonštrujú tento proces. Najprv sa vytvorí objekt a skonvertuje sa na reťazec JSON s JSON.stringify() pred uložením do localStorage použitím localStorage.setItem(). Na načítanie objektu sa načíta reťazec JSON localStorage použitím localStorage.getItem() a potom analyzovať späť do objektu JavaScript pomocou JSON.parse().

Ukladanie a získavanie objektov JavaScriptu v localStorage

Používanie JavaScriptu a JSON pre localStorage

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

Ukladanie a získavanie objektov JavaScriptu v sessionStorage

Používanie JavaScriptu a JSON pre sessionStorage

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

Pokročilé techniky pre webové úložisko

Pri použití HTML5 localStorage a sessionStorage, vývojári často potrebujú ukladať zložitejšie dáta ako len reťazce. Zatiaľ čo serializácia a deserializácia JSON sú účinné pre základné objekty, pokročilejšie scenáre môžu vyžadovať ďalšie úvahy. Ak napríklad pracujete s hlboko vnorenými objektmi alebo objektmi obsahujúcimi metódy, potrebujete sofistikovanejší prístup. Jednou z bežných techník je použitie knižnice ako napr Flatted alebo circular-json zvládnuť kruhové referencie a zložitejšie štruktúry objektov.

Tieto knižnice rozširujú štandard JSON.stringify() a JSON.parse() metódy na podporu serializácie a deserializácie objektov s kruhovými referenciami, umožňujúce robustnejšie riešenie ukladania objektov do webového úložiska. Ďalším aspektom je kompresia údajov. Pre veľké objekty môžete použiť knižnice ako napr LZ-String na komprimáciu údajov pred ich uložením localStorage alebo sessionStorage, čím sa zníži množstvo použitého priestoru. To môže byť užitočné najmä pre aplikácie, ktoré potrebujú ukladať značné množstvo údajov na strane klienta.

Bežné otázky o ukladaní objektov vo webovom úložisku

  1. Môžem uložiť funkcie do localStorage alebo sessionStorage?
  2. Nie, funkcie nie je možné ukladať priamo do webového úložiska. Kód funkcie môžete uložiť ako reťazec a použiť ho eval() na jeho opätovné vytvorenie, ale vo všeobecnosti sa to neodporúča kvôli bezpečnostným rizikám.
  3. Ako spracujem kruhové odkazy v objektoch?
  4. Používajte knižnice ako Flatted alebo circular-json ktoré sú navrhnuté na spracovanie kruhových odkazov v objektoch JavaScript.
  5. Na čo je limit úložiska localStorage?
  6. Limit úložiska pre localStorage je zvyčajne okolo 5 MB, ale v jednotlivých prehliadačoch sa môže líšiť.
  7. Môžem údaje pred uložením komprimovať?
  8. Áno, môžete použiť knižnice ako napr LZ-String na komprimáciu údajov pred ich uložením localStorage alebo sessionStorage.
  9. Ako uložím rad objektov?
  10. Preveďte pole na reťazec JSON pomocou JSON.stringify() pred uložením localStorage alebo sessionStorage.
  11. Je bezpečné ukladať citlivé údaje localStorage?
  12. Nie, uchovávanie citlivých údajov nie je bezpečné localStorage pretože je prístupný prostredníctvom JavaScriptu a v prípade napadnutia stránky môže byť napadnutý.
  13. Môžem použiť localStorage v rôznych doménach?
  14. nie, localStorage je obmedzený na rovnaký pôvod, čo znamená, že k nemu nemožno pristupovať cez rôzne domény.
  15. Čo sa stane, ak používateľ vymaže údaje svojho prehliadača?
  16. Všetky údaje uložené v localStorage a sessionStorage budú odstránené, ak používateľ vymaže údaje svojho prehliadača.

Záverečné myšlienky o správe ukladania objektov

Efektívne ukladanie a získavanie objektov vo webovom úložisku HTML5 vyžaduje konverziu objektov na reťazce JSON pomocou JSON.stringify() a potom ich analyzovať späť pomocou JSON.parse(). Táto metóda zaisťuje, že údaje zostanú nedotknuté a použiteľné v rôznych reláciách prehliadača. Pochopením a využitím týchto techník môžu vývojári využiť localStorage a sessionStorage na komplexnejšie úlohy správy údajov, čím sa zvýši funkčnosť a výkon ich webových aplikácií.