웹스토리지

• HTML5부터 지원하는 기능
• 도메인과 관련된 데이터를 서버가 아닌 클라이언트(브라우저)에 저장하는 기능
• 필요한 경우에만 꺼내 쓸 수 있음

로컬스토리지, 세션스토리지

로컬스토리지

• 보관기한 없음. 지우지 않는 한 영구적
• 도메인별로 생성되며, 다른 도메인의 로컬스토리지는 접근 불가
• 다른 브라우저라도 도메인이 동일하면 같은 로컬스토리지 사용
• 동기방식으로만 동작하기 때문에 메인 스레드 연산 중단시킴
• 문자열만 저장 가능
• 자동 로그인 등의 정보 저장에 효율적

// 데이터 저장
localStorage.setItem(key, value);
// 지정한 키에 해당하는 데이터 반환
localStorage.getItem(key);
// 지정한 키 값 삭제
localStorage.removeItem(key)
// 저장되어있는 모든 데이터 삭제
localStorage.clear()
// 저장되어 있는 데이터 갯수 반환
localStorage.length;

세션스토리지

• 탭, 윈도우 단위로 세션스토리지 생성
• 탭 안에서만 유효하며 탭이 닫히면 스토리지도 종료
• 같은 도메인이여도 세션이 다르면 데이터에 접근 불가
• 문자열만 저장 가능

// 데이터 저장
sessionStorage.setItem(key, value);
// 지정한 키에 해당하는 데이터 반환
sessionStorage.getItem(key);
// 지정한 키 값 삭제
sessionStorage.removeItem(key);
// 저장되어있는 모든 데이터 삭제
sessionStorage.clear();
// 저장되어 있는 데이터 갯수 반환
sessionStorage.length;

참고

쿠키

• 쿠키는 서버에 전송됨
• 쿠키는 HTTP요청이 있을 때마다 함께 전달되기 때문에 데이터양이 급격히 늘어날 수 있음. 비동기. 문자열만 저장 가능

세션

• 서버 측에서 관리
• 브라우저를 종료하거나 일정 시간이 지나게 되면 만료됨
• 데이터가 서버에 있어 쿠키보다 보안이 좋음