js 文件系統API操做示例

最近有個需求是：自動抓取某網站登陸頁面的驗證碼圖片並保存，抓取n次。使用chrome插件來實現，其中使用到了js操做文件系統的api，特將代碼記錄下來，以備查閱。

PS:第一次使用js文件系統的api，百度了好久不少文章，大部分文章都很詳細的解釋介紹了api具體某個對象、方法的使用，可是不多有所有代碼從零到功能實現的所有代碼貼出，致使我這個新手一頭霧水，甚至在文件保存完後，去哪裏看保存的文件這個問題上都折騰了一兩個小時。正是這些所謂的基礎的東西反而由於沒有人介紹致使不少無用功。此處貼出所有的代碼，但願少走彎路。

如下是chrome插件的content.js的所有代碼：

  1 $(function(){
  2     if(window.location.href.indexOf('www.***.com/logout.action')!=-1 || window.location.href.indexOf('www.***.com/logon.action')!=-1){//登陸頁，示例隱藏了真實地址，避免沒必要要的糾紛
  3         saveImg();
  4     }
  5 });
  6 /**
  7 * 保存圖片的方法
  8 */
  9 function saveImg(){
 10     var count = 0;
 11     var max = 100;//修改max的值定義須要抓圖的張數
 12     var intev = setInterval(function(){
 13             window.requestFileSystem = window.requestFileSystem || window.webkitRequestFileSystem;
 14             window.requestFileSystem(window.TEMPORARY, 5*1024*1024, initFS, errorHandler);//申請文件系統，將initFS方法做爲文件處理的方法，方法回調時會見文件系統對象fs做爲參數傳入
 15             count ++;
 16             if(count > max){//抓夠張數後中止
 17                 clearInterval(intev);
 18             }
 19         },5000);//每5秒刷新一張圖
 20 }
 21 /**
 22 * 點擊驗證碼，刷新驗證碼並返回驗證碼的值，該網站使用的本地js生成的驗證碼，驗證邏輯也是在本地js中完成，插件爲gVerify.js
 23 */
 24 function refreshImg(){
 25     var img = $('#verifyCanvas');
 26     $(img).click();
 27         //由於chrome插件和原網頁的js運行環境不能相互訪問（但插件js能夠訪問員網頁的dom），使用向原網頁插入script並在script中執行「將原網頁js環境的變量綁定到頁面dom節點後再訪問」的辦法獲取值。
 28     var script = document.createElement('script');
 29         script.type = 'text/javascript';
 30         script.innerHTML = "document.body.setAttribute('code', verifyCode.options.code);";
 31         document.head.appendChild(script);
 32         document.head.removeChild(script);
 33         var code = document.body.getAttribute('code');
 34         console.log(code);
 35         return code;
 36 }
 37 /**
 38 *文件處理方法，注意文件系統不一樣於操做系統的本地文件系統，只是瀏覽器運行環境中的一個虛擬的沙箱中的文件系統。在本地文件系統中沒法搜索、查看到文件，查看文件的辦法：瀏覽器輸入地址查看（中間是網站的域名，每一個網站的文件系統相互獨立）filesystem:https://www.***.com/temporary/
 39 */
 40 function initFS(fs){
 41     createDir(fs.root, '/img/'.split('/'));//建立目錄
 42     var img_code = refreshImg();
 43         //寫文件
 44     fs.root.getFile('/img/'+img_code + '.png', {create: true, exclusive: true}, function(fileEntry) {
 45         fileEntry.createWriter(function(fileWriter) {
 46             fileWriter.onwriteend = function(e) {
 47               console.log("Write successfully");
 48             };
 49             fileWriter.onerror = function(e) {
 50               console.log("Write error!");
 51             };
 52             var img_base64_url = $('#verifyCanvas')[0].toDataURL('image/png');//獲取圖譜的base64地址
 53             var content = base64ToBinary(img_base64_url);
 54             var bob = new Blob([content]);
 55             fileWriter.write(bob);//查看文件地址：瀏覽器輸入filesystem:https://www.yqt365.com/temporary/
 56         });
 57     }, errorHandler);
 58 }
 59 /**
 60 *異常處理
 61 */
 62 function errorHandler(err){
 63  var msg = 'An error occured: ';
 64 
 65   switch (err.code) {
 66     case FileError.NOT_FOUND_ERR:
 67       msg += 'File or directory not found';
 68       break;
 69 
 70     case FileError.NOT_READABLE_ERR:
 71       msg += 'File or directory not readable';
 72       break;
 73 
 74     case FileError.PATH_EXISTS_ERR:
 75       msg += 'File or directory already exists';
 76       break;
 77 
 78     case FileError.TYPE_MISMATCH_ERR:
 79       msg += 'Invalid filetype';
 80       break;
 81 
 82     default:
 83       msg += 'Unknown Error';
 84       break;
 85   };
 86 
 87  console.log(msg);
 88 }; 
 89 /**
 90 *建立目錄
 91 */
 92 function createDir(rootDir, folders) {
 93   rootDir.getDirectory(folders[0], {create: true}, function(dirEntry) {
 94     if (folders.length) {
 95       createDir(dirEntry, folders.slice(1));
 96     }
 97   }, errorHandler);
 98 };
 99 /**
100 * 看方法名稱都懂啦
101 */
102 function base64ToBinary(imgUrl) {
103   var BASE64_MARKER = ';base64,';
104   var base64Index = imgUrl.indexOf(BASE64_MARKER) + BASE64_MARKER.length;
105   var base64 = imgUrl.substring(base64Index);
106   var raw = window.atob(base64);
107   var rawLength = raw.length;
108   var array = new Uint8Array(new ArrayBuffer(rawLength));
109 
110   for (i = 0; i < rawLength; ++i) {
111     array[i] = raw.charCodeAt(i);
112   }
113   return array;
114 }
115 
116