JavaScript 객체를 쿠키에 저장하는 방법 완벽 가이드

JavaScript 객체를 쿠키에 저장하는 방법

쿠키는 기본적으로 문자열 형태로만 데이터를 저장할 수 있기 때문에, JavaScript 객체를 그대로 저장할 수는 없습니다. 이 문제를 해결하려면 JSON.stringify() 메서드를 사용해야 합니다.

JSON.stringify()는 JavaScript 객체나 값을 JSON 문자열로 변환해 주는 함수입니다. 변환된 문자열은 쿠키에 안전하게 저장할 수 있으며, 나중에 필요할 때 JSON.parse()를 사용하여 다시 객체 형태로 복원할 수 있습니다.

예제 코드

다음 코드 예제를 통해 JavaScript 객체를 쿠키에 저장하는 방법을 확인해 보세요.

(function(){
    var myObject = JSON.parse('{"id":1,"gender":"male"}');
    var e = 'Thu Nov 26 2017 15:44:38'; 
    document.cookie = 'myObj=' + JSON.stringify(myObject) + ';expires=' + e;
})()

코드 설명

위 코드의 동작 과정을 단계별로 살펴보면 다음과 같습니다.

1. 객체 생성: JSON.parse()를 사용하여 JSON 문자열을 JavaScript 객체로 변환합니다. 여기서는 id와 gender 속성을 가진 객체가 생성됩니다.

2. 만료일 설정: 쿠키가 삭제되는 시점을 지정하기 위해 만료 날짜를 변수 e에 저장합니다.

3. 쿠키 저장: document.cookie에 JSON.stringify()로 직렬화한 객체와 만료일을 함께 할당하여 쿠키를 저장합니다.

주의 사항

쿠키에는 용량 제한(약 4KB)이 있으므로, 크기가 큰 객체를 저장할 때는 주의해야 합니다. 또한 특수문자가 포함된 데이터는 encodeURIComponent()로 인코딩한 후 저장하는 것이 안전합니다. 더 많은 데이터를 저장해야 한다면 localStorage나 sessionStorage 같은 웹 스토리지 API를 사용하는 것도 좋은 대안입니다.