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中测试的，打开控制台，查看数据如下
添加留言：
删除留言:
智能推荐
注意！
本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系我们删除。