들어가며
개발에 뛰어들기 전부터 자주 봐왔던 [오늘 하루 열지 않기] 혹은 [다시 보지 않기] 버튼
최근에 레이어 팝업 작업을 하면서 [오늘 하루 열지 않기] 기능을 쿠키를 사용해 작업하게 되었습니다.
그런데, 이런 질문을 받았어요. ‘다시 보지 않기 기능을 구현해야 해도 쿠키를 사용할 것인가?’
확실한 대답을 할 수가 없었습니다! 왜냐..! 기능을 구현하면서도 그저 결과물에만 집중했을 뿐,
왜 이렇게 하는지에 대한 이해가 부족했던 것이었어요.
UX 관점에서 보았을 때도, 웹 저장소를 활용해 구현할 수 있는 기능은 사용자에게 좋은 경험을 제공해 주기도 하니까 더더욱이 깊은 이해가 필요했습니다.
그래서! 오늘은 개발자라면 당연히 알아야 할 웹 저장소들에 대해서 포스팅해 보려 합니다.
개념 익히기
오늘 알아볼 웹 저장소는 쿠키, 그리고 웹 스토리지(로컬, 세션) 입니다.
차례대로 특징 및 장단점을 먼저 알아볼까요?
(1)쿠키
- 가장 기본이라고 할 수 있는 오래된 웹 저장소
- 대부분의 브라우저가 지원
- 서버 요청을 할 때마다 자동으로 서버에 전송
- 서버와 로컬의 정보를 저장
- 유효기간을 지정할 수 있다
- 용량이 4kb로 제한적
- 임의로 고치는 것이 가능해서 보안에 취약
- 보안에 취약하기 때문에 지워져도 큰 문제가 없을 수준의 정보를 저장하는데 사용하는 것을 권장
(2)웹스토리지
- 쿠키의 단점을 보완하기 위해 html5에서 탄생
- 로컬 스토리지, 세션 스토리지가 있다
- html5를 지원하지 않는 브라우저의 경우 사용이 불가
- key, value 형태로 이루어짐
- 클라이언트에 대한 정보 및 데이터를 서버에 불필요하게 저장하지 않으며, 로컬에만 정보를 저장
- 약 5mb로 용량이 크다
- 매번 서버에 전송되지 않으므로 부담이 적다(명시적 전송 가능)
- 필요한 경우에만 꺼내 쓰므로 자동 전송의 위험성이 없다
(2)웹스토리지 - 로컬 스토리지
- 비교적 단순하고 사용하기 쉽다
- 저장할 수 있는 용량이 제한적이다
- 간단한 텍스트 데이터만 가능
- 만료 기한 없이 저장(사용자가 지우지 않는 이상 계속 브라우저에 남아 있다)
- ex) 자동 로그인
- 지속적으로 필요한 정보를 저장하기 좋다
- 도메인별로 생성되며, 다른 도메인의 로컬 스토리지에는 접근이 불가하다
- 서로 다른 브라우저 탭이라도 동일한 도메인이라면 동일한 로컬 스토리지를 사용한다
(2)웹스토리지 - 세션 스토리지
- 종료나 새 탭을 열 경우 데이터가 삭제됨
- 같은 탭 안에서는 저장됨
- ex) 자동 입력, 장바구니
- 쿠키를 기반으로 하고 있지만, 사용자 정보 파일을 브라우저에 저장하는 쿠키와 달리 세션은 서버 측에서 관리
- 사용자에 대한 정보를 서버에 두기 때문에 비교적 보안에 좋지만, 사용자가 많아질수록 서버 메모리를 많이 차지하게 됨
- 동일한 탭/윈도우라도 다른 도메인이라면 다른 세션 스토리지가 생성됨
- 서로 다른 세션 스토리지는 서로 영향을 주지 않으며, 독립적으로 동작한다
- 잠시 동안 필요한 정보를 저장하기에 좋다
쿠키 vs 웹 스토리지
| 쿠키 | 웹스토리지 |
|---|---|
| 용량 4kb | 용량 5mb |
| 대부분의 브라우저 지원 | html5를 지원하지 않는 브라우저의 경우 사용 불가 |
| 매 서버 요청마다 서버로 쿠키가 같이 전송 | 서버에 전송되지 않으므로 부담이 적음 |
| 서버와 로컬의 정보를 저장 | 로컬에만 정보를 저장 |
로컬 스토리지 vs 세션 스토리지
| 로컬 | 세션 |
|---|---|
| 만료 기한 없이 저장 | 종료, 새 탭을 열 경우 데이터가 삭제 |
| 지속적으로 필요한 정보를 저장하기에 좋다. | 잠시 동안 필요한 정보를 저장하기에 좋다. |
값을 가져오는 방법
A === Key
| 쿠키 | 로컬 | 세션 |
|---|---|---|
| getCookie(“A”) | localStorage.A localStorage.getItem(“A”) |
sessionStorage.A sessionStorage.getItem(“A”) |
세팅하는 방법
A === Key, B === Value, C === 유효기간
| 쿠키 | 로컬 | 세션 |
|---|---|---|
| setCookie(“A”, B, C) | localStorage.A = B localStorage.setItem(“A”, B) |
sessionStorage.A = B sessionStorage.setItem(“A”, B) |
마치며
자동 로그인, 장바구니, 오늘 하루 열지 않기 등 다양한 기능들이 그저 ‘쿠키’만 활용하면 된다고 생각했는데, 웹 저장소는 다양하고 또 그만큼 용도에 맞게 잘 활용하는 게 중요하다는 것을 알았습니다. 부족한 글이지만 이 글을 읽는 여러분도 웹 저장소와 조금 더 가까워졌길 바랍니다.