JavaScript-objektien tallentaminen HTML5 localStorageen ja sessionStorageen

Työskentely Web Storage -objektien kanssa

Kun työskentelet HTML5 localStoragen tai sessionStoragen kanssa, kehittäjät kohtaavat usein ongelmia yrittäessään tallentaa JavaScript-objekteja. Toisin kuin primitiiviset tietotyypit ja taulukot, objektit näyttävät muunnettavan merkkijonoiksi, mikä voi johtaa sekaannukseen ja odottamattomiin tuloksiin.

Objektien oikean tallentamisen ja noutamisen ymmärtäminen Web Storagen avulla on ratkaisevan tärkeää monille verkkosovelluksille. Tämä opas tutkii, miksi objektit muunnetaan merkkijonoiksi, ja tarjoaa yksinkertaisen kiertotavan varmistaaksesi, että objektisi tallennetaan ja haetaan oikein.

Komento	Kuvaus
JSON.stringify()	Muuntaa JavaScript-objektin tai arvon JSON-merkkijonoksi, mikä mahdollistaa tallennuksen localStoragessa tai sessionStoragessa.
localStorage.setItem()	Tallentaa avain-arvo-parin localStorage-objektiin, mikä mahdollistaa tietojen säilymisen selainistuntojen välillä.
localStorage.getItem()	Hakee tiettyyn avaimeen liittyvän arvon localStoragesta.
JSON.parse()	Jäsentää JSON-merkkijonon ja muuntaa sen takaisin JavaScript-objektiksi, mikä mahdollistaa monimutkaisten tietorakenteiden hakemisen.
sessionStorage.setItem()	Tallentaa avain-arvo-parin sessionStorage-objektiin, jolloin tiedot säilyvät sivuistunnon ajan.
sessionStorage.getItem()	Hakee annettuun avaimeen liittyvän arvon sessionStoragesta.

Objektien tehokas tallentaminen ja hakeminen verkkotallennustilassa

JavaScriptissä, ja ovat verkkotallennusobjekteja, joiden avulla voit tallentaa avainarvopareja selaimeen. Nämä tallennusratkaisut tukevat kuitenkin vain merkkijonoja, mikä tarkoittaa, että JavaScript-objektin suora tallennus johtaa objektin muuntamiseen merkkijonoesitykseen, kuten . Objektien tehokas tallentaminen edellyttää, että ne muunnetaan JSON-merkkijonoksi käyttämällä JSON.stringify(). Tämä menetelmä ottaa JavaScript-objektin ja palauttaa JSON-merkkijonon, joka voidaan tallentaa tai .

Tallennetun objektin palauttamiseksi sinun on muunnettava JSON-merkkijono takaisin JavaScript-objektiksi käyttämällä . Tämä menetelmä ottaa JSON-merkkijonon ja palauttaa vastaavan JavaScript-objektin. Yllä olevissa esimerkeissä olevat komentosarjat osoittavat tämän prosessin. Ensin objekti luodaan ja muunnetaan JSON-merkkijonoksi ennen varastointia käyttämällä localStorage.setItem(). Objektin hakemiseksi JSON-merkkijono noudetaan käyttämällä ja jäsennetään sitten takaisin JavaScript-objektiksi käyttämällä .

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

Kehittyneet tekniikat verkkotallennusta varten

Kun käytät HTML5:tä ja , kehittäjien on usein tallennettava monimutkaisempaa tietoa kuin vain merkkijonoja. Vaikka JSON-serialisointi ja deserialisointi ovat tehokkaita perusobjekteille, edistyneemmät skenaariot saattavat edellyttää lisähuomiota. Jos esimerkiksi työskentelet syvälle sisäkkäisten tai menetelmiä sisältävien objektien kanssa, tarvitset kehittyneemmän lähestymistavan. Yksi yleinen tekniikka on käyttää kirjastoa, kuten tai circular-json käsittelemään pyöreitä viittauksia ja monimutkaisempia objektirakenteita.

Nämä kirjastot laajentavat standardia ja menetelmiä, jotka tukevat objektien serialisointia ja deserialisointia ympyräviittauksilla, mikä mahdollistaa tehokkaamman ratkaisun objektien tallentamiseen verkkomuistiin. Toinen näkökohta on tietojen pakkaus. Suurille objekteille voit käyttää kirjastoja, kuten pakata tiedot ennen niiden tallentamista localStorage tai , mikä vähentää käytetyn tilan määrää. Tämä voi olla erityisen hyödyllistä sovelluksille, joiden on tallennettava huomattava määrä asiakaspuolen tietoja.

1. Voinko tallentaa toimintoja tai ?
2. Ei, toimintoja ei voi tallentaa suoraan verkkomuistiin. Voit tallentaa funktiokoodin merkkijonona ja käyttää luodaksesi sen uudelleen, mutta tätä ei yleensä suositella turvallisuusriskien vuoksi.
3. Kuinka käsittelen ympyräviittauksia objekteissa?
4. Käytä kirjastoja, kuten tai jotka on suunniteltu käsittelemään pyöreitä viittauksia JavaScript-objekteissa.
5. Mikä on tallennusraja ?
6. Tallennusraja kohteelle on tyypillisesti noin 5 Mt, mutta se voi vaihdella eri selaimissa.
7. Voinko pakata tiedot ennen niiden tallentamista?
8. Kyllä, voit käyttää kirjastoja, kuten pakata tietosi ennen niiden tallentamista tai .
9. Kuinka tallennan objektijoukon?
10. Muunna taulukko JSON-merkkijonoksi käyttämällä ennen sen säilyttämistä tai .
11. Onko arkaluonteisten tietojen tallentaminen turvallista ?
12. Ei, arkaluonteisten tietojen tallentaminen ei ole turvallista koska se on käytettävissä JavaScriptin kautta ja se voi vaarantua, jos sivustoon hyökätään.
13. Voinko käyttää eri aloilla?
14. Ei, on rajoitettu samaan alkuperään, mikä tarkoittaa, että sitä ei voi käyttää eri verkkotunnuksissa.
15. Mitä tapahtuu, jos käyttäjä tyhjentää selaimen tiedot?
16. Kaikki tiedot tallennettu ja poistetaan, jos käyttäjä tyhjentää selaimen tiedot.

Objektien tehokas tallentaminen ja hakeminen HTML5-verkkotallennustilassa edellyttää objektien muuntamista JSON-merkkijonoiksi ja jäsentää ne sitten takaisin komennolla . Tämä menetelmä varmistaa, että tiedot pysyvät ehjinä ja käyttökelpoisina eri selainistunnoissa. Ymmärtämällä ja hyödyntämällä näitä tekniikoita kehittäjät voivat hyödyntää localStoragea ja sessionStoragea monimutkaisempiin tiedonhallintatehtäviin, mikä parantaa verkkosovellustensa toimivuutta ja suorituskykyä.