24. Cookie, Local Storage, Session Storage

지난 로그인 프로세스 포스팅을 할때 Refresh token을 html의 쿠키에 담아서 저장한다고 말을 했는데 그 쿠키가 무엇인지에 대해서는 제대로 설명을 달지 않았다. (오늘 설명하기위한 빌드업) 오늘은 쿠키에 무엇이길래 거기에 토큰을 담는다는건지, 추가로 Local storage와 session storage의 개념까지 배워보자

 

---

쿠키(Cookie)

 

 Refresh Token을 담는곳이라고 했으니 저장소의 개념을 갖는것은 어렴풋이 알겠는데 솔직히 그 기능보다 왜 이름이 쿠키인지가 젤 궁금한건 나만그런거 아니겠지..? 그래서 찾아봤따. 

http://dominopower.com/article/where-cookie-comes-from/

Where cookie comes from :: DominoPower

Chinese fortune cookies contain small chunks of text and so do browser cookies, thus the origin of the term.
 -> 중국 포춘쿠키에 쪽지? 같은게 담겨있었듯이 브라우저에 담겨있는 정보를 쿠키라고 부른다는 가설

 

가설인지 진짜인지는 모르겠지만 신빙성있는것 같다 ㅎ 아무튼! 어원은 그렇고 그래서 브라우저에 있는 쿠키가 일종의 브라우저가 가지고있는 저장소라는건 알겠는데 어디서 어떻게 사용하는지를 정리해보자.

 

•  웹 서버가 웹 브라우저에 보내어 임시로 저장했다가 서버의 요청이 있을 때 다시 서버로 보내주기 위한 저장소
•  웹페이지 방문 시 방문 기록 등 브라우저의 정보들이 저장된 텍스트 파일

이 두가지가 쿠키를 설명하는 좋은 특징이라고 생각한다. 로그인 후 받은 Refresh token으로 별다른 재인증 과정을 거치지 않고 access token을 받을 수 있도록 브라우저단에서 관리하는 데이터정보를 cookie storage에 저장한다고 하고 그럼 왜 DB에 저장안하고 브라우저에 담는데? 라고 묻는다면 지난 포스팅에서 살짝 언급했듯 1차적으로는 보안상의 문제때문이다. DB에 저장한 데이터는 말그대로 계속해서 저장되어있기때문에 언제든 해킹당할 우려가있지만 브라우저는 비교적 DB보다 휘발성이 강하고 때문에 만료기간을 설정해둔 데이터들은 가볍게 쿠키에 저장해두어서 꺼내쓰는게 낫다. 쿠키에 저장된 정보를 통해서 브라우저를 종료했다가 다시 접속해도 그 로그인 상태를 유지할 수 있다는 장점도 있다. 쿠키는 Key, Value 형태로 저장되며 String 타입을 갖고 4KB이상의 데이터는 저장할 수 없다. 또한 브라우저마다 저장되는 쿠키가 각각 다르다.

 

Local Storage 와 Session Storage

 

 우선 로컬 저장소는 웹 브라우저에서 key-value 쌍의 형태로 클라이언트 컴퓨터에 데이터를 저장하는것을 도와주는 웹 저장 방법중 하나로 이곳에 저장된 데이터는 사용자가 브라우저에서 수동으로 삭제하지 않는 한 계속해서 로컬 저장소에 저장되어있다. 이곳에 저장된 데이터는 창이나 탭을 닫아도 삭제되지않고 직접 브라우저의 메모리를 지워야 사라진다. 사실상 반영구적인 데이터저장소라고 보면 된다. 사용자가 해당 저장소에 저장된 데이터를 지우기 위해서는 브라우저의 모든 데이터/캐시를 지워서 로컬 저장소의 모든 데이터를 지워야한다. 로컬 저장소에서 데이터를 설정, 검색 및 제거하는데 사용하는 방법은 다음과 같다.

 

Local storage 데이터 설정하기 = > localStorage.setItem(key, value); 
Local storage 데이터 검색하기 = > localStorage.getItem(key);
Local storage 데이터 삭제하기 = > localStorage.removeItem(key);
Local storage 모든 데이터 삭제하기 = > clear()

 

 

 세션 저장소는 로컬 저장소와 매우 유사하지만 데이터의 저장 수명에 차이가 있다. 로컬 저장소에 저장된 데이터와 달리 세션 저장소에 저장된 데이터는 현재 탭이나 세션이 종료되면 데이터도 함께 유실된다. 세션 저장소 역시 로컬 저장소와 비슷하게 데이터를 설정하고 검색할 수 있다.

 

Session storage 데이터 설정하기 => sessionStorage.setItem(key, value);
Session storage 데이터 검색하기 => sessionStorage.getItem(key);

 

결론

https://www.loginradius.com/blog/engineering/guest-post/local-storage-vs-session-storage-vs-cookies/

 

 어떤 데이터를 저장하고 관리하느냐에 따라 어떤 저장소에 저장해두어야 하는지 달라진다. 위의 표에 따르면 각각의 저장소는 서로 다른 특징과 장단점을 지니고 있는데 일반적으로 브라우저에 데이터가 계속해서 남아있기를 원하는 정보는 Localstorage 에 저장하고 서버에서 원하는 경우에는 쿠키에 저장, 특정 탭이 닫히거나 사용자가 세션을 닫을 때마다 삭제되어도 무방한 데이터같은 경우는 sessionstorage에 이를 저장해서 관리하는 방식으로 가장 효율적이고 보안성이 높은 방식으로 데이터들을 관리한다.