HTML5 localStorage 및 sessionStorage에 JavaScript 객체 저장

HTML5 localStorage 및 sessionStorage에 JavaScript 객체 저장
HTML5 localStorage 및 sessionStorage에 JavaScript 객체 저장
Liam Lambert
2024년 7월 11일 목요일 오후 9:15:29

웹 저장소의 개체 작업

HTML5 localStorage 또는 sessionStorage로 작업할 때 개발자는 JavaScript 객체를 저장하려고 할 때 종종 문제에 직면합니다. 원시 데이터 유형 및 배열과 달리 객체는 문자열로 변환되는 것처럼 보이므로 혼란과 예상치 못한 결과가 발생할 수 있습니다.

웹 저장소를 사용하여 객체를 적절하게 저장하고 검색하는 방법을 이해하는 것은 많은 웹 애플리케이션에 매우 중요합니다. 이 가이드에서는 개체가 문자열로 변환되는 이유를 살펴보고 개체가 올바르게 저장되고 검색되도록 하는 간단한 해결 방법을 제공합니다.

명령 설명
JSON.stringify() JavaScript 개체 또는 값을 JSON 문자열로 변환하여 localStorage 또는 sessionStorage에 저장할 수 있습니다.
localStorage.setItem() localStorage 객체에 키-값 쌍을 저장하여 브라우저 세션 전반에 걸쳐 데이터가 유지되도록 합니다.
localStorage.getItem() localStorage에서 특정 키와 연결된 값을 검색합니다.
JSON.parse() JSON 문자열을 구문 분석하고 이를 다시 JavaScript 개체로 변환하여 복잡한 데이터 구조를 검색할 수 있습니다.
sessionStorage.setItem() sessionStorage 개체에 키-값 쌍을 저장하여 페이지 세션 기간 동안 데이터가 유지되도록 합니다.
sessionStorage.getItem() sessionStorage에서 특정 키와 연결된 값을 검색합니다.

웹 스토리지에 객체를 효과적으로 저장하고 검색하기

자바스크립트에서는 localStorage 그리고 sessionStorage 브라우저에 키-값 쌍을 저장할 수 있는 웹 저장소 개체입니다. 그러나 이러한 저장소 솔루션은 문자열만 지원합니다. 즉, JavaScript 개체를 직접 저장하려고 하면 개체가 다음과 같은 문자열 표현으로 변환됩니다. [object Object]. 객체를 효과적으로 저장하려면 다음을 사용하여 객체를 JSON 문자열로 변환해야 합니다. 삼. 이 메소드는 JavaScript 객체를 취하고 JSON 문자열을 반환합니다. localStorage 또는 sessionStorage.

저장된 개체를 검색하려면 다음을 사용하여 JSON 문자열을 다시 JavaScript 개체로 변환해야 합니다. JSON.parse(). 이 메서드는 JSON 문자열을 사용하고 해당 JavaScript 개체를 반환합니다. 위의 예에 제공된 스크립트는 이 프로세스를 보여줍니다. 먼저 객체가 생성되고 다음을 사용하여 JSON 문자열로 변환됩니다. 삼 저장되기 전에 localStorage 사용하여 localStorage.setItem(). 객체를 검색하기 위해 JSON 문자열을 다음에서 가져옵니다. localStorage 사용하여 localStorage.getItem() 그런 다음 다음을 사용하여 JavaScript 객체로 다시 구문 분석합니다. JSON.parse().

localStorage에 JavaScript 객체 저장 및 검색

localStorage에 JavaScript 및 JSON 사용

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

sessionStorage에 JavaScript 객체 저장 및 검색

sessionStorage에 JavaScript 및 JSON 사용

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

웹 스토리지를 위한 고급 기술

