Чување ЈаваСцрипт објеката у ХТМЛ5 лоцалСтораге и сессионСтораге

Рад са објектима у веб складишту

Када раде са ХТМЛ5 лоцалСтораге или сессионСтораге, програмери често наилазе на проблеме када покушавају да сачувају ЈаваСцрипт објекте. За разлику од примитивних типова података и низова, чини се да су објекти конвертовани у низове, што може довести до забуне и неочекиваних резултата.

Разумевање како правилно складиштити и преузимати објекте помоћу Веб Стораге-а је кључно за многе веб апликације. Овај водич ће истражити зашто се објекти претварају у стрингове и пружити једноставно решење како би се осигурало да се ваши објекти правилно чувају и преузимају.

Цомманд	Опис
JSON.stringify()	Конвертује ЈаваСцрипт објекат или вредност у ЈСОН стринг, омогућавајући складиштење у лоцалСтораге или сессионСтораге.
localStorage.setItem()	Чува пар кључ/вредност у објекту лоцалСтораге, омогућавајући подацима да трају у свим сесијама прегледача.
localStorage.getItem()	Преузима вредност придружену датом кључу из лоцалСтораге.
JSON.parse()	Рашчлањује ЈСОН стринг и конвертује га назад у ЈаваСцрипт објекат, омогућавајући преузимање сложених структура података.
sessionStorage.setItem()	Чува пар кључ/вредност у објекту сессионСтораге, омогућавајући подацима да трају током сесије странице.
sessionStorage.getItem()	Преузима вредност придружену датом кључу из сессионСтораге-а.

Ефективно складиштење и преузимање објеката у веб складишту

У ЈаваСцрипт-у, и су објекти веб складишта који вам омогућавају да сачувате парове кључ/вредност у прегледачу. Међутим, ова решења за складиштење подржавају само стрингове, што значи да ће покушај директног складиштења ЈаваСцрипт објекта довести до тога да објекат буде конвертован у стринг репрезентацију као што је . Да бисте ефикасно складиштили објекте, потребно је да их конвертујете у ЈСОН стринг користећи JSON.stringify(). Овај метод узима ЈаваСцрипт објекат и враћа ЈСОН стринг у који се може ускладиштити или .

Да бисте преузели сачувани објекат, морате да конвертујете ЈСОН стринг назад у ЈаваСцрипт објекат користећи . Овај метод узима ЈСОН стринг и враћа одговарајући ЈаваСцрипт објекат. Скрипте дате у горњим примерима демонстрирају овај процес. Прво се креира објекат и конвертује у ЈСОН стринг са пре складиштења у Користећи localStorage.setItem(). Да бисте преузели објекат, из њега се преузима ЈСОН стринг Користећи а затим поново анализиран у ЈаваСцрипт објекат користећи .

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

Напредне технике за веб складиште

Када користите ХТМЛ5 и , програмери често морају да складиште сложеније податке од само стрингова. Док су ЈСОН серијализација и десеријализација ефикасне за основне објекте, напреднији сценарији могу захтевати додатна разматрања. На пример, ако радите са дубоко угнежђеним објектима или објектима који садрже методе, потребан вам је софистициранији приступ. Једна уобичајена техника је коришћење библиотеке као што је или circular-json за руковање кружним референцама и сложенијим структурама објеката.

Ове библиотеке проширују стандард и методе које подржавају серијализацију и десеријализацију објеката са кружним референцама, омогућавајући робусније решење за складиштење објеката у веб складишту. Друго питање је компресија података. За велике објекте можете користити библиотеке попут да компримујете податке пре него што их сачувате localStorage или , смањујући количину коришћеног простора. Ово може бити посебно корисно за апликације које морају да складиште значајну количину података на страни клијента.

1. Могу ли да складиштим функције у или ?
2. Не, функције се не могу чувати директно у веб складишту. Можете сачувати код функције као стринг и користити да га поново направите, али се то генерално не препоручује због безбедносних ризика.
3. Како да рукујем кружним референцама у објектима?
4. Користите библиотеке попут или који су дизајнирани да рукују кружним референцама у ЈаваСцрипт објектима.
5. За шта је ограничење складиштења ?
6. Ограничење складиштења за је обично око 5МБ, али може да варира између претраживача.
7. Могу ли да компримујем податке пре него што их сачувам?
8. Да, можете користити библиотеке попут да компримујете своје податке пре него што их сачувате или .
9. Како да сачувам низ објеката?
10. Конвертујте низ у ЈСОН стринг користећи пре него што га ускладиштите или .
11. Да ли је безбедно чувати осетљиве податке ?
12. Не, није безбедно чувати осетљиве податке пошто је доступан преко ЈаваСцрипт-а и може бити компромитован ако је сајт нападнут.
13. Могу ли да користим на различитим доменима?
14. Не, је ограничен на исто порекло, што значи да му се не може приступити на различитим доменима.
15. Шта се дешава ако корисник избрише податке свог претраживача?
16. Сви подаци похрањени у и ће бити уклоњено ако корисник избрише податке свог претраживача.

Ефикасно складиштење и преузимање објеката у ХТМЛ5 веб складишту захтева претварање објеката у ЈСОН низове помоћу а затим их рашчланити са . Овај метод осигурава да подаци остану нетакнути и употребљиви у различитим сесијама прегледача. Разумевањем и коришћењем ових техника, програмери могу да искористе лоцалСтораге и сессионСтораге за сложеније задатке управљања подацима, побољшавајући функционалност и перформансе својих веб апликација.