web storage

우선 웹 스토리지가 무슨 역할을 하는지 알고 이를 어떤 방식으로 활용해야하는지 살펴보자

예를들어 어떠한 글을 쓰거나, 장바구니에 상품을 저장하는 종류의 행동들은
서버에 저장되어 사용자가 해당 페이지를 벗어나도 기록이 유지가 되어야 UX적으로 편리함을 느낄 수 있다
이를 구현하기 위해선 서버와 소통을 하고 데이터를 받아오는 통신을 거쳐야 한다
하지만 서버와 통신하는 횟수를 증가시키면 그 만큼에 비용이 발생할 뿐더러 비효율적인 통신은 성능 저하를 야기한다

따라서 이를 서버에 저장하는 방식이 아닌 JS에서 browser에 저장하여 불필요한 호출을 줄일 수 있다
이를 web storage에 저장한다라고 칭한다

그렇다면 우선 local storage를 살펴보자

local storage

JS는 기본적으로 렌더링이 되면, 페이지를 이동하면 새로 시작하여 선언한 변수들이 초기화된다
따라서 이를 JS에 저장하려고 하면 초기화가 일어나 정상적인 접근이 불가능하다

따라서 이를 외부(browser)에 저장하여 그 곳에서 꺼내쓸 수 있도록 유도하는 것이다
이때 저장되는 곳을 local storage라고 칭한다

그렇다면 local storage의 장점은 무엇일까?
우선 가장 큰 장점은 용량이 상당히 크다는 것이다

쿠키의 경우 개당 4KB의 크기를 가진다
하지만 local storage는 5MB의 크기를 가진다
따라서 많은 양의 정보를 저장할 수 있다는 장점이 있다

또한 같은 오리진의 경우 모든 탭과 창에서 공유하기에 접근이 용이하다
서버에 저장하지 않고, 브라우저에 저장하여 불필요한 통신을 줄여준다
가장 큰 장점으로는 만약 해당 탭이 종료되거나 재시작하는 경우 데이터가 파기되지 않고 저장되어있다

사용법

사용법도 매우 간단하다

localStorage.setItem('key','value');
localStroage.getItem('key');

setItem과 getItem으로 setter와 getter를 동작시킨다
이때 localStorage는 window 객체에 포함되어있다

결과를 살펴보면 다음과 같다

이는 개발자도구(F12) -> Application -> Local storage에서 확인할 수 있다

저장되는 key와 value는 string type으로 저장된다
만약 value에 다른 형식의 타입을 사용했다면 자동적으로 string으로 변환된다

객체나 배열과 같은 값들을 저장하고 싶다면
이전에 언급했던 JSON.stringify()를 사용해 문자열로 변환하고
getter를 사용할땐 JSON.parse()를 사용해 원래의 타입으로 불러올 수 있다

const obj = { a:1 , b:2 , c:3 };

localStorage.setItem('obj',JSON.stringify(obj));

console.log(JSON.parse(localStorage.getItem('obj')));

저장은 문자형식으로 하고 불러올 땐 객체로 반환되는 것을 확인할 수 있다

이번엔 local storage의 간단한 특성을 살펴보자

출력을 해보면 다음과 같다
이때 iterator가 없기에 for...of 사용이 불가능하다
하지만 for...in은 사용이 가능하다(key와 value가 있으므로)
하지만 늘 그랬든 for...in은 추천하지 않는다

이번엔 삭제에 관한 코드를 살펴보자

localStorage.removeItem('key');

key에 해당하는 value가 삭제된 것을 확인할 수 있다
이때 key1:vale1 , key2:value2, key3:value3을 저장하고 한 번에 지워보겠다

localStorage.setItem('key1','value1');
localStorage.setItem('key2','value2');
localStorage.setItem('key3','value3');

localStorage.clear();

첫 번째는 저장을 끝마친 직후이다
이후 clear를 사용한 후 local storage의 내부이다

이처럼 한 번에 지우는 것도 가능하다

local storage가 방대하다고는 했지만 5MB라서 얼마나 방대한지 체감이 안될 것이다
핵심은 local storage는 string type만 저장한다는 점에 있다
string type으로만 5MB를 채우려면 2~500만자 라고 생각하면 된다

매우 많은 양의 정보를 저장할 수 있다는 의미이다

새로고침과 탭을 닫았다 여는 작업은 사진으로 보여주기에는 애매한 부분이 있어 직접 해보기를 권장한다

session storage

session storage도 역시 local storage와 마찬가지로 web storage이다
하지만 local storage와의 차이점은 무엇인가?

session storage는 휘발성이다
즉, 현재 탭 내에서만 유지된다는 의미이다

localStorage.setItem('key1','value1');
localStorage.setItem('key2','value2');
localStorage.setItem('key3','value3');

이는 세션 스토리지에 잘 저장된 모습이다
그렇다면 여기서 새로고침을 해보겠다

변화는 없다
이는 현재 탭에서 이동하지 않고 위치가 유지되었기 때문이다
그렇다면 다른 탭에서도 공유되는지 확인해보자

분명 같은 이름의 탭이지만 local storage와는 다르게 공유를 하지 못하는 모습이다
탭을 껐다가 다시 열어도 똑같이 공유를 하지 못하는 모습을 확인할 수 있다

이처럼 한 페이지에서 새로고침에만 유효하게 작동시킬 때 session storage를 사용할 수 있겠다 라는 생각이 들었다

쿠키

쿠키는 우선 저장되는 위치가 browser가 아니다
이는 브라우저 별로 다른데 크롬의 경우를 살펴보자
크롬의 쿠키 저장위치는 다음과 같다

C:\Users\\AppData\Local\Google\Chrome\UserData\Default\Cookies

여기에 저장되는 쿠키는 데이터베이스 포맷이기에 메모장으로 접근하는 것은 불가능하다

쿠키는 저장경로, 유효시간, 이름, 값을 가지고 있다
이는 사용자가 브라우저를 종료했다가 다시 사용하는 경우에도 유효하다

어떤 홈페이지에는 이런 종류의 팝업이 존재할 것이다.

만약 오늘 그만보기를 눌렀다면 이는 하루동안 나타나지 않는다
이때 쿠키를 사용하여 만료시간을 정한다면 PC를 재부팅해도 유효하다

그렇다면 사용법에 대해 살펴보자

let cookieString = `${encodeURIComponent(name)}=${encodeURIComponent(value)}
					;path=${path}
					;expires=${date.toUTCString()}`

document.cookie = cookieString;

특이한 점은 name과 value를 저장할때 암호화(encoding)와 복호화(decoding)를 거쳐서 쿠키를 해석한다는 점과
시간을 밀리세컨즈(ms)단위로 계산하여 저장해야한다는 점이 있다
실제 이 코드는 그런 계산을 하지 않았기에 정상적인 작동은 하지 않을 것으로 예상된다

하지만 보안이 요구되는 곳에는 쿠키를 사용하지 않는다

사용법이 복잡해 통상적으로는 local storage를 많이 사용한다