Przechowywanie obiektów JavaScript w HTML5 localStorage i sessionStorage

Praca z obiektami w magazynie internetowym

Pracując z HTML5 localStorage lub sessionStorage, programiści często napotykają problemy podczas próby przechowywania obiektów JavaScript. W przeciwieństwie do prymitywnych typów danych i tablic, obiekty wydają się być konwertowane na ciągi znaków, co może prowadzić do zamieszania i nieoczekiwanych wyników.

Zrozumienie, jak prawidłowo przechowywać i pobierać obiekty za pomocą Web Storage, ma kluczowe znaczenie dla wielu aplikacji internetowych. W tym przewodniku dowiesz się, dlaczego obiekty są konwertowane na ciągi znaków, i przedstawisz proste obejście, które zapewni prawidłowe przechowywanie i pobieranie obiektów.

Komenda	Opis
JSON.stringify()	Konwertuje obiekt lub wartość JavaScript na ciąg JSON, umożliwiając przechowywanie w localStorage lub sessionStorage.
localStorage.setItem()	Przechowuje parę klucz-wartość w obiekcie localStorage, umożliwiając przechowywanie danych w sesjach przeglądarki.
localStorage.getItem()	Pobiera wartość związaną z danym kluczem z localStorage.
JSON.parse()	Analizuje ciąg JSON i konwertuje go z powrotem na obiekt JavaScript, umożliwiając pobieranie złożonych struktur danych.
sessionStorage.setItem()	Przechowuje parę klucz-wartość w obiekcie sessionStorage, umożliwiając przechowywanie danych przez cały czas trwania sesji strony.
sessionStorage.getItem()	Pobiera wartość związaną z danym kluczem z sessionStorage.

Efektywne przechowywanie i odzyskiwanie obiektów w pamięci internetowej

W JavaScript, I to obiekty pamięci internetowej, które umożliwiają zapisywanie par klucz-wartość w przeglądarce. Jednak te rozwiązania do przechowywania obsługują tylko ciągi znaków, co oznacza, że ​​próba bezpośredniego przechowywania obiektu JavaScript spowoduje konwersję obiektu na reprezentację ciągu, np. . Aby efektywnie przechowywać obiekty, musisz przekonwertować je na ciąg JSON za pomocą JSON.stringify(). Ta metoda pobiera obiekt JavaScript i zwraca ciąg JSON, w którym można go zapisać Lub .

Aby odzyskać przechowywany obiekt, należy przekonwertować ciąg JSON z powrotem na obiekt JavaScript za pomocą . Ta metoda pobiera ciąg JSON i zwraca odpowiedni obiekt JavaScript. Skrypty podane w powyższych przykładach demonstrują ten proces. Najpierw tworzony jest obiekt, który jest konwertowany na ciąg JSON za pomocą przed zapisaniem w za pomocą localStorage.setItem(). Aby pobrać obiekt, pobierany jest ciąg JSON za pomocą a następnie ponownie przeanalizowany do obiektu JavaScript za pomocą .

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

Zaawansowane techniki przechowywania danych w sieci Web

Podczas korzystania z HTML5 I programiści często muszą przechowywać bardziej złożone dane niż tylko ciągi znaków. Chociaż serializacja i deserializacja JSON są skuteczne w przypadku podstawowych obiektów, bardziej zaawansowane scenariusze mogą wymagać dodatkowych rozważań. Na przykład, jeśli pracujesz z głęboko zagnieżdżonymi obiektami lub obiektami zawierającymi metody, potrzebujesz bardziej wyrafinowanego podejścia. Jedną z powszechnych technik jest użycie biblioteki takiej jak Lub circular-json do obsługi odwołań cyklicznych i bardziej złożonych struktur obiektów.

Biblioteki te stanowią rozszerzenie standardu I metody wspierające serializację i deserializację obiektów za pomocą odwołań cyklicznych, umożliwiając bardziej niezawodne rozwiązanie do przechowywania obiektów w pamięci internetowej. Kolejną kwestią jest kompresja danych. W przypadku dużych obiektów można używać bibliotek takich jak kompresować dane przed ich zapisaniem localStorage Lub , zmniejszając ilość wykorzystywanej przestrzeni. Może to być szczególnie przydatne w przypadku aplikacji, które muszą przechowywać znaczną ilość danych po stronie klienta.

1. Czy mogę przechowywać funkcje w Lub ?
2. Nie, funkcji nie można przechowywać bezpośrednio w pamięci internetowej. Możesz zapisać kod funkcji jako ciąg i użyć aby go odtworzyć, ale generalnie nie jest to zalecane ze względu na ryzyko bezpieczeństwa.
3. Jak obsługiwać odniesienia cykliczne w obiektach?
4. Użyj bibliotek takich jak Lub które są przeznaczone do obsługi odwołań cyklicznych w obiektach JavaScript.
5. Do czego służy limit przechowywania ?
6. Limit przechowywania dla wynosi zazwyczaj około 5 MB, ale może się różnić w zależności od przeglądarki.
7. Czy mogę skompresować dane przed ich zapisaniem?
8. Tak, możesz używać bibliotek takich jak do kompresji danych przed ich zapisaniem Lub .
9. Jak przechowywać tablicę obiektów?
10. Konwertuj tablicę na ciąg JSON za pomocą przed przechowywaniem go Lub .
11. Czy przechowywanie wrażliwych danych jest bezpieczne? ?
12. Nie, przechowywanie wrażliwych danych nie jest bezpieczne ponieważ jest dostępny poprzez JavaScript i może zostać naruszony w przypadku ataku na witrynę.
13. Mogę uzyć w różnych domenach?
14. NIE, jest ograniczone do tego samego źródła, co oznacza, że ​​nie można uzyskać do niego dostępu w różnych domenach.
15. Co się stanie, jeśli użytkownik wyczyści dane przeglądarki?
16. Wszystkie dane zapisane w I zostaną usunięte, jeśli użytkownik wyczyści dane swojej przeglądarki.

Efektywne przechowywanie i pobieranie obiektów w pamięci internetowej HTML5 wymaga konwersji obiektów na ciągi JSON a następnie ponownie je analizując . Ta metoda gwarantuje, że dane pozostaną nienaruszone i będzie można ich używać w różnych sesjach przeglądarki. Rozumiejąc i wykorzystując te techniki, programiści mogą wykorzystać localStorage i sessionStorage do bardziej złożonych zadań związanych z zarządzaniem danymi, zwiększając funkcjonalność i wydajność swoich aplikacji internetowych.