[javaScript] 웹스토리지(localStorage, sessionStorage) 정리.
January 09, 2022
마침 사이드 프로젝트에 장바구니를 구현하려다, 웹스토리지(localStorage, sessionStorage)를 이참에 블로그에 정리해보면 어떨까? 생각하고 이 글을 적게되었습니다.
간단하게 웹 스토리지에 대해 간단하게 알아본다면 일단 로컬 스토리지, 세션 스토리지는 클라이언트, 즉 브라우저상에 데이터를 저장하는 기술입니다. 두가지의 차이점을 알아보면
로컬 스토리지 세션 스토리지
일단 공통점은 브라우저에 저장합니다. 이 두개의 차이점은 데이터의 보존이 얼마나 오래 가능한가? 에서 차이점을 보입니다. 로컬 스토리지는 웹페이지의 세션이 끝나도 데이터가 지워지지 않는 반면에, 세션 스토리지는 세션이 끝나면 저장된 데이터가 소멸합니다.
즉 브라우저에서 여러개의 탭이나 창을 띄우면 여러 개의 세션스토리지에 데이터가 따로 저장되며, 각 탭이나 창이 닫힐때 데이터가 소멸합니다.
반면 로컬 스토리지는 반대로 여러개의 탭이나 창을 띄워도 데이터가 공유되며, 닫아도 소멸되지않고, 데이터가 브라우저에 그대로 남아있습니다.
이 포스트는 구현이 목적이니, 간단하게 사용법을 알아보겠습니다.
// 키에 데이터 넣기
localStorage.setItem('key', value)
// 키로부터 데이터 읽기
localStorage.getItem('key')
// 키로부터 데이터 삭제
localStorage.removeItem('key')
// 모든 키의 데이터 삭제
localStorage.clear()
// 저장된 키/값 쌍의 개수
localStorage.length주의사항
웹 스토리지를 사용할 때 주의사항이 있습니다. 이부분은 저도 처음 사용할때 이 문제때문에 혼동을 겪었던 부분이기도합니다.
예를 들면, 숫자형 데이터나 Boolean같은 데이터를 저장하고 불러올때 조심해야합니다.
localStorage.setItem('num', 1)
localStorage.getItem('num') === 1
// false
localStorage.getItem('num')
// "1"이와 같이 웹 스토리지는 오직 문자형 데이터만 지원합니다.
해결방법
웹 스토리지를 사용할 때 위와 같은 문제를 피하기 위해 JSON 형태로 데이터를 읽고 쓰는게 가능합니다
localStorage.setItem('json', JSON.stringify({ a: 1, b: 2 }))
JSON.parse(localStorage.getItem('json'))배열형 데이터를 로컬 스토리지에 저장하고 싶을땐 이런방법을 사용합니다.
localStorage.setItem('nums', JSON.stringify([1, 2, 3]))
JSON.parse(localStorage.getItem('nums'))
// [1, 2, 3]데이터 삭제
로컬 스토리지에 저장된 데이터는 웹페이지를 닫는다고 해서 사라지지 않으므로, 불필요한 데이터가 남지않도록 직접 청소를 해줘야합니다.
localStorage.length
// 5
localStorage.key(0)
// num
localStorage.removeItem('obj')
localStorage.length
// 4
localStorage.clear()
localStorage.length
// 0웹 스토리지에 저장된 데이터를 직접 보려면 브라우저에서 F12를 누르신후 Application탭에 들어가시면 됩니다.
