[개발일기] TIL

(2023.05.22)

웹개발자라면 반드시 알아야 하는 웹 스토리지. html5 스펙에서 처음 도입되었다.

기존의 쿠키를 개선하는 저장소로 키와 값을 쌍으로 데이터를 저장한다(물론 쿠키는 지금도 유효한 좋은 저장소임).

쿠키와의 가장 큰 차이점은 쿠키는 서버에 무언가를 요청할 때마다 같이 보내진다는 것(웹스토리지는 수동으로 첨부해야함).

 

종류는 2가지. window 객체에 있는 localStorage, sessionStorage이다.

이것을 이용해 브라우저에 데이터를 저장, 조회할 수 있는데

주로 서버로부터 받은 사용자 정보를 저장할때 사용한다. ex) jwt token 등

 

둘의 차이점은 localStorage는 한번 저장하면 개발자가 지우지 않는 이상 계속 보존되며

sessionStorage는 저장된 이후로 탭을 닫거나 브라우저를 종료하면 데이터가 사라진다.

 

스토리지에 저장할땐 JSON객체를 JSON문자열로 바꾸어야 하며(JSON.stringify() 함수 이용, ),

스토리지에서 꺼낼땐 JSON문자열을 JSON객체로 바꾸어야 한다(JSON.parse() 함수 이용, 파싱한다고 함).

주의할 점은 저장/조회하는 작업이 동기적이기 때문에 용량이 너무 큰 데이터는 피하는 것이 좋다(성능 저하).

 

상황에 맞게 잘 사용하자.