JavaScript+IndexedDB实现留言板：客户端存储数据
之前看到贴友有问：用js怎么实现留言板效果。当时也写了一个，但是没有实现数据存储：http://www.ido321.com/591.html
现在将之前的改写一下，原来的HTML布局不变，为了防止Google调整字体,在原来的css中加入一个样式
body{
20px;
none;
}
在google中调整字体，可以见此文：http://www.ido321.com/652.html 有评论说不行，但是LZ在这个实例中测试了，是可以的
重点是js，完整的js代码修改如下：
1:
var db;
var arrayKey=[]
var openRequest;
var lastCursor;
6:
var indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB || window.msIndexedDB;
8:
function init()
{
//打开数据库
);
//只能在onupgradeneeded创建对象存储空间
function(e)
{
);
var thisDb = e.target.result;
))
{
);
/*
*创建对象存储空间，第一个参数必须和打开数据库的第一个参数一致
*设置键名是id,并且可以自增.
*autoIncrement默认是false,keyPath默认null
*/
true });
/*
*创建索引
*第一个参数是索引名,第二个是属性名,第三个设置索引特性
*/
false });
}
}
34:
function(e)
{
//e.target.result返回一个数据库实例
db = e.target.result;
event)
{
event.target.errorCode);
event.target);
};
))
{
);
//读写方式开启事务
);
event)
{
};
event)
{
// 错误处理
event);
};
);
59:
//得到messageIndexDB的objectStore对象
);
62:
//游标查询
event)
{
//event.target.result获取存储空间的下一个对象
event.target.result;
var flag=0;
69:
//判断是否存在下一个对象,不存在是curson为null
if (cursor)
{
//获取键
//实际对象,一个Object实例
);
);
]);
msgDiv.id=cursor.key;
msgDiv.appendChild(msgTxt);
msgList.appendChild(msgDiv);
arrayKey.push(cursor.key);
flag++;
lastCursor=cursor.key;
//将游标下移一项
}
else
{
);
}
};
//错误处理
event){
event);
};
}
};
97:
event) {
// 对request.error做一些需要的处理！
);
};
102:
//焦点处理
function()
{
;
});
function()
{
;
});
112:
//添加数据
function()
{
).value;
).value;
:content}];
120:
);
event)
{
};
event)
{
event);
};
//得到messageIndexDB的objectStore对象
);
objectStore.add(messageIndexDB);
event)
{
event.target.result;
var key;
null)
{
key=cursor.key;
lastCursor=key;
}
else
{
key=++lastCursor;
}
);
);
msgDiv.id=key;
+content);
msgDiv.appendChild(msgTxt);
msgList.appendChild(msgDiv);
arrayKey.push(key);
+key);
console.dir(messageIndexDB);
}
});
//删除
function()
{
if(arrayKey.length==0){
);
}
else
{
);
event)
{
};
170:
event)
{
event);
};
//得到messageIndexDB的objectStore对象
);
var removeKey=arrayKey.shift();
//获取key
var getRequest=objectStore.get(removeKey);
function(e)
{
var result =getRequest.result;
console.dir(result);
}
//删除key
var request=objectStore.delete(removeKey);
function(e)
{
);
};
function(e)
{
, e);
};
//隐藏要删除的元素
;
}
});
}
false);
要注意一点的是，在创建对象存储空间的时候，必须在openRequest.onupgradeneeded 中创建，否则出错
FF4+，和google支持IndexedDB，IE10+据说支持，但LZ测试了，不支持，有错误还请指正。
由于IndexedDB不能实现共享，所以每个客户端打开时IndexedDB保存的数据不一致,LZ是在Google中测试的，打开控制台，查看数据如下
添加留言：
删除留言: