JavaScript+IndexedDB實現留言板：用戶端儲存資料

JavaScript+IndexedDB實現留言板：用戶端儲存資料

之前看到貼友有問：用js怎麼實現留言板效果。當時也寫了一個，但是沒有實現資料存放區：http://www.ido321.com/591.html

現在將之前的改寫一下，原來的HTML布局不變，為了防止Google調整字型,在原來的css中加入一個樣式

   1: body{

   2:     font-size: 20px;

   3:     -webkit-text-size-adjust:none;

   4: }

在google中調整字型，可以見此文：http://www.ido321.com/652.html 有評論說不行，但是LZ在這個執行個體中測試了，是可以的

重點是js，完整的js代碼修改如下：

   1:

   2:     var db;

   3:     var arrayKey=[]

   4:     var openRequest;

   5:     var lastCursor;

   6:

   7:     var indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB || window.msIndexedDB;

   8:

   9:     function init()

  10:     {

  11:         //開啟資料庫

  12:         openRequest = indexedDB.open(messageIndexDB);

  13:         //只能在onupgradeneeded建立Object Storage Service空間

  14:         openRequest.onupgradeneeded = function(e)

  15:         {

  16:             console.log(running onupgradeneeded);

  17:             var thisDb = e.target.result;

  18:             if(!thisDb.objectStoreNames.contains(messageIndexDB))

  19:             {

  20:                 console.log(I need to create the objectstore);

  21:                 /*

  22:                  *建立Object Storage Service空間，第一個參數必須和開啟資料庫的第一個參數一致

  23:                  *設定鍵名是id,並且可以自增.

  24:                  *autoIncrement預設是false,keyPath預設null

  25:                  */

  26:                 var objectStore = thisDb.createObjectStore(messageIndexDB, { keyPath: id, autoIncrement:true });

  27:                 /*

  28:                  *建立索引

  29:                  *第一個參數是索引名,第二個是屬性名稱,第三個設定索引特性

  30:                  */

  31:                 objectStore.createIndex(name, name, { unique: false });

  32:             }

  33:         }

  34:

  35:         openRequest.onsuccess = function(e)

  36:         {

  37:             //e.target.result返回一個資料庫執行個體

  38:             db = e.target.result;

  39:             db.onerror = function(event)

  40:             {

  41:               alert(資料庫錯誤:  + event.target.errorCode);

  42:               console.dir(event.target);

  43:             };

  44:             if(db.objectStoreNames.contains(messageIndexDB))

  45:             {

  46:                 console.log(contains messageIndexDB);

  47:                 //讀寫方式開啟事務

  48:                 var transaction = db.transaction([messageIndexDB],readwrite);

  49:                 transaction.oncomplete = function(event)

  50:                 {

  51:                     //  console.log(All done!);

  52:                 };

  53:                 transaction.onerror = function(event)

  54:                 {

  55:                     // 錯誤處理

  56:                     console.dir(event);

  57:                 };

  58:                 var content= document.querySelector(#content);

  59:

  60:                 //得到messageIndexDB的objectStore對象

  61:                 var objectStore = transaction.objectStore(messageIndexDB);

  62:

  63:                 //遊標查詢

  64:                 objectStore.openCursor().onsuccess = function(event)

  65:                 {

  66:                     //event.target.result擷取儲存空間的下一個對象

  67:                     var cursor = event.target.result;

  68:                     var flag=0;

  69:

  70:                     //判斷是否存在下一個對象,不存在是curson為null

  71:                     if (cursor)

  72:                     {

  73:                           console.log(cursor.key); //擷取鍵

  74:                           console.dir(cursor.value); //實際對象,一個Object執行個體

  75:                         var msgList= document.querySelector(#messageList);

  76:                         var msgDiv=document.createElement(div);

  77:                         var msgTxt = document.createTextNode(cursor.value[flag][name]+說：+cursor.value[flag][content]);

  78:                         msgDiv.id=cursor.key;

  79:                         msgDiv.appendChild(msgTxt);

  80:                         msgList.appendChild(msgDiv);

  81:                         arrayKey.push(cursor.key);

  82:                         flag++;

  83:                         lastCursor=cursor.key;

  84:                         cursor.continue();   //將遊標下移一項

  85:                     }

  86:                     else

  87:                     {

  88:                           console.log(Done with cursor);

  89:                     }

  90:                 };

  91:                 //錯誤處理

  92:                  objectStore.openCursor().onerror=function(event){

  93:                     console.dir(event);

  94:                 };

  95:             }

  96:         };

  97:

  98:         openRequest.onerror = function (event) {

  99:             // 對request.error做一些需要的處理！

 100:             console.log(your web may not support IndexedDB,please check.);

 101:         };

 102:

 103:         //焦點處理

 104:         document.querySelector(#message).addEventListener(focus,function()

 105:             {

 106:                 this.value = ;

 107:             });

 108:         document.querySelector(#name).addEventListener(focus,function()

 109:             {

 110:                 this.value = ;

 111:             });

 112:

 113:         //添加資料

 114:         document.querySelector(#btn1).addEventListener(click, function()

 115:         {

 116:             var content=document.querySelector(#message).value;

 117:             var name=document.querySelector(#name).value;

 118:             /*var address=document.querySelector(#address).value;*/

 119:             var messageIndexDB=[{name:name,content:content}];

 120:

 121:             var transaction = db.transaction([messageIndexDB], readwrite);

 122:             transaction.oncomplete = function(event)

 123:             {

 124:                // console.log(transaction complete);

 125:             };

 126:             transaction.onerror = function(event)

 127:             {

 128:                 console.dir(event);

 129:             };

 130:              //得到messageIndexDB的objectStore對象

 131:             var objectStore = transaction.objectStore(messageIndexDB);

 132:             objectStore.add(messageIndexDB);

 133:             objectStore.openCursor().onsuccess = function(event)

 134:             {

 135:                 cursor = event.target.result;

 136:                 var key;

 137:                 if(lastCursor==null)

 138:                 {

 139:                     key=cursor.key;

 140:                     lastCursor=key;

 141:                 }

 142:                 else

 143:                 {

 144:                     key=++lastCursor;

 145:                 }

 146:                 var msgList= document.querySelector(#messageList);

 147:                 var msgDiv=document.createElement(div);

 148:                 msgDiv.id=key;

 149:                 var msgTxt = document.createTextNode(name+說：+content);

 150:                 msgDiv.appendChild(msgTxt);

 151:                 msgList.appendChild(msgDiv);

 152:                 arrayKey.push(key);

 153:                 console.log(success add new record!key:+key);

 154:                 console.dir(messageIndexDB);

 155:             }

 156:         });

 157:         //刪除

 158:         document.querySelector(#delete).addEventListener(click, function()

 159:         {

 160:             if(arrayKey.length==0){

 161:                 console.log(no data to delete!);

 162:             }

 163:             else

 164:             {

 165:                 var transaction = db.transaction([messageIndexDB], readwrite);

 166:                 transaction.oncomplete = function(event)

 167:                 {

 168:                        //    console.log(transaction complete!);

 169:                 };

 170:

 171:                 transaction.onerror = function(event)

 172:                 {

 173:                   console.dir(event);

 174:                 };

 175:                  //得到messageIndexDB的objectStore對象

 176:                 var objectStore = transaction.objectStore(messageIndexDB);

 177:                 var removeKey=arrayKey.shift();

 178:                 //擷取key

 179:                 var getRequest=objectStore.get(removeKey);

 180:                 getRequest.onsuccess=function(e)

 181:                 {

 182:                     var result =getRequest.result;

 183:                     console.dir(result);

 184:                 }

 185:                 //刪除key

 186:                 var request=objectStore.delete(removeKey);

 187:                 request.onsuccess = function(e)

 188:                 {

 189:                   console.log(success delete record!);

 190:                 };

 191:                 request.onerror = function(e)

 192:                 {

 193:                   console.log(Error delete record:, e);

 194:                 };

 195:                 //隱藏要刪除的元素

 196:                 document.getElementById(removeKey).style.display=none;

 197:             }

 198:         });

 199:     }

 200:     window.addEventListener(DOMContentLoaded, init, false);

要注意一點的是，在建立Object Storage Service空間的時候，必須在openRequest.onupgradeneeded 中建立，否則出錯

 

FF4+，和google支援IndexedDB，IE10+據說支援，但LZ測試了，不支援，有錯誤還請指正。 由於IndexedDB不能實現共用，所以每個用戶端開啟時IndexedDB儲存的資料不一致,LZ是在Google中測試的，開啟控制台，查看資料如下

 

 

添加留言：

刪除留言: