웹 브라우저 로컬 저장소 종류
모든 웹 브라우저는 자신만의 저장소를 가지고 있으며, 웹사이트 방문시 일부 정보들을 저장하고 있다.
브라우저 저장소는 6가지 정도가 있으며,
쿠키부터 세션 그리고, 캐시 정보를 담고
사용자가 웹서비스를 편하게 이용하도록 하는데 목적이 있다.
단점이라면, 이 정보들이 쌓이면 웹 브라우저의 속도는 느려지고,
웹서비스의 이용이 조금은 불편할 수 있지만, 캐시정보를 지우면 해결된다.
웹 브라우저 로컬 저장소 종류
모든 컴퓨터는 메모리가 존재하고
웹 브라우저 또한 `로컬 저장소`라 불리는 자체 저장소가 존재한다.
인기있는 크롬부터 엣지 브라우저, 파이어폭스 등 거의 모든 브라우저는
거의 비슷한 로컬 저장소를 가진다.
로컬 저장소가 있기 때문에 우리는 나름의 쾌적한 인터넷을 할 수 있고,
한국 사람이라면 귀찮은 로그인을 자동으로 처리할 수 있다.
웹 브라우저의 로컬 저장소의 목적은
웹사이트를 사용하는 사용자로 하여금 빠르고 안정적인 서비스를 제공하기 위함이다.
그렇다면 궁금해 지는 것은
웹브라우저에서 사용하는 로컬저장소의 종류는 어떤 것이 있는가? 이다.
아래는 웹브라우저에서 제공하고 있는
로컬저장소의 종류를 목록으로 작성한 것이다.
일반적으로 알고 있는 것도 있고,
생소한 것도 있을 것이다.
- Cookie
- LocalStorage
- SessionStorage
- IndexedDB
- Cache Storage
- File System API
로컬저장소 보기 방법
웹브라우저가 가지고 있는 자체 로컬 저장소가 몇가지 있는 건 알았다.
저장소가 있다는 것은 어딘가에 데이터를 보관한다는 뜻인데
그 위치가 궁금할 수 있다.
웹브라우저 저장소의 위치는
`F12 개발자모드 > Application` 항목에 있다.
웹브라우저에서 제공하는 개발자모드는
개발자 뿐만 아니라 모든 사용자가 웹사이트의 상태와 구조를 파악할 수 있도록 만들어진 기능이다.
이것을 이용하면 여러가지 재미있는 것들을 볼 수 있다.
개발자 모드에서 로컬저장소를 볼 수 있는 과정은 다음과 같다.
- 웹브라우저를 실행한다.
- 단축키 F12 또는 Ctrl+Shift+I 를 클릭한다.
- 상단 메뉴의 Application 항목을 찾아 클릭한다.
- 좌측 메뉴의 Storage 항목을 확인한다.
좌 : 크롬 / 우 : 엣지 |
종류별 사용 목적
보통 전자기기의 메모리는 한두개 정도로 생각할 수 있지만,
사용 목적에 따라 여러가지가 존재한다.
하물며, 웹브라우저가 사용하는 자체적인 로컬 저장소도 위에 언급한대로
몇가지 존재한다.
예전부터 존재했던 것이기도 하지만,
웹브라우저 또한 기능이 수시로 업그레이드되면서 없어진 것도 있고, 새롭게 만들어진 것도 있다.
자체적인 로컬 저장소가 있지만,
이들의 목적은 단순하다.
그냥, 사용자로 하여금 웹서비스를 편하게 하기 위함이다.
( 그럼에도 여전히 불편함은 있다. )
Cookie / 작은 데이터
누구나 알고 있는 데이터이다.
이 쿠키 때문에 웹브라우저들은 보안이슈로 구설에 많이 올랐다.
그럼에도 지금도 자주 사용되는 것 중 하나이다.
`쿠키 ( Cookie )`는 웹브라우저에서 사용되는 아주 작은 데이터 조각이다.
형태는 `key-value pair`이다.
로그인 또는 쇼핑몰의 장바구니 같은 기능에 사용된다.
보통은 사용자 정보를 이용한 로그인 상태 유지와 함께 인증 도구로도 쓰인다.
쿠키 ( Cookie) 데이터는
웹브라우저의 `개발자모드 > Application > Storage > Cookie `
항목에서 쿠키 데이터를 볼 수 있다.
Local Storage / 웹브라우저의 영구적 데이터 저장소
뭐든 데이터는 임시적 또는 한시적으로 사용하는 것과 영구적으로 저장하고 사용할 것으로 구분된다.
`로컬저장소 ( Local Storage )`는 웹브라우저의 일정한 공간에
영구적으로 데이터를 저장하고 사용할 수 있는 곳을 의미한다.
저장되는 데이터는 `텍스트 문자열`이며 구조는 `key-value pair`형태를 가진다.
영구적으로 데이터가 저장되기 때문에
개인정보와 같은 민감한 정보는
사용하지 않도록 한다.
로컬저장소 ( LocalStorage ) 데이터는
웹브라우저의 `개발자모드 > Application > Storage > Local Storage`
항목에서 로컬저장소 데이터를 볼 수 있다.
Session Storage / 창 닫으면 삭제되는 일시적 저장 공간
웹브라우저 저장소에 영구적으로 저장되는 데이터가 있는 반면
일시적으로 사용중일 때만 저장되어 있는 데이터가 있다.
이것이 세션이고, 저장되는 곳은 `Session Storage`이다.
모든 프로그램들에 사용되는 데이터 중 일부는 일시적으로 필요할 수 있다.
과거 웹개발자들이라면 알 것인데,
세션 로그인을 할 경우 사용자가 로그인한 경우만 웹서비스 이용이 가능하다.
하지만, 웹브라우저의 탭 또는 창을 닫고 다시 웹서비스를 이용하려면 로그인을 해야 한다.
예를 들어, 인증이 필요한 경우만 웹서비스 이용이 가능하다면 `Session Storage`를 사용할 수 있다.
지금은 인증 뿐만 아니라 웹서비스를 이용하는 경우
사용자가 로그인한 경우에 필요한 일시적인 정보를 저장하고 사용되는 경우들에 사용된다.
지금과 같이 기능이 많아진 경우 인증 뿐만 아니라 이것저것 사용되기도 한다.
어차피 웹브라우저의 창이 닫히면 자동으로 삭제되기 때문.
IndexedDB / 로컬DB NoSQL 데이터베이스
사실 조사하면서 알았지만, 웹브라우저 또한 작은 데이터베이스를 가지고 있다.
과거 로컬DB라 알려진 것이다.
로컬DB는 없어지고, `IndexedDB`란 이름으로 업그레이드되었다.
`NoSQL`은 비정형 데이터를 다루는 데이터베이스이다.
대표적으로 MongoDB를 생각할 수 있다.
MySQL, MSSQL, Oracle과 같은 규칙이 있고, 정형화된 데이터베이스와는 다르게
규칙이 없는, 비정형화된 데이터를 데이터베이스처럼 다룰 수 있다.
즉, 웹브라우저에서 제공하는 `IndexedDB`는
MonogoDB 같은 툴을 사용하지 않아도 자바스크립트를 사용해
규칙없는 데이터를 가공하고, 조작하는 것이 DB처럼 사용할 수 있다는 것을 의미한다.
단지,
웹브라우저의 저장공간 내에서만 가능하다는 것에서 차이가 있다.
Cache Storage / 리소스 저장 공간
웹페이지에 존재하는 요소들 중 가장 많은 것이 `텍스트 문자열`일 것이며,
`리소스`란 존재가 있다.
리소스는 모든 웹페이지를 구성하는 모든 것을 의미한다.
작게는 텍스트 문자열부터 크게는 이미지부터 사운드 파일, 스크립트와 같은 모든 것을 의미한다.
웹페이지는 사용자에 빠른 웹서비스를 제공하기 위한 `리소스`를 저장한다.
그리고, 이후 같은 주소로 이동하거나 또는 웹파일을 실행하면 웹브라우저에서 결과를 볼 수 있다.
신기한 것은 인터넷이 끊긴 후이다.
리소스파일을 다운로드 받았기에 인터넷 연결이 되지 않아도
인터넷에 연결된 것처럼 보인다.
장점일 수 있지만, 단점일 수도 있는 부분이 있다.
리소스 파일을 다운로드 받았기에 다음에 웹서비스 이용시 빠른 편의성이 생길 수 있지만,
다운로드 받은 리소스들에 문제가 생긴다면 웹서비스 이용에 문제가 생긴다.
이 때 `캐시 삭제`를 하도록 권유한다.
다운로드 받은 모든 리소스 캐시 파일을 모두 삭제한 후,
리소스 파일을 다시 다운로드 받도록 하여 정상적인 웹서비스를 이용할 수 있도록 하는 것이다.
File System API / 웹에서 파일과 폴더에 접근하기
네이버 블로그 등의 웹서비스를 이용하면 `파일업로드` 기능을 사용할 수 있다.
파일업로드 버튼을 클릭하면 내 컴퓨터의 폴더에 접근하고 파일을 선택할 수 있다.
간단하게 보면 웹브라우저 또한 내 컴퓨터의 파일들과 폴더에 접근할 수 있다는 것을 알 수 있다.
다만,
웹브라우저라는 보안적인 특성이 워낰에 많기 때문에
해당 기능을 이용하려면 `사용자 동의`가 필요하다.
굳이 이런 기능이 필요할까 싶지만,
사내 인트라넷 또는 ERP, MES 등과 같은 업무 프로그램의 경우
파일관리를 위한 기능에 필요할 수도 있다.
유료의 라이브러리를 사용하지 않아도
웹에서 파일탐색기 같은 기능을 만들 수도 있다.
다만, `사용자 동의`문구가 나타나는 것은 어쩔 수 없다.
댓글
댓글 쓰기