JavaScripti objektide salvestamine HTML5 localStorage'i ja sessionStorage'i

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 ja 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 . 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 või .

Salvestatud objekti toomiseks peate JSON-stringi uuesti JavaScripti objektiks teisendama . 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 enne sinna ladustamist kasutades localStorage.setItem(). Objekti toomiseks tuuakse JSON-string kasutades ja seejärel sõelutakse uuesti JavaScripti objektiks kasutades .

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

Täiustatud tehnikad veebisalvestuseks

HTML5 kasutamisel ja , 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 või circular-json ringikujuliste viidete ja keerukamate objektistruktuuride käsitlemiseks.

Need raamatukogud laiendavad standardit ja 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 andmete tihendamiseks enne nende salvestamist localStorage või , vähendades kasutatava ruumi hulka. See võib olla eriti kasulik rakenduste puhul, mis peavad salvestama märkimisväärse hulga kliendipoolseid andmeid.

1. Kas ma saan funktsioone salvestada või ?
2. Ei, funktsioone ei saa otse veebimällu salvestada. Funktsioonikoodi saate salvestada stringina ja kasutada seda uuesti luua, kuid see ei ole üldiselt turvariskide tõttu soovitatav.
3. Kuidas käsitleda ringikujulisi viiteid objektides?
4. Kasutage selliseid teeke nagu või mis on loodud käsitlema ringikujulisi viiteid JavaScripti objektides.
5. Mille jaoks on salvestuslimiit ?
6. Salvestuspiirang 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 andmete tihendamiseks enne nende salvestamist või .
9. Kuidas salvestada objektide massiivi?
10. Teisendage massiiv JSON-stringiks, kasutades enne selle hoiustamist või .
11. Kas tundlike andmete salvestamine on turvaline ?
12. Ei, tundlike andmete salvestamine ei ole turvaline kuna see on juurdepääsetav JavaScripti kaudu ja see võib saidi rünnaku korral ohtu sattuda.
13. Kas ma võin kasutada erinevates domeenides?
14. ei, 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 ja eemaldatakse, kui kasutaja kustutab oma brauseri andmed.

Objektide tõhusaks salvestamiseks ja toomiseks HTML5 veebimällu on vaja objektid teisendada JSON-stringideks ja seejärel sõeludes need tagasi rakendusega . 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.