JavaScript-objektien tallentaminen HTML5 localStorageen ja sessionStorageen

JavaScript-objektien tallentaminen HTML5 localStorageen ja sessionStorageen
JavaScript-objektien tallentaminen HTML5 localStorageen ja sessionStorageen
Liam Lambert
Torstai 11. heinäkuuta 2024 klo 20.51.26

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ä, localStorage ja sessionStorage 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 [object Object]. 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 localStorage tai sessionStorage.

Tallennetun objektin palauttamiseksi sinun on muunnettava JSON-merkkijono takaisin JavaScript-objektiksi käyttämällä JSON.parse(). 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 JSON.stringify() ennen varastointia localStorage käyttämällä localStorage.setItem(). Objektin hakemiseksi JSON-merkkijono noudetaan localStorage käyttämällä localStorage.getItem() ja jäsennetään sitten takaisin JavaScript-objektiksi käyttämällä JSON.parse().

JavaScript-objektien tallentaminen ja hakeminen localStoragessa

JavaScriptin ja JSONin käyttäminen localStoragessa

// 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-objektien tallentaminen ja hakeminen sessionStoragessa

JavaScriptin ja JSONin käyttö sessionStoragessa

// 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ä localStorage ja sessionStorage, 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 Flatted tai circular-json käsittelemään pyöreitä viittauksia ja monimutkaisempia objektirakenteita.

Nämä kirjastot laajentavat standardia JSON.stringify() ja JSON.parse() 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 LZ-String pakata tiedot ennen niiden tallentamista localStorage tai sessionStorage, mikä vähentää käytetyn tilan määrää. Tämä voi olla erityisen hyödyllistä sovelluksille, joiden on tallennettava huomattava määrä asiakaspuolen tietoja.

Yleisiä kysymyksiä objektien tallentamisesta verkkotallennustilaan

  1. Voinko tallentaa toimintoja localStorage tai sessionStorage?
  2. Ei, toimintoja ei voi tallentaa suoraan verkkomuistiin. Voit tallentaa funktiokoodin merkkijonona ja käyttää eval() luodaksesi sen uudelleen, mutta tätä ei yleensä suositella turvallisuusriskien vuoksi.
  3. Kuinka käsittelen ympyräviittauksia objekteissa?
  4. Käytä kirjastoja, kuten Flatted tai circular-json jotka on suunniteltu käsittelemään pyöreitä viittauksia JavaScript-objekteissa.
  5. Mikä on tallennusraja localStorage?
  6. Tallennusraja kohteelle localStorage 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 LZ-String pakata tietosi ennen niiden tallentamista localStorage tai sessionStorage.
  9. Kuinka tallennan objektijoukon?
  10. Muunna taulukko JSON-merkkijonoksi käyttämällä JSON.stringify() ennen sen säilyttämistä localStorage tai sessionStorage.
  11. Onko arkaluonteisten tietojen tallentaminen turvallista localStorage?
  12. Ei, arkaluonteisten tietojen tallentaminen ei ole turvallista localStorage koska se on käytettävissä JavaScriptin kautta ja se voi vaarantua, jos sivustoon hyökätään.
  13. Voinko käyttää localStorage eri aloilla?
  14. Ei, localStorage 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 localStorage ja sessionStorage poistetaan, jos käyttäjä tyhjentää selaimen tiedot.

Viimeisiä ajatuksia objektien tallennuksen hallinnasta

Objektien tehokas tallentaminen ja hakeminen HTML5-verkkotallennustilassa edellyttää objektien muuntamista JSON-merkkijonoiksi JSON.stringify() ja jäsentää ne sitten takaisin komennolla JSON.parse(). 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ä.