JavaScripti objektide salvestamine HTML5 localStorage'i ja sessionStorage'i

JavaScripti objektide salvestamine HTML5 localStorage'i ja sessionStorage'i
JavaScripti objektide salvestamine HTML5 localStorage'i ja sessionStorage'i
Liam Lambert
Neljapäev, 11. juuli 2024 20:49:09

Veebisalvestuses olevate objektidega töötamine

HTML5 localStorage'i või sessionStorage'iga töötades tekib arendajatel sageli probleeme JavaScripti objektide salvestamisel. Erinevalt primitiivsetest andmetüüpidest ja massiividest näib, et objektid teisendatakse stringideks, mis võib põhjustada segadust ja ootamatuid tulemusi.

Paljude veebirakenduste jaoks on oluline mõista, kuidas objekte veebisalvestusruumi abil õigesti salvestada ja hankida. See juhend uurib, miks objektid stringideks teisendatakse, ja pakub lihtsat lahendust, et tagada objektide õige salvestamine ja toomine.

Käsk Kirjeldus
JSON.stringify() Teisendab JavaScripti objekti või väärtuse JSON-stringiks, võimaldades salvestamist kohalikus salvestusruumis või sessionStorage'is.
localStorage.setItem() Salvestab võtme-väärtuste paari kohalikku Storage'i objekti, võimaldades andmetel püsida brauseri seansside jooksul.
localStorage.getItem() Toob kohalikust salvestusest antud võtmega seotud väärtuse.
JSON.parse() Parsib JSON-stringi ja teisendab selle tagasi JavaScripti objektiks, võimaldades keerukate andmestruktuuride hankimist.
sessionStorage.setItem() Salvestab võtme-väärtuste paari sessioonisalvestusobjekti, võimaldades andmetel säilida lehe seansi kestel.
sessionStorage.getItem() Toob sessioonisalvestusest antud võtmega seotud väärtuse.

Objektide tõhus salvestamine ja toomine veebisalvestuses

JavaScriptis localStorage ja sessionStorage on veebisalvestusobjektid, mis võimaldavad teil brauserisse salvestada võtme-väärtuse paare. Need salvestuslahendused toetavad aga ainult stringe, mis tähendab, et JavaScripti objekti otse salvestamise katse tulemuseks on selle, et objekt teisendatakse stringi esitusviisiks, näiteks [object Object]. Objektide tõhusaks salvestamiseks peate need teisendama JSON-stringiks, kasutades JSON.stringify(). See meetod võtab JavaScripti objekti ja tagastab JSON-stringi, mille saab salvestada localStorage või sessionStorage.

Salvestatud objekti toomiseks peate JSON-stringi uuesti JavaScripti objektiks teisendama JSON.parse(). See meetod võtab JSON-stringi ja tagastab vastava JavaScripti objekti. Ülaltoodud näidetes toodud skriptid näitavad seda protsessi. Esiteks luuakse objekt ja teisendatakse see JSON-stringiks JSON.stringify() enne sinna ladustamist localStorage kasutades localStorage.setItem(). Objekti toomiseks tuuakse JSON-string localStorage kasutades localStorage.getItem() ja seejärel sõelutakse uuesti JavaScripti objektiks kasutades JSON.parse().

JavaScripti objektide salvestamine ja toomine kohalikus salvestusruumis

JavaScripti ja JSON-i kasutamine kohaliku salvestusruumi jaoks

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

JavaScripti objektide salvestamine ja toomine sessionStorage'is

JavaScripti ja JSON-i kasutamine sessionStorage'i jaoks

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

Täiustatud tehnikad veebisalvestuseks

HTML5 kasutamisel localStorage ja sessionStorage, peavad arendajad sageli salvestama keerukamaid andmeid kui lihtsalt stringid. Kuigi JSON-i serialiseerimine ja deserialiseerimine on põhiobjektide puhul tõhusad, võivad täpsemad stsenaariumid vajada täiendavaid kaalutlusi. Näiteks kui töötate sügavalt pesastatud või meetodeid sisaldavate objektidega, vajate keerukamat lähenemist. Üks levinud tehnika on kasutada raamatukogu, näiteks Flatted või circular-json ringikujuliste viidete ja keerukamate objektistruktuuride käsitlemiseks.

Need raamatukogud laiendavad standardit JSON.stringify() ja JSON.parse() meetodid objektide serialiseerimise ja deserialiseerimise toetamiseks ringikujuliste viidetega, võimaldades robustsemat lahendust objektide veebimällu salvestamiseks. Teine kaalutlus on andmete tihendamine. Suurte objektide jaoks saate kasutada selliseid teeke nagu LZ-String andmete tihendamiseks enne nende salvestamist localStorage või sessionStorage, vähendades kasutatava ruumi hulka. See võib olla eriti kasulik rakenduste puhul, mis peavad salvestama märkimisväärse hulga kliendipoolseid andmeid.

Levinud küsimused objektide veebimällu salvestamise kohta

  1. Kas ma saan funktsioone salvestada localStorage või sessionStorage?
  2. Ei, funktsioone ei saa otse veebimällu salvestada. Funktsioonikoodi saate salvestada stringina ja kasutada eval() seda uuesti luua, kuid see ei ole üldiselt turvariskide tõttu soovitatav.
  3. Kuidas käsitleda ringikujulisi viiteid objektides?
  4. Kasutage selliseid teeke nagu Flatted või circular-json mis on loodud käsitlema ringikujulisi viiteid JavaScripti objektides.
  5. Mille jaoks on salvestuslimiit localStorage?
  6. Salvestuspiirang localStorage on tavaliselt umbes 5 MB, kuid see võib brauseriteti erineda.
  7. Kas ma saan andmeid enne salvestamist tihendada?
  8. Jah, saate kasutada selliseid teeke nagu LZ-String andmete tihendamiseks enne nende salvestamist localStorage või sessionStorage.
  9. Kuidas salvestada objektide massiivi?
  10. Teisendage massiiv JSON-stringiks, kasutades JSON.stringify() enne selle hoiustamist localStorage või sessionStorage.
  11. Kas tundlike andmete salvestamine on turvaline localStorage?
  12. Ei, tundlike andmete salvestamine ei ole turvaline localStorage kuna see on juurdepääsetav JavaScripti kaudu ja see võib saidi rünnaku korral ohtu sattuda.
  13. Kas ma võin kasutada localStorage erinevates domeenides?
  14. ei, localStorage on piiratud sama päritoluga, mis tähendab, et sellele ei pääse juurde erinevatest domeenidest.
  15. Mis juhtub, kui kasutaja kustutab oma brauseri andmed?
  16. Kõik andmed on salvestatud localStorage ja sessionStorage eemaldatakse, kui kasutaja kustutab oma brauseri andmed.

Viimased mõtted objektide salvestusruumi haldamise kohta

Objektide tõhusaks salvestamiseks ja toomiseks HTML5 veebimällu on vaja objektid teisendada JSON-stringideks JSON.stringify() ja seejärel sõeludes need tagasi rakendusega JSON.parse(). See meetod tagab, et andmed jäävad puutumatuks ja erinevate brauseri seansside jooksul kasutatavaks. Nendest tehnikatest aru saades ja neid kasutades saavad arendajad kasutada localStorage'i ja sessionStorage'i keerukamate andmehaldusülesannete jaoks, parandades oma veebirakenduste funktsionaalsust ja jõudlust.