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创建对象存储空间

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:                  *创建对象存储空间，第一个参数必须和打开数据库的第一个参数一致

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);

要注意一点的是，在创建对象存储空间的时候，必须在openRequest.onupgradeneeded 中创建，否则出错



FF4+，和google支持IndexedDB，IE10+据说支持，但LZ测试了，不支持，有错误还请指正。
由于IndexedDB不能实现共享，所以每个客户端打开时IndexedDB保存的数据不一致,LZ是在Google中测试的，打开控制台，查看数据如下



添加留言：



删除留言:



来源：http://www.ido321.com/660.html