웹 브라우저에 데이터 저장하기

HTTP 프로토콜

프로토콜이란 컴퓨터끼리 어떤 특정한 형식으로 통신 메시지를 주고 받자고 미리 약속을 정해놓은 것이다.인터넷은 그 중에서 HTTP프로토콜을 이용한다. 인터넷 주소창을 보면 HTTP, HTTPS가 붙는데 이게 바로 프로토콜이다.

쿠키

쿠키는 쉽게 말해서 브라우저의 작은 저장소라고 할 수 있다.
이 저장소에는 이름과 값으로 이루어져 있는 문자열 데이터를 저장할 수 있다.

내가 웹 사이트에 접속하면 웹사이트 서버는 쿠키를 만들어서 브라우저로 보내준다. 브라우저는 받은 쿠키를 내 컴퓨터에 저장하고 그 다음부터는 브라우저가 웹사이트에 접속하거나 리퀘스트를 보낼때마다 이 쿠키를 자동으로 함께 보낸다. 이 덕분에 유저들의 검색 기록, 클릭한 상품, 다녀간 페이지등을 파악할 수 있게 된다.

개발자 도구에서 Application 탭으로 들어가면 Storage아래에 Cookies를 확인할 수 있다. 단순하게 이름(Name)과 값(Value)으로 이루어진 문자열 데이터라고 생각하면 된다.

쿠키의 저장 방법과 특징

서버를 통해 저장하는 방법

먼저 서버를 통해 저장하는 방법이다. 쿠키는 웹사이트 서버에서 만들어서 보내면 브라우저가 알아서 저장한다고 했는데, 이때 서버는 HTTP리스폰스에 Set-Cookie라는 헤더를 설정해서 쿠키를 전달한다.
Set-Cookie : user=username
Set-Cookie 헤더를 전달받은 브라우저는 이 쿠키를 저장하고 나중에 그 웹사이트에 리퀘스트를 보낼때 마다 저장된 쿠키를 Cookie라는 헤더에 넣어서 함께 전송하게 된다.
Cookie : user=username
이때, 모든 웹사이트에 모든 쿠키를 다 전달하는건 아니고, 해당 쿠키를 저장한 사이트에만 그 쿠키를 전달한다. 예를들어, 네이버에서 user라는 쿠키를 유저의 브라우저에 설정했다면, 브라우저는 네이버사이트에 리퀘스트를 보낼때에만 이 user라는 쿠키를 전달하고, 다른 사이트에 접속하거나 리퀘스트를 보낼때는 이 쿠키를 전달하지 않는다.

자바스크립트로 저장하는 방법

이렇게 사이트마다 따로 쿠키를 받아서 저장하는 방법도 있지만 자바스크립트 코드로 클라이언트에서 직접 쿠키를 생성하고 저장할 수도 있는데,
document.cookie라는 코드로 쿠키를 확인하거나 수정, 삭제할 수 있다.

쿠키의 최대 용량

쿠키는 브라우저가 웹사이트에 리퀘스트를 보낼때마다 자동으로 서버에 보내는 메세지에 포함된다고 했다. 이렇게 매번 서버에 전송되다보니, 네트워크에 부담을 주지 않기 위해 쿠키의 용량을 제한했다. 쿠키 하나는 최대 4KB까지 가능하고 브라우저에 따라 다르지만 보통 사이트 하나당 약 20개의 쿠키가 허용된다.

쿠키를 사용할때 주의점

쿠키는 용량에 맞는 문자열 데이터라면 뭐든지 저장할 수 있지만, 한가지 주의할 점이 있다. 서버로 리퀘스트를 보낼때 자동으로 보내는점을 이용해서 다른 사람이 중간에 쿠키를 탈취할 수 있다는 점이다. 이런 위험이 있기 때문에 쿠키에는 민감한 정보나 보안과 관련된 내용들을 저장하지 않도록 주의해야 한다.

자주 쓰는 옵션들

쿠키에는 여러가지 옵션들을 붙일 수가 있다.
옵션들은 세미콜론(;)을 붙여 옵션 이름과 값을 넣어 설정할 수 있다.
예를들어 아래는 user라는 이름의 쿠키에 choco라는 값을 설정하고 그 옆에 있는것들은 이 쿠키에 함께 설정된 옵션이다.
user=choco; max-age=86400; path=/; expires=Fri, 05 Apr 2024 07:50:44 GMT

expires 옵션

expires옵션으로 날짜를 설정하면 설정된 날짜까지 쿠키가 유지된다.
user=choco; expires=Fri, 05 Apr 2024 07:50:44 GMT
expires날짜는 UTC형식으로 적어주면 된다.
참고로 자바스크립트에서는 Date객체를 이용해서 넣을 수 있는데, 다음과 같이 만료가 되는 시점을 Date객체로 만들고, 실제로 쿠키에 넣을때에는 toUTCString()함수를 이용해 문자열로 바꿔준다. 그런 뒤 쿠키에는 다음과 같이 문자열로 바꾼 date값을 expires옵션으로 넣어주면 된다.

