<aside> ☝🏻 로컬 스토리지와 세션 스토리지는 HTML5에서 추가된 저장소

간단한 키와 값을 저장할 수 있습니다. 키-밸류 스토리지의 형태

</aside>

• 참고자료

웹 스토리지

• 5MB의 저장용량
• 요청시 자동으로 전송되지 않아 쿠키의 CSRF의 보안 문제와 트래픽 문제 해결
• 문자열만 저장 가능 (직렬화 를 통해 저장한다면 객체도 저장 가능)

로컬, 세션 스토리지

• 로컬 스토리지와 세션 스토리지의 차이점은 데이터의 영구성
• 로컬 스토리지의 데이터는 직접 삭제시 제거됩니다
• 세션 스토리지의 데이터는 윈도우나 브라우저 탭 종료시 제거됩니다
• 지속적으로 필요한 데이터(자동 로그인 등)는 로컬 스토리지에 저장하고, 잠깐 동안 필요한 정보(일회성 로그인 정보라든가)는 세션 스토리지에 저장하면 되겠습니다.
• 로컬스토리지의 사용방법은 데이터를 저장할 땐 배열을 선언하여 각각의 정보들을 배열의 요소로 추가하고, 한 이름에 대한 정보들은 여러 항목이 있기에 객체로 저장한다.

사용 시 고려할점

• 객체를 저장하기 위해서는 직렬화,역직렬화 필요
• 직렬화를 할 때 순환 참조이거나, 역직렬화를 할때 JSON형식이 아닌 경우 에러 발생
• 브라우저 버전에 따라 웹 스토리지를 지원하지 않을 수 있다