Indexed DB와 Cache

Web Storage??

필자는 Final Project를 진행하면서 DB로 가는 트래픽이 필요 없는 데이터들을 어떻게 저장할 것이고? 효율적으로 관리할 수 있는 방안을 고민했다.
해결 방안은 Local Storage, Indexed DB,In-Memory(Redis) 방안이 있었다.
Redis의 추상적인 개념은 저번에 정리했지만 우리는 Client단에서의 Local Storage와 Indexed DB에 정리하고자 한다.

-->Local Storage와 Session Storage의 차이

로컬 스토리지와 세션 스토리지의 차이점은 데이터의 영구성입니다. 로컬 스토리지의 데이터는 사용자가 지우지 않는 이상 계속 브라우저에 남아 있습니다. 하지만 세션 스토리지의 데이터는 윈도우나 브라우저 탭을 닫을 경우 제거됩니다. 지속적으로 필요한 데이터(자동 로그인 등)는 로컬 스토리지에 저장하고, 잠깐 동안 필요한 정보(일회성 로그인 정보라든가)는 세션 스토리지에 저장하면 되겠습니다.

그럼 어떤 것을 쓰는가??

Local Storage에는 다양한 종류가 있다. 하지만 1가지와 indexed DB를 추천한다. 이유는 호환성, 보안, 성능 등 다양한 이유가 있지만.. 구글 개발자가 추천한 2가지를 활용하도록 하자!! 선배님이니까?!

Indexed DB?

Indexed DB와 Local Storage의 차이는 무엇인가여???

• IndexedDB 많은 데이터를 저장하기 하고, 이를 Index 를 이용하여, 빠르게 검색할 수 있게 설계 되었다.

• Storage 인 Local Storage 와 Session Storage 는 최대 10MB 만 저장이 가능하며, 오직 String 형태만 저장이 가능하다.

• IndexedDB 는 javascript 가 이해하는 어떠한 값이라도 모두 저장할 수 있다.

---

Indexed DB 특징은 아래와 같다.
1. 많은 양의 구조화된 데이터를 클라이언트에 저장할 수 있다.
2. 브라우저마다 편차는 있지만, 보통 HDD 용량의 50% 이다.(Local Storage의 용량은 겨우 10MB이다.)
3. Javascript 기반의 객체지향 데이터베이스이다. 즉, Javascript가 인식할 수 있는 자료형과 객체를 저장할 수 있다!
4. 트랜잭션을 사용하며 Key-Value 데이터베이스이다. IndexedDB는 비동기 API이다.

위와 같은 특징으로 주로 개인의 화면에게 오래 남아 있으며 저장될 데이터들은 대부분 Indexed DB를 활용한다. 예를 들면, 프로필 사진, 마지막으로 시킨 주문 내역, 나의 쇼핑 장바구니, 풀고있던 문제 리스트 등 다양하게 활용가능하다.
하지만 기억해야할 것 Indexed DB는 우리가 알고 있는 인메모리 DB(Redis)처럼 다른 클라이언트들과 실시간 공유할 수 있지않다. 만약 원한다면 API를 짜서 보내는 것은 가능하다.

Indexed DB 사용하기
https://velog.io/@xcv3549/IndexedDB%EC%97%90-%EB%8C%80%ED%95%B4-%EC%95%8C%EC%95%84%EB%B3%B4%EC%9E%90

Cache Storage API

Cache Storage API는 Local Storage의 한가지 유형이다. 주로 네트워크에서 받아온 리소스나 사진 파일 같은 것을 저장하기 위해 쓴다. 여기서 의문이 생길 것이다. Indexed DB 쓰지 왜????
Cache Storage API의 차별점은 바로 데이터를 다른 클라이언트와 공유가 가능하다는 것이다. 하지만 위에서 말한 것처럼 Local storage는 String의 자료형만 가지고 10MB의 제한이 걸려있다. 그러므로 공용으로 쓰이는 간단한 사진이나 text를 저장하는데 유용하다. 예를 들어) 좋아요, 조회수 등

마지막으로 정리하며

블로그를 작성하면서 알게되었는데, 요새 대기업과 개발자들은 Local storage의 활용을 줄이라고 한다고 들었다. Redis와 같은 좋은 In Memomry DB가 있어서 그런것인가??라는 의문이 든다. 왜 기업들에서 Redis를 활용할 줄 아는 자를 우대하는지 이해가 간다....