웹 스토리지란?

웹 스토리지(Web Storage)란?

데이터베이스(DB)나 서버 또는 클라우드 플랫폼이 아닌 사용자의 브라우저 내에 데이터를 저장하는 기술입니다.

HTML5 이전에는 데이터를 쿠키에 저장되어야 했습니다.

웹 스토리지가 등장한 이후에 쿠키 보다 많은 저장 공간을 사용할 수 있으며 정보가 서버로 전송되지 않습니다.

 

웹 스토리지 객체

HTML 웹 스토리지는 클라이언트에 데이터를 저장하기 위해 두 가지 객체를 제공합니다.

객체를 통하여 브라우저 내에 키-값 쌍을 저장할 수 있도록 합니다.

 

1. 로컬 스토리지(localStorage)

특정 웹사이트를 새탭이나 새창으로 띄워도 동일한 데이터를 공유합니다.

즉 브라우저를 종료한 후 실행시켜도 데이터가 남아있습니다.

직접 브라우저의 캐시 삭제 및 로컬 스토리지 초기화를 하지 않는 이상 데이터는 영구적으로 보관됩니다.

단, 같은 컴퓨터에서 같은 브라우저를 사용할 때만 적용된다.

 

2. 세션 스토리지(sessionStorage)

같은 페이지라도 다른 탭에 존재한다면 다른 곳에 저장됩니다.

사용자가 특정 브라우저 탭을 닫으면 데이터가 삭제됩니다.

 

오늘은 웹 스토리지란게 존재하고 어떤것인지만 알아보았습니다.

사용법은 나중에 실제로 사용할 일이 있다면 자세하게 정리하겠습니다.

 

사용법에 관심이 있으신 분들은 아래의 출처 링크들을 참조하시면 좋을 것 같습니다.

 

 

출처

https://www.w3schools.com/html/html5_webstorage.asp

HTML Web Storage API

https://developer.mozilla.org/ko/docs/Web/API/Web_Storage_API#web_storage_%EA%B0%9C%EB%85%90%EA%B3%BC_%EC%82%AC%EC%9A%A9%EB%B2%95

Web Storage API - Web API | MDN

https://ko.javascript.info/localstorage

localStorage와 sessionStorage

https://velog.io/@ingong/JS-%EB%A1%9C%EC%BB%AC-%EC%8A%A4%ED%86%A0%EB%A6%AC%EC%A7%80-%EC%9D%B4%ED%95%B4%ED%95%98%EA%B3%A0-%ED%99%9C%EC%9A%A9%ED%95%98%EA%B8%B0

[JS] 로컬 스토리지 이해하고 활용하기