Chrome Extension 만들 때, Local Storage 보단 Chrome Storage 를 쓰자

 

Local Storage ?

사이트를 나가거나 이동을 해도 데이터가 유지될 필요가 있는 데이터들이 있다.

예를 들면, 다크 모드나 뒤로 가기 시 이전 페이지의 스크롤 위치를 기억한다던가 현재 탭을 명시적으로 보여주기 위한 상태 등등

위의 것들은 Redux, Zotai 등 전역 상태 관리 라이브러리를 이용해도 되지만 브라우저를 종료하면 전부 사라지기에 다음에도 기억하려면 네트워크 통신이 필요하다.

쓸데없이 통신할 필요가 없기에 그냥 Local Storage에 넣어 사용자가 임의로 쿠키 및 데이터를 제거하지 않는 이상, 정해진 크기를 초과하지 않는 이상 계속 저장하고 기억해서 사용할 수 있다.

 

Chrome Extension

크롬 익스텐션 환경에서만 사용할 수 있는 Chrome Stroage가 있다.

크롬 익스텐션을 쓸 때는 Local Storage를 굳이 사용할 필요가 없다! Chrome Storage를 쓰자.

그 이유는 대부분 상위호환이기 때문인데 비슷한 것들 먼저 얘기해 보자!

 

크기

Chrome 은 10MB, Local 은 5~10MB를 할당한다. 브라우저마다 다르지만 둘 다 크기 제한을 해제할 수 있어 크기면에서는 큰 차이 없다.

 

권한

// manifest.json
{
  ...
  "permissions": ["storage"]
  ...
}

Chrome Storage를 사용하려면 manifest.json 에 명시해야 한다.

 

1. 다양한 데이터 표현 가능

Local Storage는 문자열 값만 저장되기 때문에 프론트에서 stringify, parse 처리가 따로 필요하다.

하지만, Chrome Storage는 숫자, 배열, boolean 심지어 object나 json 형태도 저장된다.

 

2. 캐시 및 방문 기록 지워도 데이터 유지

브라우저에서 캐시 및 데이터 기록 지우면 Local Storage는 사라지지만, Chrome Storage는 지워지지 않는다.

시크릿모드에서도 저장된 설정은 유지된다.

 

3. 동기화

계정과 브라우저 간 데이터를 동기화할 수 있다!

브라우저에 종속되는 local storage와 달리 계정에 데이터가 붙어있어 다른 기기에서도 같은 환경을 유지할 수 있다.

오프라인일 때 로컬에 저장하다가 온라인 되면 다시 동기화시키는 sync 함수를 이용해 보자.

 

4. 그 외

• Storage Area Explorer - Chrome Storage 내부를 볼 수 있음 (확장 프로그램을 깔아야만 볼 수 있다는게 불편한 점?)
• 비동기로 작동해 훨씬 빠름
• 확장 서비스 워커는 Web Storage API를 못써서 Chrome Storage 이 유리함

확장 프로그램 주제에 따라 쓰면 될 것 같다.
밀도 있는 앱이 아니라면 자주 쓰던 Local Storage도 좋은 선택!

 

---

 

참고

chrome.storage  |  API  |  Chrome for Developers

크롬 익스텐션: chrome.storage API