[Javascript] 브라우저의 indexedDB 및 WebSQL을 손쉽게 사용할 수 있는 localForage 라이브러리

개인 프로젝트로 firebase + react + (필요에 따라 node 호스팅?)를 이용해 브라우저 기반 스트리밍 mp3 플레이어를 개발해보려고 하고 있다. 아직 본작업은 아니고 될지 안될지 따져보는 중이다.

 

음악 파일을 캐싱하고싶은데 localStorage에 저장하려니 크기제한이 있어 실패했다. indexedDB는 써본적이 없어 모질라 개발자 홈페이지에서 확인하던 중, indexedDB를 쉽게 사용할 수 있는 라이브러리를 소개하길래 한번 찾아가 보았다.

 

localForage/localForage: 💾 Offline storage, improved. Wraps IndexedDB, WebSQL, or localStorage using a simple but powerful API. (github.com)

localForage/localForage

2021년 2월1일 기준 무려 18.5k 의 star를 받은 경이로운 라이브러리이다.

사용법은 바닐라 javascript 에서 localStorage를 사용하는 것 만큼이나 간편했다.

 

아래는 firebase storage에 저장된 음악파일을 blob형식으로 내려받아 indexedDB에 저장시키는 소스코드이다. 테스트삼아 만들어본 소스이므로 동작시키게 하려면 사전작업이 꽤 걸리니 참고용으로 봐주길 바란다.

 

import React, { useEffect, useRef, useState } from "react";
import firebase from "firebase/app";
import localforage from "localforage";
import "firebase/storage";

import logo from './logo.svg';
import './App.css';

firebase.initializeApp({
  // firebase 프로젝트 config 설정영역
})

function App() {

  function getMusicFile() {
    const storage = firebase.storage();
    var storageRef = storage.ref();
    storageRef.child('음악파일.mp4').getDownloadURL().then((url) => {
      var xhr = new XMLHttpRequest();
      xhr.responseType = 'blob';
      xhr.onload = function(event) {
        const blob = xhr.response;
        console.log(blob);
        localforage.setItem("test", {
          "name":"음악파일.mp4",
          "file": blob});
      };
      console.log(url);
      xhr.open('GET', url);
      xhr.send();
    });
  }
  
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
        <video></video>
        <button onClick={getMusicFile}>getStorage</button>
      </header>
    </div>
  );
}

export default App;

 

아래는 결과이다.

 

 

 

잘 조정하면 어찌 만들 수 있을 것 같다.