Przechowywanie obiektów JavaScript w HTML5 localStorage i sessionStorage

Przechowywanie i pobieranie obiektów JavaScript w localStorage

Używanie JavaScript i JSON dla localStorage

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

Przechowywanie i pobieranie obiektów JavaScript w sessionStorage

Używanie JavaScript i JSON dla sessionStorage

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

Często zadawane pytania dotyczące przechowywania obiektów w magazynie internetowym

1. Czy mogę przechowywać funkcje w localStorage Lub sessionStorage?
2. Nie, funkcji nie można przechowywać bezpośrednio w pamięci internetowej. Możesz zapisać kod funkcji jako ciąg i użyć eval() 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 Flatted Lub circular-json które są przeznaczone do obsługi odwołań cyklicznych w obiektach JavaScript.
5. Do czego służy limit przechowywania localStorage?
6. Limit przechowywania dla localStorage 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 LZ-String do kompresji danych przed ich zapisaniem localStorage Lub sessionStorage.
9. Jak przechowywać tablicę obiektów?
10. Konwertuj tablicę na ciąg JSON za pomocą JSON.stringify() przed przechowywaniem go localStorage Lub sessionStorage.
11. Czy przechowywanie wrażliwych danych jest bezpieczne? localStorage?
12. Nie, przechowywanie wrażliwych danych nie jest bezpieczne localStorage ponieważ jest dostępny poprzez JavaScript i może zostać naruszony w przypadku ataku na witrynę.
13. Mogę uzyć localStorage w różnych domenach?
14. NIE, localStorage 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 localStorage I sessionStorage zostaną usunięte, jeśli użytkownik wyczyści dane swojej przeglądarki.

Końcowe przemyślenia na temat zarządzania magazynowaniem obiektów

Efektywne przechowywanie i pobieranie obiektów w pamięci internetowej HTML5 wymaga konwersji obiektów na ciągi JSON JSON.stringify() a następnie ponownie je analizując JSON.parse(). 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.