let date = new Date();
date.setTime(date.getTime() + 24 * 60 * 60 * 1000); //24시간후
document.cookie = `popup=seen; ${date.toUTCString()}`

max-age 옵션

max-age옵션을 설정하면 현재로부터 옵션에 설정된 값을 더한 시점까지 쿠키가 유지된다. 값1은 1초를 의미한다.
expires의 코드 복잡성보다, max-age가 훨씬 간결하다.
user=name; max-age=3600
만약 expires와 max-age가 둘 다 설정되어 있으면, max-age가 우선순위를 가지게 된다.

domain 옵션

쿠키는 기본적으로 도메인, 즉 인터넷 주소가 다른 사이트에서는 접근할 수 없다. example.com에서 설정한 쿠키는 google.com에 접근할 수 없다는 뜻이다. 뿐만 아니라 기본적으로는 example.com의 서브도메인인 learn.example.com에서도 example.com에서 설정한 쿠키에 접근할수가 없게 되어있다. 그러나 Domain옵션을 통해 서브 도메인에서도 쿠키에 접근할 수 있도록 설정할 수 있다.

만약expample.com사이트에서 다음과 같이 쿠키를 설정했다면 서브 도메인인 *.example.com에서도 해당 쿠키에 접근할 수 있게된다.
user=name; domain=.example.com

path 옵션

쿠키의 접근 범위를 설정하는 옵션이다. Path=/cookies로 설정하게 되면 /cookies라는 페이지 하위에서만 해당 쿠키에 접근이 가능해진다. 예를 들면 https://learn.example.com/cookies/...에서는 해당 쿠키를 사용할 수 있지만 https://learn.example.com/api/...에서는 해당 쿠키를 사용할 수 없다는 의미이다.

Secure 옵션

HTTP프로토콜보다 더 안전한 프로토콜인 HTTPS에서만 쿠키가 전송되도록 설정하는 옵션이다.

SameSite 옵션

설정값에 따라 같은 도메인에서만 쿠키 사용이 가능하도록 설정하거나, 혹은 다른 도메인에서도 쿠키를 사용할 수 있도록 설정할 수 있다.

HttpOnly 옵션

HttpOnly 옵션을 true로 설정하면, 자바스크립트 코들로는 해당 쿠키에 접근할 수 없게 된다. 즉, document.cookie를 사용해 쿠키를 확인하거나 수정할 수 없다. 이 경우 오로지 웹 사이트 서버가 보낸 Set-Cookie헤더에 의해서만 쿠키를 설정 및 변경할 수 있다.

웹 스토리지

웹 스토리지의 특징

기한이 없다.
웹 스토리지는 브라우저에 임시적(세션)혹은 영구적으로 데이터 저장이 가능하다. 쿠키와 비슷하게 브라우저 창을 닫으면 데이터가 사라지게 할수도 있지만, 영구적으로 저장도 가능하다. 이 경우 쿠키와는 달리 기한이 없어서 명시적으로 데이터를 삭제하기 전까지는 데이터가 계속 저장소에 남아있게 된다.

브라우저가 자동으로 전송하지 않는다.
웹 스토리지의 데이터들은 서버에 자동으로 전송되지 않는다. 쿠키는 웹사이트 서버로 자동으로 전송이 되는 반면, 웹 스토리지는 그렇지 않다. 단, 자동으로 전송되지 않을뿐, 원하면 명시적으로 데이터를 웹사이트 서버에 전송할 수 있다. 따라서 쿠키는 모든 데이터가 다 전송이 되지만, 웹 스토리지는 내가 원하는 데이터만 전송할 수 있게 된다.

저장 용량이 크다.
매번 웹사이트 서버로 전송되지 않으므로, 쿠키에 비해 저장 가능 용량이 훨씬 크다. 최대 5MB까지 저장이 가능하다. 쿠키는 용량이 커지면 그만큼 웹사이트 서버로 보내는 리퀘스트 헤더의 크기가 커지므로 작은 양밖에 저장하지 못한다. 반면 웹 스토리지는 그 단점을 보완한다.

자바스크립트로만 설정 가능하다.
웹 스토리지는 오직 자바스크립트로만 가능하다. 쿠키와는 달리 웹사이트 서버에서 웹 스토리지에 데이터를 추가/수정/삭제 할수없다.

이와같은 특징때문에,
유저를 식별하는 문자열같이 서버에 매번 전송해야 하는 데이터나 '하루동안 다시 보지 않기'와 같이 특정 기한이 있어야 하는 데이터의 경우는 쿠키

