basket.js – LocalStorage 에 script 캐싱/로딩해주는 자바스크립트

HTML5 에서 제공하는 웹 저장 기술중 하나인 localStorage 를 사용하여, 자바스크립트를 캐싱하고, 로딩해주는 자바스크립트로 basket.js 라는 간단하지만 (개념 증명정도의) 흥미로운 자바스크립트 오픈소스.

먼저 localStorage 를 간단히 언급하자면, HTML5 에서 추가된 저장기술 중 하나인데 브라우저마다 차이는 있지만 대략 5MB ?? 정도 제공을 해 주고요.  구글크롬을 쓰신다면 CTRL+SHIFT+I (도구-개발자도구) 에서 Resources 란에 보면 Databases 와 Session Storage 사이에, Local Storage 항목이 존재합니다. 그 영역에 저장되는 거죠.

자바스크립트 콘솔에서 직접 localStorage 를 접근해 보면, 아래 처럼 작동하구요.
> localStorage.setItem(“Name”, “rkJun”)
> localStorage.getItem(“Name”)
“rkJun”

basket.js 는 LocalStorage 를 활용하여, jQuery 같은 자바스크립트 라이브러리를 통째로 LocalStorage 영역에 저장하고 호출해서 이용하도록 자바스크립트로 구현해 놨습니다. 물론, 당연히 성능의 극대화를 끌어올리기 위해서구요. (시작은 트위터 -영문- 에서…) basket.js 소개페이지에는 jQuery , backboneJs, underScoreJs 를 담아놨습니다.
사용법은 간단합니다.

basket.require(‘js파일경로’) : 호출 (해당 js파일이 있는지 체크해서 localStorage 에 있으면 무시, 없으면 ajax 방식으로 가져와 localStorage 에 넣습니다. )

basket.remove(‘js파일경로’) : localStorage 에 제거
basket.add(‘js파일경로’) : localStorage 에 추가

물론 체인방식도 제공하고요.
basket.require(‘jquery.js’).require(‘underscore.js’).require(‘backbone.js’);

basket.require(‘jquery.js’).wait().require(‘jquery.plugin.js’)  를 통해, jquery.js 호출이 끝나고 나서 다음을 실행하도록 wait() 를 걸 수도 있습니다. jQuery plugin 을 실행하기 전에 jQuery 가 먼저 호출이 돼 있어야 하니까요.

다만, 이  basket.js 에서 캐싱을 위해 선택한 localStorage 가 고민끝에 선택한 건 아니라고 언급해 두며,  WE NEED TO KILL OFF THE LOCALSTORAGE API 라는 글도 링크걸려 있구요. (대략 localStorage 는 형편없고 후지다. IndexedDB 만이 대안이다 라고···.)

암튼 basket.js 의 성능 실험 자체가 꽤 흥미로워서, 소개해 봤습니다.