알아보게 된 계기
페어프로그래밍을 하면서 상태를 저장해놔야될 경우가 생겼었다. 예전에 정보처리기사를 준비하면서 봤던 적이 있는데 시간이 지나니 정확히 구별이 되지 않아 기록해놓는다.
로컬 스토리지와 세션 스토리지 차이
로컬 스토리지와 세션 스토리지는 HTML5에서 추가된 저장소다. 키와 값을 저장할 수 있다. 큰 차이점으로는 로컬 스토리지와 세션 스토리지는 데이터의 영구성에 있다. 로컬 스토리지는 사용자가 지우지 않는 이상 계속 브라우저에 남는다. 하지만 세션 스토리지는 브라우저를 닫는 순간 제거된다.
이 특성을 이용해서 계속 필요한 데이터는 로컬 스토리지에 저장한다. 그렇다면 계속 필요한 데이터는 무엇일까? 우리가 흔히 사이트들에서 사용하는 자동 로그인 기능이 그렇다. 자동 로그인에 필요한 데이터는 우리가 계속 컴퓨터를 껐다켰다할 때 유지되야하니까 로컬 스토리지에 저장하고 일회성으로 로그인할 때 필요한 데이터는 세션 스토리지에 저장해서 브라우저에서 해당 사이트에 접속하여 동작하는 동안 유지되도록 하는 것이다.
이렇게 얘기해도 시간이 좀 지나면 또 두개가 헤깔릴 수 있다. 이럴때 나는 용어자체의 의미를 해석하는 편이다.
로컬 스토리지에 대해 먼저 뜻을 해석해보면local. 즉, 지역적(내 컴퓨터)으로 계속 가지고 있다고 생각하고세션 스토리지의session은 기간, 시간을 떠올릴 수 있기 때문에 연결된 상태를 생각할 수 있다.
쿠키
쿠키는 로컬 스토리지, 세션 스토리지가 등장하기 이전부터 저장소 역할을 하던 것이다. 1년 전쯤인가 크롬에서 쿠키가 퇴출된다고 들었던적이 있었던 것 같아서 다시 검색해봤더니 2023년 말까지만 지원한다고 한다. 그래도 쿠키는 무슨역할을 했었는지, 그리고 왜 크롬에서 퇴출되는지 이유를 알아보면 좋을 것이기 때문에 찾아본다.
일단 크롬에서 쿠키를 퇴출하는 이유는 개인정보 보호 다. 사용자가 웹 사이트를 방문했을 때 남는 기록을 광고주가 인터넷 사용자를 추적하는 방법으로 널리 사용하는데, 이런 특성을 이용해서 사용자 성향을 파악해서 타겟팅 광고를 할 수 있었다.
이런 이유로 MS, 애플, 모질라는 구글보다도 먼저 대안을 내놨었다. MS는 추적 방지 기능이 탑재된 브라우저인 엣지를, 애플은 사파리에 추적 방지 툴을 추가하고 모질라의 파이어폭스는 기본값으로 쿠키를 차단하는 새 브라우저 버전을 출시했었다.
크롬은 바로 쿠키를 퇴출하려는 행동을 보이지 않고 단계적으로 퇴출을 하고 있다. 우선 크롬80버전에서 세임사이트 쿠키 정책으로 보안을 높였는데 이것은 같은 사이트에서만 쿠키를 브라우저에 심도록 허용하는 것이었다.
쿠키도 시간이 지나면 무슨 역할을 했었는지 까먹을 수 있다. 쿠키는 헨젤과 그레텔에서 빵 부스러기와 같다고해서 붙여진 이름이다. 추적이 가능하도록 흔적이 다 남는 그런 모습을 기억하면 쿠키를 기억하는데 도움이 될 것 같다.
로컬 스토리지, 세션스토리지와 쿠키
쿠키는 서버와 클라이언트 간 지속적인 데이트 교환을 목적으로 설계됬기 때문에 계속 서버로 전송된다고 한다. 이게 문제가 되는 이유는 4kb 용량 제한을 다 채운 쿠키가 있다면 요청할 때 마다 4kb의 데이터를 기본적으로 계속 사용하는 것이다. 서버에서 필요하지 않은 데이터가 있어도 무관하다. 즉, 데이터 낭비가 계속 발생하는 거다.
이에 반해 로컬 스토리지, 세션 스토리지는 그런 데이터들을 클라이언트단에서 저장할 수 있게 되었기 때문에 서버에 자동 전송되지 않을 수 있다. 재밌었던 점은 브라우저별, 기기별로 용량 제한이 다르다는 것이다. 쿠키는 최대 4kb인데 비해 로컬 스토리지와 세션 스토리지는 브라우저, 기기마다 다르지만 모바일 2.5mb, 데스크탑 5mb~10mb라고 생각하면 된다고 한다. 쿠키의 4kb와는 말도안되는 크기의 차이다. 부족하다고 느껴질 수 있으나 키와 값을 저장하기 위한 용도로 사용하기 때문에 충분할 것이다. 그래도 부족하다면 기본 50mb를 저장할 수 있는 IndexedDB 가 있다고 한다. indexedDB에 대해서는 나중에 알아보자. 지금은 세션, 로컬, 쿠키의 차이점을 구별할 줄 아는 것에서 충분하다.
로컬 스토리지, 세션 스토리지 사용 방법
로컬 스토리지에서 키와 값 저장
localStorage.setItem('toggle', 'false'); // (저장)
localStorage.getItem('toggle'); // false
localStorage.removeItem('toggle'); // (삭제)
localStorage.getItem('toggle'); // null. 삭제되서 없다.
localStorage.clear(); // (전체 삭제)객체를 통채로 저장하려면 JSON.stringify 를 사용해야 된다. 말 그대로 객체를 문자열로 변환한다는 거다.
받을 때는 JSON.parse 로 받아서 파싱해서 불러온다.
localStorage.setItem('object', JSON.stringify({ a: 'b' }));
JSON.parse(localStorage.getItem('object')); // { a: 'b' }세션 스토리지도 마찬가지로 동일한 메소드를 사용한다. 앞에 localStorage를 sessionStorage로 바꿔주면 된다.
참고
제로초 : 로컬, 세션 스토리지
https://www.zerocho.com/category/HTML&DOM/post/5918515b1ed39f00182d3048
기사 : 크롬 쿠키 차단
http://it.chosun.com/site/data/html_dir/2020/02/16/2020021600579.html
MDN : localStorage
https://developer.mozilla.org/ko/docs/Web/API/Window/localStorage
