使用 JsStore 在 IndexedDB 中进行 CRUD 操作
使用 JsStore 在 IndexedDB 中创建、插入、选择、更新和删除数据
引言
在 IndexedDB 操作中遇到困难？想学习一种简单的技术来轻松执行 CRUD 操作吗？那么你来对地方了。祝贺你！！
我之前也遇到过同样的问题，直到我发现了一个名为 JsStore 的库。它是一个 IndexedDB 包装器，它为你提供了简单的类似 SQL 的 API，用于在浏览器中存储数据并执行其他数据库操作。
背景
你应该具备基本的知识
- HTML5
- CSS
- JavaScript
IndexedDB（可选）
Using the Code
安装 JsStore.js
- 从这里下载 JsStore - https://www.github.com/ujjwalguptaofficial/JsStore
- 转到 Dist/Latest 并将 JsStore 文件复制到你的项目目录中。
- 像对任何其他 js 文件一样，将该
script标签添加到你的 HTML 文件中。
创建数据库
数据库由多个表组成，表由多个列组成。JsStore 使用这种方法并创建数据库。所以首先，让我们创建一个包含一些列的表。
var TblStudent = {
Name: "Student",
Columns: [{
Name: "Id",
PrimaryKey: true,
AutoIncrement: true
},
{
Name: "Name",
NotNull: true,
DataType: "string"
},
{
Name: "Gender",
DataType: "string",
Default: 'male'
},
{
Name: "Country",
NotNull: true,
DataType: "string"
},
{
Name: "City",
NotNull: true
}
]
}
如代码所示，你可以定义约束，例如 autoincrement、datatype、default、notnull，就像在 SQL 中一样。
现在让我们创建一个 Database 对象。
var DataBase = {
Name: "Students",
Tables: [TblStudent]
}
现在，让我们将 database 对象代码片段包装在一个函数中，使其更简洁易用。
function getDatabase() {
var TblStudent = {
Name: "Student",
Columns: [{
Name: "Id",
PrimaryKey: true,
AutoIncrement: true
},
{
Name: "Name",
NotNull: true,
DataType: "string"
},
{
Name: "Gender",
DataType: "string",
Default: 'male'
},
{
Name: "Country",
NotNull: true,
DataType: "string"
},
{
Name: "City",
NotNull: true
}
]
}
var DataBase = {
Name: "Students",
Tables: [TblStudent]
}
return DataBase;
}
接下来要做的是在 IndexedDB 中创建数据库并获取连接
var DataBase = getDatabase();
DbConnection = new JsStore.Instance().createDb(DataBase);
上面的代码是创建数据库的一种方法，但你应该遵循 JsStore 推荐的代码，因为
var DbName = "Students";
JsStore.isDbExist(DbName, function (isExist) {
if (isExist) {
DbConnection = new JsStore.Instance(DbName);
onDbInitiated();
} else {
var DataBase = getDatabase();
DbConnection = new JsStore.Instance().createDb(DataBase);
}
});
推荐使用这种数据库创建方法，因为当你调用 'createDb' API 时，它会在浏览器中创建数据库，并计算和存储数据库的一些元数据。如果你调用该方法来创建数据库，它会再次创建这些元数据，这是不必要的。
你可以通过在浏览器中打开 应用程序 选项卡的 IndexedDB 部分来验证数据库是否已创建。
插入数据
JsStore 提供 insert API 将数据插入到表中。
var Value =
{
Name: "Alfred",
Gender: "Male",
Country: "New Jersey",
City: "Gotham"
};
DbConnection.insert({
Into: "Student",
Values: [Value]
}, function (rowsAdded) {
alert(rowsAdded + " rows Added");
}, function (error) {
console.log(error);
})
选择数据
使用 JsStore 从表中选择数据非常简单。它可以这样完成
DbConnection.select({
From: 'Student',
Where: {
Id: Number(StudentId)
}
}, function (results) {
console.log(results);
}, function (error) {
console.log(error);
});
SQL 操作，如 "IN"、"LIKE"、"BETWEEN"、"LIMIT" 等，也可以通过 JsStore 使用。
删除数据
在 JsStore 中删除与 Select 非常相似。
DbConnection.delete({
From: 'Student',
Where: {
Id: Number(studentId)
}
}, function (rowsDeleted) {
console.log(rowsDeleted + ' rows deleted');
}, function (error) {
console.log(error);
})
更新数据
表的数据可以更新为
var Value = {
Name: "Batman"
};
DbConnection.update({
In: 'Student',
Set: Value,
Where: {
Id: Number(StudentId)
}
}, function (rowsAffected) {
alert(rowsAffected + " rows Updated");
}, function (error) {
console.log(error);
})
关注点
JsStore 通过其 API 使 IndexedDB 的使用变得非常简单。请查看随附的演示，该演示使用 JsStore 在 IndexedDB 中执行 CRUD 操作。