HTML5를 사용하는 경우 localStorage 그리고 sessionStorage, 개발자는 종종 문자열보다 더 복잡한 데이터를 저장해야 합니다. JSON 직렬화 및 역직렬화는 기본 개체에 효과적이지만 고급 시나리오에는 추가 고려 사항이 필요할 수 있습니다. 예를 들어 깊게 중첩된 개체나 메서드가 포함된 개체로 작업하는 경우 더 정교한 접근 방식이 필요합니다. 일반적인 기술 중 하나는 다음과 같은 라이브러리를 사용하는 것입니다. Flatted 또는 circular-json 순환 참조와 더 복잡한 객체 구조를 처리합니다.

이 라이브러리는 표준을 확장합니다. 삼 그리고 JSON.parse() 순환 참조를 사용하여 개체의 직렬화 및 역직렬화를 지원하는 방법을 사용하여 웹 저장소에 개체를 저장하기 위한 보다 강력한 솔루션을 가능하게 합니다. 또 다른 고려 사항은 데이터 압축입니다. 큰 객체의 경우 다음과 같은 라이브러리를 사용할 수 있습니다. LZ-String 데이터를 저장하기 전에 압축하려면 localStorage 또는 sessionStorage, 사용되는 공간의 양을 줄입니다. 이는 상당한 양의 클라이언트측 데이터를 저장해야 하는 애플리케이션에 특히 유용할 수 있습니다.

웹 저장소에 객체를 저장하는 것에 대한 일반적인 질문

  1. 함수를 저장할 수 있나요? localStorage 또는 sessionStorage?
  2. 아니요, 기능은 웹 저장소에 직접 저장할 수 없습니다. 함수 코드를 문자열로 저장하고 사용할 수 있습니다. eval() 하지만 보안 위험으로 인해 일반적으로 권장되지 않습니다.
  3. 객체의 순환 참조를 어떻게 처리합니까?
  4. 다음과 같은 라이브러리를 사용하십시오. Flatted 또는 circular-json 이는 JavaScript 객체의 순환 참조를 처리하도록 설계되었습니다.
  5. 저장 한도는 얼마입니까? localStorage?
  6. 저장용량 한도 localStorage 일반적으로 약 5MB이지만 브라우저마다 다를 수 있습니다.
  7. 데이터를 저장하기 전에 압축할 수 있나요?
  8. 예, 다음과 같은 라이브러리를 사용할 수 있습니다. LZ-String 데이터를 저장하기 전에 압축하려면 localStorage 또는 sessionStorage.
  9. 객체 배열을 어떻게 저장합니까?
  10. 다음을 사용하여 배열을 JSON 문자열로 변환합니다. 삼 보관하기 전에 localStorage 또는 sessionStorage.
  11. 민감한 데이터를 저장하는 것이 안전한가요? localStorage?
  12. 아니요, 민감한 데이터를 저장하는 것은 안전하지 않습니다. localStorage JavaScript를 통해 액세스할 수 있고 사이트가 공격을 받으면 손상될 수 있기 때문입니다.
  13. 사용해도 되나요 localStorage 다른 도메인에 걸쳐?
  14. 아니요, localStorage 동일한 출처로 제한됩니다. 즉, 다른 도메인에서 액세스할 수 없습니다.
  15. 사용자가 브라우저 데이터를 삭제하면 어떻게 되나요?
  16. 모든 데이터는 다음 위치에 저장됩니다. localStorage 그리고 sessionStorage 사용자가 브라우저 데이터를 삭제하면 삭제됩니다.

개체 스토리지 관리에 대한 최종 생각

HTML5 웹 저장소에 개체를 효과적으로 저장하고 검색하려면 다음을 사용하여 개체를 JSON 문자열로 변환해야 합니다. 삼 그런 다음 다시 구문 분석합니다. JSON.parse(). 이 방법을 사용하면 데이터가 그대로 유지되어 다양한 브라우저 세션에서 사용할 수 있습니다. 이러한 기술을 이해하고 활용함으로써 개발자는 보다 복잡한 데이터 관리 작업에 localStorage 및 sessionStorage를 활용하여 웹 애플리케이션의 기능과 성능을 향상시킬 수 있습니다.