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 中创建，否则出错
添加留言：
删除留言:
JavaScript+IndexedDB实现留言板：客户端存储数据的更多相关文章
- HTML5学习笔记之客户端存储数据方法：localStorage(),sessionStorage()
HTML5提供了两种在客户端存储数据的新方法: localStorage():没有时间限制的数据存储 sessionStorage():针对一个session的数据存储 下面的一个例子用localSt ...
- HTML5 客户端存储数据的两种方式
HTML5 提供了两种在客户端存储数据的新方法: localStorage - 没有时间限制的数据存储 sessionStorage - 针对一个 session 的数据存储 之前,这些都是由 coo ...
- HTML5中两种方法实现客户端存储数据
HTML5 提供了两种在客户端存储数据的新方法: localStorage - 没有时间限制的数据存储 sessionStorage - 针对一个 session 的数据存储 之前,这些都是由 coo ...
- HTML5在客户端存储数据的新方法——localStorage
HTML5在客户端存储数据的新方法--localStorage localStorage作为HTML5本地存储web storage特性的API之一,主要作用是将数据保存在客户端中,而客户端一般是指上 ...
- JavaScript中离线应用和客户端存储（cookies、sessionStorage、localStorage）
一.离线应用 所谓离线web应用,就是在设备不能上网的情况下仍然可以运行的应用. 开发离线web应用需要几个步骤:首先,确保应用知道设备是否能上网,以便下一步执行正确的操作:然后,应用还必须能访问一定 ...
- javaScript简单的留言板
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- 【JavaScript】离线应用与客户端存储
一.前言 这章非常重要,由于之后需要负责平台手机APP的日后维护,如何让用户在离线状态下正常使用,以及联网后的数据合并变得非常重要. 二.内容 离线检测 navigator ...
- HTML 客户端存储
在客户端存储数据 HTML5 提供了两种在客户端存储数据的新方法: localStorage - 没有时间限制的数据存储 sessionStorage - 针对一个 session 的数据存储 之前, ...
- 客户端存储 API
介绍两个在客户端存储数据的 API localStorage与sessionStorage 两个都是window对象的属性,利用这两个属性,可以在客户端存储一些数据 相比cookie,这种存储方式的优 ...
随机推荐
- 解决服务器断电导致mysql数据库无法启动
1.找到mysql数据库目录下的*.ini这个配置文件2.复制配置文件到桌面,当作备份3.打开配置文件,在配置文件里加上innodb_force_recovery=6这句,保存,然后重启服务器4重启完 ...
- spoj 346
当一个数大于等于12 那分别处以2, 3, 4之后的和一定大于本身 但是直接递归会超时 然后发现有人用map存了 膜拜..... #include <cstdio> #i ...
- 1028-Digital Roots
描述 The digital root of a positive integer is found by summing the digits of the integer. If the resu ...
- HDU1465+递推
经典的信封装信问题 f[ n ] = ( n-1 ) * ( f[ n-1 ]+f[ n-2 ] ) #include<stdio.h> #include<string.h> ...
- OpenStack 部署运维实战
http://www.ibm.com/developerworks/cn/cloud/library/1408_zhangxl_openstack/#icomments 本文为您介绍了网易公司基于 O ...
- js常用函数（不断添加中。。。）
/************************************************* Function: getColor Description: 根据输入的数字返回一个颜色值 In ...
- java：I/O 往原文件追加内容
原来txt内容: "我要添加内容" import java.io.*; class Test { public static void main(String[] args) { ...
- 转：C语言宏定义时#(井号)和##(双井号)的用法
转自:http://www.cnblogs.com/welkinwalker/archive/2012/03/30/2424844.html#2678295 #在英语里面叫做 pound 在C语言的宏 ...
- Java API ——String类
1.String类概述 · 字符串是由多个字符组成的一串数据(字符序列),也可以看成是一个字符数组. · 字符串字符值“abc”也可以看成是一个字符串对象. · 字符串是常量,一旦被赋值,就不能被改变 ...
- Eclipse修改编码后乱码解决
Eclipse用了一段时间,都是用的gbk编码的,突然想要规范下,强迫症犯了,于是将在Window->Preference->Appearances->Workspace修改Text ...