JavaScript + IndexedDB Implement Message Board: the client stores data

JavaScript + IndexedDB Implement Message Board: the client stores data

I saw a friend who asked: how to implement the message board effect with js. At that time I also wrote a, but did not achieve data storage: http://www.ido321.com/591.html

Now let's rewrite the previous one. The original HTML layout remains unchanged. To prevent Google from adjusting the font, add a style to the original css.

   1: body{

   2:     font-size: 20px;

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

   4: }

Adjust the font in google, you can see this article: http://www.ido321.com/652.html has a comment said no, but LZ in this instance to test, it is OK

The focus is on js. The complete js Code is modified as follows:

   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: // open the database

  12:         openRequest = indexedDB.open(messageIndexDB);

13: // you can only create an object bucket in onupgradeneeded.

  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: * create an object storage space. The first parameter must be the same as the first parameter used to open the database.

23: * set the key name to id and auto-increment.

24: * The default value of autoIncrement is false, and the default value of keyPath is null.

  25:                  */

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

  27:                 /*

28: * Create an index

29: * The first parameter is the index name, the second parameter is the attribute name, and the third parameter is the index feature.

  30:                  */

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

  32:             }

  33:         }

  34:

  35:         openRequest.onsuccess = function(e)

  36:         {

37: // e.tar get. result returns a database instance

  38:             db = e.target.result;

  39:             db.onerror = function(event)

  40:             {

41: alert (Database Error: + event.tar get. errorCode );

  42:               console.dir(event.target);

  43:             };

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

  45:             {

  46:                 console.log(contains messageIndexDB);

47: // start the transaction in read/write mode

  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: // handle errors

  56:                     console.dir(event);

  57:                 };

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

  59:

60: // get the objectStore object of messageIndexDB

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

  62:

63: // cursor Query

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

  65:                 {

66: // event.tar get. result get the next object of the bucket

  67:                     var cursor = event.target.result;

  68:                     var flag=0;

  69:

70: // determine whether the next object exists. If it does not exist, curson is null.

  71:                     if (cursor)

  72:                     {

73: console. log (cursor. key); // obtain the key

74: console. dir (cursor. value); // actual Object, an Object instance

  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 (); // move the cursor down one item

  85:                     }

  86:                     else

  87:                     {

  88:                           console.log(Done with cursor);

  89:                     }

  90:                 };

91: // handle errors

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

  93:                     console.dir(event);

  94:                 };

  95:             }

  96:         };

  97:

  98:         openRequest.onerror = function (event) {

99: // handle request. error!

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

 101:         };

 102:

103: // focus Processing

 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: // Add data

 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: // get the objectStore object of messageIndexDB

 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 + Description: + 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: // Delete

 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: // get the objectStore object of messageIndexDB

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

 177:                 var removeKey=arrayKey.shift();

178: // obtain the key

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

 180:                 getRequest.onsuccess=function(e)

 181:                 {

 182:                     var result =getRequest.result;

 183:                     console.dir(result);

 184:                 }

185: // Delete the 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: // hide the element to be deleted

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

 197:             }

 198:         });

 199:     }

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

Note that when creating an object storage space, you must create it in openRequest. onupgradeneeded. Otherwise, an error occurs.

 

FF4 +, and google support IndexedDB, IE10 + is said to support, but LZ test, not supported, please correct if there is an error. Because IndexedDB cannot be shared, the data stored in IndexedDB is inconsistent when each client is opened. LZ is tested in Google. Open the console and view the data as follows:

 

 

Add message:

Delete message: