localStorage와 sessionStorage 그리고 Cookie까지..🍪

평소 온라인 쇼핑몰에서 쇼핑을 할때 장바구니에 아이템을 담아놓으면 새로고침을 해도 아이템이 저장되어있는 모습을 볼 수 있다.
혹은 로그인이 되어있는 상태에서는 페이지간 이동이나 새로고침을 하더라도 로그인이 유지되는데 이처럼 정보를 저장하기 위해서 필요한 가장 쉬운 방법으로 브라우저 자체에 저장하는 방법이 있다.

보통 서버를 거쳐 데이터베이스에 정보들을 저장하고, 가져와 쓰지만 굳이 데이터베이스에 저장하지 않아도 되는 정보나, 브라우저단에서 관리하는것이 더 효율적일 때 Web Storage를 사용한다.

Web Storage란 데이터를 서버가 아닌 클라이언트에 저장하는 기능으로, 쿠키와 비슷하지만 쿠키는 4KB까지만 저장가능한 반면 웹 스토리지는 약 5MB의 저장공간을 가질 수 있다.

• 데이터 구조 : key - value
• 데이터는 문자열로만 저장, 반환 가능

아래에서 더 자세히 알아보자!

---

❓localStorage란?

localStorage는 데이터를 브라우저단에 반영구적으로 저장하고, 브라우저를 종료 혹은 새로고침을 하더라도 데이터가 유지되는 특징이 있다.
또한 다른 창이나 브라우저를 통해서도 접근이 가능하다.

값을 반영구적으로 저장할 수 있기 때문에 기본적인 CRUD가 가능해야 할텐데 그럼 localStorage를 사용하여 CRUD를 하는 방법을 알아보자.

1. Create

localStorage.setItem(key, value);

localStorage.setItem('cart', 'clothes');
localStorage.setItem('cart', JSON.stringify(cartItems));

기본적으로 localStorage에는 문자열만 저장이 가능하기 때문에 문자열을 직접 저장하거나 혹은 객체나 배열을 저장할때는 JSON.stringify() 를 통해 문자열로 저장해야 한다.

2. Read

localStorage.getItem(key);

localStorage.getItem('cart');

setItem을 통해 값을 저장했다면 이후 필요한 부분에서 값을 가져와 읽을 수도 있어야 한다. 이때 getItem(key)를 통해 값을 읽어올 수 있다.
이때 저장된 value가 객체 혹은 배열이라면 문자열로 저장되어있기 때문에 이를 다시 객체, 배열로 변환해주어야 한다.

JSON.parse(localStorage.getItem('cart'));

이와 같이 JSON.parse()를 통해 변환이 가능하다.

3. Update

값을 수정하는것은 setItem, getItem을 함께 사용해서 수정할 수 있다. 먼저 localStorage.setItem을 통해 값을 저장해놓았는데 수정이 필요하다면 이를 localStorage.getItem으로 가져온 뒤 해당 값을 수정해주고, 다시 localStorage.setItem으로 저장해주면 된다.

4. Delete

localStorage.removeItem(key);

localStorage.removeItem('cart');

마지막으로 저장해둔 값을 삭제하고 싶다면 key값을 가지고 removeItem(key)를 통해 삭제할 수 있다.

localStorage의 사용처

사용자 설정이나 장기적인 데이터의 보존이 필요한 경우에 사용되는데 예를 들어, 온라인 쇼핑몰의 장바구니 데이터는 창을 닫아도 열었을 때 유지가 되므로 이러한 기능을 localStorage를 활용하여 개발할 수 있다.

❓sessionStorage란?

localStorage와 같이 브라우저단에 정보를 저장하는 기능을 가지고 있지만 localStorage는 창을 닫아도 저장이 유지되는 반면 sessionStorage는 탭이나 창을 닫을 때 정보가 삭제된다.

sessionStorage를 사용하여 CRUD를 하는 방법은 localStorage와 100% 일치하기 때문에 넘어가자.

localStorage VS sessionStorage

앞선 설명에서 말했듯 localStorage와 sessionStorage의 가장 큰 차이점은 정보가 유지될 수 있는 조건이다.

localStorage의 특징

1. 사용자 세션 데이터를 유지할 수 있다.
2. 브라우저를 껐다 켜도 데이터가 유지된다.
3. 탭을 여러개 열어도 브라우저 단에서 저장되기 때문에 탭 간의 공유가 가능하다.
4. 명시적으로 removeItem, clear혹은 강제로 삭제하기 전까지는 지속된다.

sessionStorage의 특징

1. 브라우저 세션 기간 동안만 사용할 수 있고 탭이나 창을 닫으면 자동으로 삭제된다.
2. 새로고침을 했을 때는 정보가 유지된다. (localStorage와 마찬가지로)
3. 변경 된 사항은 현재 페이지가 닫힐 때까지 저장된다.

sessionStorage의 사용처

사용자의 로그인 상태와 같이 창이 닫힐 때까지 저장되어 있다가 창이나 탭이 닫히면 함께 로그아웃이 되는 경우 sessionStorage를 활용하여 정보를 저장할 수 있다.

Cookie

쿠키는 클라이언트의 로컬 컴퓨터 내에 저장되는 작은 데이터 조각이다.
이 데이터는 서버로부터 전송되어 웹 브라우저단에 저장이 되고, 이후 해당 웹사이트에 대한 요청을 할 때마다 다시 서버로 전송된다.
-> 웹사이트가 사용자의 활동을 추적하고 상태 정보를 유지하는 데 사용된다.

쿠키의 특징

1. 유지 기간 : 유지 기간에 따라 쿠키는 두가지로 나눌 수 있다.
   1) persistent cookie : 만료 날짜가 정해져있어 사용자가 브라우저를 닫아도 유지되는 쿠키
   2) session cookie : 브라우저 세션이 종료되면 삭제되는 쿠키
2. 용량 제한 : 쿠키는 약 4KB의 용량 제한이 있다.
3. 도메인별 제한 : 쿠키는 도메인 단위로 설정이 되고, 차단된 도메인에서는 쿠키정보를 저장할 수 없다. 허용된 도메인에서는 해당 도메인과 관련된 모든 페이지에서 접근할 수 있다.
4. 보안 : 쿠키는 사용자의 로컬 컴퓨터에 저장되기 때문에 민감한 정보를 저장하기에는 보안상 문제가 있다. 따라서 세션 id와 같은 식별자 값이나 사용자의 프로필 설정과 같은 덜 민감한 정보에 사용된다.

Cookie와 Web Storage의 차이점

1. 용량 : 쿠키는 약 4KB의 용량 제한이 있지만, 웹 스토리지는 약 5MB의 큰 용량을 가질 수 있다.
2. 전송 & 서버 액세스 : 쿠키는 모든 HTTP 요청과 함께 서버로 전송되는 특징 때문에 네트워크 트래픽에 영향을 줄 수 있다. 반면 웹 스토리지는 서버로 자동 전송이 되지 않기 때문에 트래픽에 영향을 주지 않는다.
   또한 쿠키는 자동 전송과 함께 서버에서 쿠키를 읽고 쓸 수 있다. 반면 웹 스토리지는 클라이언트단에서만 접근할 수 있다.
3. 생명주기 : 쿠키는 보통 만료 날짜를 가지고 있기 때문에 해당 날짜가 지나면 자동 삭제된다. 반면 웹 스토리지는 명시적으로 삭제하지 않는 이상 반영구적으로 지속된다.