웹 스토리지란? 브라우저 상에 데이터를 저장 할 수 있는 기술
로컬 스토리지(localStoraage) vs 세션 스토리지(sessionStorage)
로컬 스토리지(localStorage)
- 웹 페이지의 세션이 끝나도 저장된 데이터 삭제되지 않음
세션 스토리지(sessionStorage)
- 웹 페이지의 세션이 끝날 때 저장된 데이터가 삭제
브라우저에서 같은 웹사이트를 여러 탭이나 창에 띄우면, 여러개의 세션 스토리지에 데이터가 서로 격리되어 저장되고, 각 탭이나 창이 닫힐 때 저장해둔 데이터도 함께 소멸되지만 로컬 스토리지의 경우 여러 탭이나 창 간에 데이터가 서로 공유되고, 탭이나 창을 닫아도 데이터는 브라우저에 그대로 남아있있음.
하지만 로컬 스토리지의 데이터 영속성은 동일한 컴퓨터에서 동일한 브라우저를 사용할 때만 해당.
즉 같은 컴퓨터에서 다른 브라우저를 사용하거나(크롬->사파리) 또는 다른 컴퓨터에서 같은 브라우저를 사용하는 경우(집:크롬->회사:크롬)에는 다른 브라우저를 사용하는 것이므로 다른 로컬 스토리지에 데이터가 저장되는 것임.
(이 경우의 데이터 공유를 원한다면 클라우드(Cloud) 플랫폼이나 데이터베이스(DB) 서버를 사용)
기본 API
- 웹 스토리지는 기본적으로 키(key)와 값(value)로 이루어진 데이터를 저장 할 수 있음
//키에 데이터 쓰기
localStorage.setItem("key",value);
//키로 부터 데이터 읽기
localStorage.getItem("key");
//키의 데이터 삭제
localStorage.removeItem*("key");
//모든 키의 데이터 삭제
localStorage.clear();
//저장된 키/값 쌍의 개수
localStorage.length;
원래는 window.localStorage를 사용해야 하지만, window객체 대부분의 속서이 그러하듯, 줄여서 localStorage 스토리지 객체에 접근할 수 있음
주의 사항
웹 스토리지는 오직 문자형(String)데이터 타입만 지원함.
위처럼 숫자형 데이터를 넣어도 문자형 데이터로 변환됨
이러한 성질때문에 객체형 데이터를 저장할 때에는 다음과 같은 문제가 생길 수 있다.
위 같은 문제를 해결하기 위해서 많이 사용하는 방법은 JSON 형테로 데이터를 읽고 쓰는 것
위와 같이 로컬 스토리지에 쓸 데이터를 JSON 형태로 직렬화(serialization)하고, 읽은 데이터를 JSON 형태로 역직렬화(deseralization)해주면 원본의 데이터를 그대로 얻을 수 있음
배열형 데이터를 로컬 스토리지에 저장할 때도 동일한 방법을 문제를 예방할 수 있음
데이터 청소
로컬 스토리지에 저장된 데이터는 웹페이지를 닫거나 끈다고 해서 사라지지 않기 때문에 데이터를 삭제하고 싶으면 직접 삭제해서 청소를 해주는 것이 좋음
-> 브라우저의 개발자도구를 통해 웹 스토리지에 있는 데이터를 확인하고 삭제할 수 있다.
(크롬의 경우, Application 탭에 들어가면 왼편에 Storage 영역을 확인 할 수 있다)
위의 버튼을 누르면 삭제 됨.
참고할 만한 웹 스토리지에 대한 MDN 문서