서버에 매번 전송할 필요가 없는, 좀 더 용량이 크고 복잡한 데이터를 저장하고 싶은 경우에는 웹 스토리지를 사용한다.

로컬 스토리지와 세션 스토리지

로컬 스토리지와 세션 스토리지의 가장 큰 차이점은 데이터가 지속되는 기한이다.

탭을 닫는 순간 만료되는 세션 스토리지
세션 스토리지는 브라우저 탭별로 생성이 된다. 따라서 같은 URL로 여러개의 탭을 열면 각 탭에 대한 세션 스토리지가 각각 생성이 된다. 여기서 유추할 수 있듯 세션 스토리지는 브라우저 탭이 열려있는 동안만 유지된다. 이때는 페이지를 새로고침해도 데이터가 유지된다. 그리고 브라우저 탭을 닫는 순간 스토리지의 데이터는 지워진다.

만료되지 않는 로컬 스토리지
반면 로컬 스토리지의 데이터는 만료되지 않는다. 탭을 닫거나 브라우저 창 자체를 닫아도 데이터가 유지된다. 데이터를 삭제하려면 자바스크립트 데이터를 삭제하거나 브라우저 설정에서 직접 삭제해야 한다.

웹 스토리지를 저장하는 기준
로컬 스토리지는 오리진 별로 생성된다. 여기서 오리진이란 사이트 주소 중에서 프로토콜(HTTP/HTTPS), 도메인(URL), 포트번호를 포함한것을 말한다. 즉, 같은 오리진이란 프로토콜과 도메인, 그리고 포트번호가 같은것을 의미한다. 프로토콜에 따라서도 스토리지가 달라지기 때문에, 만약 http://example.com이라는 사이트와 https://example.com이라는 사이트가 있다면 서로 다른 스토리지를 가지게 되는것이다. 오리진이 같은 경우라면 여러 탭들 사이에서도 데이터가 공유된다.

로컬 스토리지를 사용하는 경우
이렇게 데이터가 유지되는 기한이 다르다는 특성때문에 각각이 사용하는 경우가 다르다. 로컬 스토리지는 데이터가 영구적으로 유지되므로, 다양한 경우에 자주 사용된다. 메신저나 댓글창에서 아직 보내지 않은 메세지를 저장하는데에도 사용하고, 사용자 설정이나 테마를 저장하거나 자동 로그인 기능을 위해 쓰이기도 한다. 또한 오프라인일 경우에 유저에게 보여줄 데이터를 저장할 때 사용할 수도 있다.

세션 스토리지를 사용하는 경우
세션 스토리지는 로컬 스토리지처럼 자주 사용되진 않지만 브라우저 창이 열려있는 동안만 유지하고 싶은 데이터를 저장하는데 쓸 수 있다. 예를들어, 여러 단계로 된 입력 폼의 정보를 유지할 때 사용할 수 있다.이 경우, 세션 스토리지에 데이터를 저장하면 다음 단계 페이지로 넘어가더라도 이전 단꼐의 데이터가 유지될 수 있다. 로컬 스토리지보다는 세션 스토리지를 이용해서 브라우저 창을 닫으면 데이터가 삭제되도록 하는것이 더 안전한 경우도 있을것이다. 혹은 일회성 로그인이나 브라우저 세션 동안만 유지되는 장바구니를 구현할 때 사용할 수도 있다.

이렇게 웹 스토리지에 저장되는 정보들은 자바스크립트 코드를 통해 탈취 및 조작이 가능하므로 비밀번호와 같은 민감한 정보들은 저장하면 안된다. 보안과 관련된 중요한 데이터들은 브라우저가 아닌 서버쪽에서 저장하고 관리하도록 해야한다.

웹 스토리지 다루기

로컬 스토리지
데이터 추가하기
localStorage.setItem('이름', '값');을 통해 데이터를 추가할 수 있다.

데이터 가져오기
localStorage.getItem('이름')을 통해 데이터를 가져올 수 있다.

만약 객체를 저장한다면

const myObj = {language : 'ko', size : 100, color : 'black'};
localStorage.setItem('Obj', JSON.stringify(myObj));
//이렇게 문자열로 바꿔서 저장하고, 객체로 불러오려면
JSON.parse(localStorage.getItem('obj'));

데이터 변경은 쿠키와 동일하게 localStorage.setItem('이름', '바꿀 내용');

데이터 삭제하기
localStorage.remove('이름');으로 삭제가 가능하고
localStorage.clear();로 모든 데이터를 삭제할 수 있다.

쿠키 : 보안과 인증이 필요한 작업(로그인 상태 유지, 세션 관리)

로컬 스토리지 : 클라이언트에서 동작하는 비보안 데이터(사용자 선호도, 최근 본 항목, UI상태 등)를 저장하기에 적합함. 데이터 용량이 많거나, 서버와의 통신이 필요없을 경우 효율적임.