HTML5 localStorage/sessionStorage에 객체를 저장하는 방법

testObject의 타입: 객체
testObject의 속성:
  one: 1
  two: 2
  three: 3
retrievedObject의 타입: 문자열
retrievedObject의 값: [object Object]

제가 보기에는 setItem 메소드가 저장 전에 입력 값을 문자열로 변환하는 것 같습니다.

저는 Safari, Chrome, 그리고 Firefox에서 이 동작을 보이는 것을 보았기 때문에, 이것은 브라우저별 버그나 제한이 아니라고 가정합니다. 대신, 제가 HTML5 웹 스토리지 명세를 잘못 이해한 것으로 생각합니다.

저는 2 공통 인프라에 설명된 structured clone 알고리즘을 이해하려고 노력했지만, 완전히 이해하고 있는 것은 아닙니다. 하지만, 아마도 제 문제는 객체의 속성이 열거 가능하지 않기 때문에 생긴 것이 아닐까요 (???)

간단한 해결 방법이 있을까요?

업데이트: W3C는 결국 구조화된 복제 사양에 대해 의견을 변경하고, 사양을 구현과 일치하도록 변경하기로 결정했습니다. 12111 - Storage 객체 getItem(key) 메소드의 사양이 구현 동작과 일치하지 않음을 참조하십시오. 따라서 이 질문은 더 이상 100% 유효하지 않지만, 답변은 여전히 흥미로울 수 있습니다.

답변 1

Apple, Mozilla 및 Mozilla 다음의 문서를 살펴보면, 이 기능은 문자열 키/값 쌍만 처리하는 것으로 보입니다.

저장하기 전에 개체를 문자열로 stringify 한 다음, 검색할 때 구문 분석할 수 있습니다.

var testObject = { 'one': 1, 'two': 2, 'three': 3 };
// 객체를 저장소에 넣기
localStorage.setItem('testObject', JSON.stringify(testObject));
// 저장소에서 객체 가져오기
var retrievedObject = localStorage.getItem('testObject');
console.log('retrievedObject: ', JSON.parse(retrievedObject));

답변 2

HTML5은 웹페이지에서 데이터를 저장하는데 사용되는 매우 유용한 기능으로, 웹 애플리케이션은 사용자의 로컬 환경에 데이터를 저장하고 복원할 수 있습니다. localStorage와 sessionStorage는 이러한 저장소 유형 중 가장 인기있는 것입니다. 이번 글에서는 이러한 기능에 대해 알아보고, 객체를 저장하는 방법에 초점을 맞추어 설명하겠습니다.
1. localStorage vs. sessionStorage
localStorage와 sessionStorage는 HTML5에서 제공하는 두 가지 다른 저장소 유형입니다. 이들은 브라우저의 웹 스토리지 기능을 이용하여 데이터를 저장하고 유지할 수 있게 해주는데, 각각 조금씩 다른 목적과 특징을 갖고 있습니다.
- localStorage: localStorage는 웹 애플리케이션이 사용자의 로컬 환경에 데이터를 영구적으로 저장할 수 있도록 해줍니다. 데이터는 사용자가 직접 제거하지 않는 한 영구적으로 보존됩니다. 이는 브라우저가 종료되어도 데이터를 유지하는 것을 의미합니다.
- sessionStorage: sessionStorage는 사용자가 현재 세션 동안 유지하고 싶은 데이터를 저장하는데 사용됩니다. 세션이 끝나면(브라우저가 종료되거나 탭이 닫히면) 데이터는 자동으로 삭제됩니다. 다른 탭이나 창에서 sessionStorage에 접근할 수 없습니다.
2. 객체 저장하기
이제 localStorage와 sessionStorage에 객체를 저장하는 방법에 대해 알아보겠습니다.
- JSON.stringify: 객체를 문자열로 변환하는 가장 일반적인 방법은 JSON.stringify 메소드를 사용하는 것입니다. 이 메소드를 사용하여 객체를 문자열로 변환한 후, localStorage 또는 sessionStorage에 저장할 수 있습니다.
예를 들어, 다음과 같은 JavaScript 객체를 생각해봅시다:
```
var person = {
name: 홍길동,
age: 30,
email: honggildong@example.com
};
```
이 객체를 localStorage에 저장하는 예제 코드는 다음과 같습니다:
```
localStorage.setItem(person, JSON.stringify(person));
```
- JSON.parse: 저장한 객체를 다시 원래의 객체로 복원하려면, JSON.parse 메소드를 사용합니다. 이전에 저장한 객체를 불러오고, 다음과 같이 객체로 변환할 수 있습니다:
```
var storedPerson = JSON.parse(localStorage.getItem(person));
```
이제 storedPerson 변수에는 이전에 저장한 객체가 복원되어 들어있을 것입니다.
3. 요약
HTML5의 localStorage와 sessionStorage는 웹 애플리케이션에서 데이터를 저장하고 유지할 수 있는 훌륭한 도구입니다. 객체를 저장하기 위해서는 JSON.stringify를 사용하여 객체를 문자열로 변환한 후 저장하고, JSON.parse를 사용하여 다시 원래의 객체로 복원합니다. 이러한 방법을 사용하면 웹 애플리케이션에서 데이터를 손쉽게 저장하고 유지할 수 있습니다.
이렇게, HTML5의 localStorage와 sessionStorage를 활용하여 웹 애플리케이션에서 객체를 저장하는 방법에 대해 알아보았습니다. 이러한 저장소 기능을 올바르게 활용하면 사용자의 데이터를 안전하게 보호하고 유지할 수 있으며, 보다 효과적인 웹 애플리케이션을 만들 수 있습니다.