<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>创建数据库和初始值</title>
<script src="jquery-1.10.2.min.js"></script>
<script>
$(function () {
window.indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;
if (!window.indexedDB) {
alert("您的浏览器不支持indexedDB");
}
//要新增的数据array
const customerData = [
{name: "eileen", adress: "上海市", tel:"021" },
{name: "brian", adress: "南京市", tel:"025" }
];
//打开数据库
var req = window.indexedDB.open("MyDatabase");
req.onsuccess = function (evt) {
db = this.result;
alert("openDb DONE");
};
req.onerror = function (evt) {
alert("openDb:", evt.target.errorCode);
};
//onupgradeneeded事件
req.onupgradeneeded = function(event) {
var db = event.target.result;
//创建objectStore
var objectStore = db.createObjectStore("customer", { keyPath: "user_id", autoIncrement : true });
objectStore.createIndex("name", "name", { unique: false });
objectStore.createIndex("address", "address", { unique: false });
objectStore.createIndex("by_tel", "tel", { unique: false });
//新增数据到objectStore
for (var i in customerData) {
objectStore.add(customerData[i]);
}
};
})
</script>
</head>
<body>
</body>
</html>
相关推荐
在Windows 8环境中，IndexedDB被集成在HTML5标准中，允许UWP（Universal Windows Platform）应用利用这项技术。开发者可以通过JavaScript API与IndexedDB交互，创建、读取、更新和删除数据。Windows 8的API提供了一...
这个压缩包"html5数据库运用.rar"显然关注的是HTML5中的离线数据库技术，通常称为Web Storage，特别是IndexedDB。 Web Storage包括两种类型：localStorage和sessionStorage。localStorage用于持久化的数据存储，而...
5. **IndexedDB**：现代浏览器支持的离线存储解决方案，可以用来缓存大量数据，但同样需要后端服务进行数据库操作。 在提供的文件中，"jsaccess.html"可能是展示如何在HTML页面中编写JavaScript代码来与Access...
在Android上实现本地通讯录访问，需要使用HTML5的Web SQL Database或IndexedDB来存储通讯录数据，同时利用PhoneGap或Cordova这样的框架将JavaScript API与Android原生API桥接。PhoneGap提供了一个名为`contacts`的...
5. Web Storage和IndexedDB：提供本地存储机制，替代传统的cookies，提高了数据存储和检索效率。 6. Web Workers和Web SQL：通过Web Workers实现后台处理，提升网页性能；Web SQL提供了离线数据库存储功能。 二、...
6. 存储机制：`localStorage`和`sessionStorage`提供本地数据存储，`WebSQL`和`IndexedDB`则提供了更高级的数据库功能。 7. Web Workers和Web Sockets：实现后台处理和实时双向通信，提升网页应用性能。 二、HTML5...
为了更好地理解和实践，你可以参考提供的PDF文档《CRUD-Operations-in-IndexedDB-using-JsStore.pdf》以及下载链接中提供的示例代码。这将帮助你深入学习和掌握使用JsStore进行IndexedDB操作的技术。
IndexedDB则是基于键值对的数据库，可以存储大量结构化数据。 七、Web Workers和Web Storage Web Workers允许多线程处理，提高网页性能，尤其是在执行复杂计算时。Web Storage分为sessionStorage和localStorage，为...
6. IndexedDB：提供非关系型数据库，用于存储大量结构化数据。 四、HTML5的学习路径 1. 学习HTML5基础语法和新元素，理解其语义化意义。 2. 探索Canvas和SVG，掌握基本绘图技巧。 3. 深入理解表单控件和验证机制，...
- **本地存储**：提供更大的存储空间，如Web Storage（localStorage和sessionStorage），以及WebSQL和IndexedDB数据库，增强了数据存储和检索能力。 - **离线应用**：通过AppCache实现离线存储，使得应用在无网络...
- **IndexedDB** 是一种更为复杂的数据库存储机制，可以存储大量数据并提供索引功能。 #### 5. Canvas与SVG - **Canvas** 允许脚本动态渲染图形，广泛应用于图表绘制和游戏开发。 - **SVG** 用于定义矢量图形，相比...
4. localStorage或IndexedDB：用于存储用户数据，如游戏进度、得分等，使得游戏可以在用户离开后再恢复。 5. 异步通信（AJAX）：实现游戏的实时更新，如排行榜、成就系统等与服务器的交互。 6. 微信JS-SDK：微信提供...
- **IndexedDB**：一种客户端数据库技术，允许存储大量结构化数据。 - **Application Cache**：通过指定缓存清单文件，可以让网页在离线状态下依然可以访问。 综上所述，HTML5不仅仅是HTML的一个新版本，它还代表了...
6. **本地存储**：HTML5的Web SQL数据库和IndexedDB提供了本地数据存储解决方案，容器需要支持这些技术并处理相应的数据操作。 标签“源码”和“工具”提示我们可能还会涉及实际的代码示例或使用的开发工具。在开发...
- `IndexedDB`提供数据库存储，支持复杂查询操作。 7. 语义化： HTML5强调语义化，如`<main>`, `<details>`, `<summary>`等标签，使得内容更易于被搜索引擎抓取，同时对辅助技术友好。 8. CSS3和HTML5的结合： ...
此外，还引入了`WebSQL`和`IndexedDB`数据库，用于更复杂的数据存储和检索。 3. **离线应用**：HTML5的离线存储特性允许开发离线应用，即使在无网络连接的情况下，用户也能访问部分应用功能，并在重新连接后进行数据...
**IndexedDB**：提供了一个用于存储复杂数据的数据库接口，适用于大规模的数据处理。 ##### 六、绘图与图形功能 - **Canvas**：提供了在网页上绘制图像的能力，适用于动态图像和游戏开发。 - **SVG**：可缩放矢量...
此外，还有Web Audio API用于处理音频，WebSocket用于实时通信，Web Storage和IndexedDB用于数据存储，使得HTML5游戏具备了与原生应用相媲美的性能和体验。 【微信平台】 微信是中国最流行的即时通讯应用之一，其...
值得注意的是，HTML5的引入不仅限于结构和表现，还包括了对离线存储（Web Storage）、本地数据库（Web SQL或IndexedDB）和Web Workers等功能的支持，这些特性使得网站可以提供更丰富的功能，如离线阅读、数据缓存和...
`Web SQL Database` 和 `Indexed DB` 则允许在用户设备上创建本地数据库，以实现离线数据访问。`Application Cache` 功能则能缓存常用网页内容，提高加载速度。 在交互性方面，HTML5 引入了 `WebSocket`，实现了...