- 우리가 데이터를 서버에 저장한다는 개념은 저번 포스팅으로 알 수 있는데요, 하지만 일시적이거나, 보안에 중요하지 않은 기능까지 모두 서버에 저장하게 된다면 서버 공간 낭비나 트래픽에 문제가 생깁니다. 오늘 배울 웹 스토리지는 웹 브라우저에 데이터를 저장하여 이러한 서버 공간 낭비를 해결해주는데요, 한 번 알아봅시다.
📙 웹 스토리지와 쿠키 알아보기
-
웹 스토리지는 웹과 저장소의 두 단어를 합친 용어로, 서버가 아닌 클라이언트에 데이터를 저장할 수 있도록 지원하는 html5의 새로운 기능입니다.
-
저번 시간에 쿠키의 속성에서 최대 4KB의 문자열이라고 포스팅했었는데요, 웹 스토리지는 쿠키와 기능이 유사하지만 쿠키에 비해 저장 공간이 5MB로 훨씬 많습니다.
📙 특징
-
웹 스토리지는 데이터에 접근 가능한 유일한 key와 해당 키로 저장하는 value 값의 형태로 데이터를 저장합니다. 따라서 키 값을 이용해 저장된 데이터를 참조하거나 가져올 수 있죠. 이때 반환되는 데이터 값은 문자열(string)입니다. 웹 스토리지는 기본적으로 문자열 타입의 데이터 만을 지원하지만, 객체 형태의 데이터도 문자열로 변환하여 저장할 수 있습니다.
-
웹 스토리지는 쿠키의 여러 단점을 보완하고자 나온 데이터 저장 기술입니다. 때문에 저장 가능한 데이터 용량, 개수, 보안 측면에서 쿠키보다 더 나은 성능을 보여주죠. 위에서 말한 용량 차이와 더불어 저장 가능한 데이터 개수도 웹 스토리지는 제한이 없습니다.
-
그러나 웹 스토리지는 개념적으로 쿠키보다 안전하고 더 나을 뿐, 여전히 보안상 문제점이 존재할 수 있습니다. 따라서 아이디, 비밀번호 등등 중요한 개인 정보들은 웹 스토리지에 저장하지 않아야 합나다.
📙 쉽게 이해하는 웹 스토리지
- 우리가 지금 보고 있는 벨로그를 살펴보면, 게시글을 작성하다 임시저장 버튼을 누를 경우 글이 임시저장 됩니다. 이 역시 웹 스토리지에 저장하여 사용자에게 보여주는 형태인 것이죠. 그 외에 자동 로그인 기능, 배달 어플로 음식을 장바구니에 담을 경우 보여주는 기능들 역시 웹 스토리지를 이용한 기능들입니다.
📙 웹 스토리지 종류
🔍 로컬 스토리지(Local Storage)
-
웹 브라우저 내에서 사용자의 로컬 컴퓨터에 데이터를 저장하는 방식입니다. 사용자의 브라우저에 데이터를 저장하여 웹 페이지 간의 정보를 유지하거나 오프라인 작업에 활용될 수 있습니다.
-
로컬 스토리지는 로컬 pc 저장소를 떠올리면 이해하기 쉽습니다. 컴퓨터에 저장한 데이터는 직접 삭제하지 않으면 사라지지 않듯이, 로컬 스토리지에 저장한 데이터 또한 사용자가 삭제하지 않는 이상 영구적으로 저장됩니다. 따라서 로컬 스토리지에 저장하는 데이터들은 탭을 닫더라도 유지되어야 하는 자동 로그인 기능이 포함됩니다.
🔍 세션 스토리지 (Session Storage)
-
세션 스토리지는 로컬 스토리지와 비슷하지만, 페이지 세션이 유지되는 동안만 데이터를 저장합니다. 사용자가 브라우저를 닫을 경우 해당 데이터는 삭제되는 차이점이 있습니다.
-
다만 새로 고침을 하면 데이터는 그대로 유지되기에, 브라우저를 사용하는 동안만 유지하면 데이터를 세션 스토리지에 저장하는 것이 적합하죠. 웹 사이트를 볼 경우 이전 페이지 스크롤 위치가 이에 포함됩니다.
🔍 클라우드 스토리지 (Cloud Storage)
- 클라우드 스토리지는 대규모 데이터를 저장하고 관리하기 위해서 클라우드 서비스 어제공 업체가 사용하는 서비스입니다. 업체가 제공하는 만큼 보안, 안정성이 부각되며, 사용자는 웹을 통해서 언제 어디서나 데이터에 접근 가능합니다.
