当前位置：极客笔记 > JavaScript > JavaScript 精选笔记 > TaffyDB 一个用于浏览器的JavaScript数据库

TaffyDB 一个用于浏览器的JavaScript数据库

TaffyDB 一个用于浏览器的JavaScript数据库

TaffyDB是一个轻量且强大的内存数据库，可用于浏览器和服务器端应用程序。它是开源且免费使用的。在本教程中，我们将举几个示例来展示如何使用TaffyDB存储一些数据，对数据进行查询，并执行一些重要的操作。

让我们从一个简单的示例开始

我们从一个非常基本的示例开始，其中我们将创建一些数据，然后尝试在浏览器上打印出这些数据。

我们的第一步是拥有 TaffyDB . 为此，我们有不同的选择。最基础的选择是使用一个 URL，在这个 URL 上存在着 “taffydb.js” 文件的被压缩版本。

“taffydb.js” 的代码可以在这个 链接 上找到。我建议您打开这个链接，然后复制代码并将其粘贴到一个名为 “taffy.js” 的文件中。否则，您可以使用它的CDN。

现在我们已经解决了依赖问题，让我们专注于 “index.html” 文件，我们将在其中编写核心逻辑，当然是在 <script> 标签内。考虑下面显示的HTML代码。

示例

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TaffyDB</title>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/taffydb/2.7.3/taffy-min.js"></script>
    <script>
        let countries = TAFFY([{
            name: "India",
            state: "Uttar Pradesh",
            capital: "New Delhi",
        }, {
            name: "USA",
            state: "California",
            capital: "Washington DC",
        }, {
            name: "Germany",
            state: "Berlin",
            capital: "Berlin",
        }]);
        let countriesNames = [];
        countries().each(function(r) {
            countriesNames.push(r.name);
        });
        document.write(countriesNames);
    </script>
</head>
<body>
</body>
</html>

如果你在浏览器中运行上述代码，你应该期望看到以下输出。 在上述代码中，我们首先导入了”taffy.js”文件，然后我们创建了一个<script>标签，并放在<head>标签内部。在<script>标签内部，我们创建了一个TAFFY对象，在其中创建了一个对象的数组，其中包含具有不同属性的多个对象。 然后，我们遍历了变量 countries 的值，并为每个值将”name”属性的值放在一个名为”countriesName”的数组中。 如果你在浏览器中运行上述代码，你应该期望看到以下输出。

使用TaffyDB插入记录

在上面的示例中，我们创建了一个对象数组，并将其传递给了TIFFY方法。现在让我们专注于向数据中插入一个新对象，我们可以借助 insert() 方法来实现。在 insert() 方法内部，我们可以传递相同或不同的属性，根据我们的选择。 考虑下面显示的代码片段，我们可以使用它将数据添加到TaffyDB中的 countries 变量中。

countries.insert({
   name: "Brazil",
   state: "State of São Paulo",
   capital: "Brasília",
});```

示例

index.html

下面显示了更新的 index.html 代码。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TaffyDB</title>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/taffydb/2.7.3/taffy-min.js"></script>
    <script>
        let countries = TAFFY([{
            name: "India",
            state: "Uttar Pradesh",
            capital: "New Delhi",
        }, {
            name: "USA",
            state: "California",
            capital: "Washington DC",
        }, {
            name: "Germany",
            state: "Berlin",
            capital: "Berlin",
        }]);
        countries.insert({
            name: "Brazil",
            state: "State of São Paulo",
            capital: "Brasília",
        });
        let countriesNames = [];
        countries().each(function(r) {
            countriesNames.push(r.name);
        });
        document.write(countriesNames);
    </script>
</head>
<body>
</body>
</html>

如果在浏览器中运行上面的代码，则应该期望看到以下输出 –

使用TaffyDB执行查询

虽然我们在上面的示例中执行了一个查询，但让我们再次执行一个简单的查询，在这个查询中我们想要存储与我们的数据中首都和州具有相同值的国家的名字。

示例

index.html

请考虑下面显示的 index.html 代码。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TaffyDB</title>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/taffydb/2.7.3/taffy-min.js"></script>
    <script>
        let countries = TAFFY([{
            name: "India",
            state: "Uttar Pradesh",
            capital: "New Delhi",
        }, {
            name: "USA",
            state: "California",
            capital: "Washington DC",
        }, {
            name: "Germany",
            state: "Berlin",
            capital: "Berlin",
        }]);
        countries.insert({
            name: "Brazil",
            state: "State of São Paulo",
            capital: "Brasília",
        });
        let res = [];
        countries().each(function(r) {
            if (r.state === r.capital) {
                res.push(r.name)
            }
        });
        document.write(res);
    </script>
</head>
<body>
</body>
</html>

在上面的HTML代码中，我们使用each()方法遍历countries变量的所有值，然后将”capital”和”state”属性的值与它们进行比较。如果匹配，则将这些值放入数组中，最后将该数组打印到控制台中。

如果我们在浏览器中运行上述HTML文件，将在终端中得到以下输出。

现在让我们进行另一个查询，这次我们要打印字典顺序最小的国家的名称。从上面的示例数据中，最小的国家是”巴西”。考虑下面显示的HTML代码。

示例

index.html

考虑下面显示的index.html代码。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TaffyDB</title>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/taffydb/2.7.3/taffy-min.js"></script>
    <script>
        let countries = TAFFY([{
            name: "India",
            state: "Uttar Pradesh",
            capital: "New Delhi",
        }, {
            name: "USA",
            state: "California",
            capital: "Washington DC",
        }, {
            name: "Germany",
            state: "Berlin",
            capital: "Berlin",
        }]);
        countries.insert({
            name: "Brazil",
            state: "State of São Paulo",
            capital: "Brasília",
        });
        let res = countries().order("name").first().name;
        document.write(res);
    </script>
</head>
<body>
</body>
</html>

在上面的代码中，含有以下代码的行： countries().order(“name”).first().name ，是我们使用的一种技巧，称为 链式调用 ，其中多个方法被链接在一起。首先，我们按照 name 属性对数据进行排序，然后从这个排序后的数据中选择第一个元素，最后从该元素中提取 name 属性。 如果您在浏览器中运行上述HTML文件，您将在终端获得以下输出。

使用TaffyDB更新数据

使用 update() 方法可以更新TaffyDB中的数据。在此方法中，如果我们传递一个在对象中不存在的属性，则该属性将被添加；如果存在，则将更新该属性。

假设您想在对象中添加一个名为“India”的字段，并添加一个名为 financialCapital 的新属性：” Mumbai “。考虑下面显示的HTML代码。

示例

index.html

考虑下面显示的 index.html 代码。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TaffyDB</title>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/taffydb/2.7.3/taffy-min.js"></script>
    <script>
        let countries = TAFFY([{
            name: "India",
            state: "Uttar Pradesh",
            capital: "New Delhi",
        }, {
            name: "USA",
            state: "California",
            capital: "Washington DC",
        }, {
            name: "Germany",
            state: "Berlin",
            capital: "Berlin",
        }]);
        countries.insert({
            name: "Brazil",
            state: "State of São Paulo",
            capital: "Brasília",
        });
        countries({
            name: "India"
        }).update({
            financialCapital: "Mumbai"
        })
        countries().each(function(r) {
            if (r.name == "India") {
                document.write(r.financialCapital + "<br>")
            } else {
                document.write(r.capital + "<br>")
            }
        })
    </script>
</head>
<body>

为了验证我们添加的数据是否被添加到数据库中，我正在遍历对象，并且通过一个简单的“if-else”条件打印值。

如果在浏览器中运行上面的HTML文件，您将在终端中得到以下输出。

使用“！”运算符

通过使用“！”运算符，您可以在TaffyDB中编写复杂的查询。考虑下面显示的 index.html 代码，我正在尝试使用“！”运算符打印除了印度以外所有国家的名称。

示例

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TaffyDB</title>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/taffydb/2.7.3/taffy-min.js"></script>
    <script>
        let countries = TAFFY([{
            name: "India",
            state: "Uttar Pradesh",
            capital: "New Delhi",
        }, {
            name: "USA",
            state: "California",
            capital: "Washington DC",
        }, {
            name: "Germany",
            state: "Berlin",
            capital: "Berlin",
        }]);
        countries.insert({
            name: "Brazil",
            state: "State of São Paulo",
            capital: "Brasília",
        });
        countries({
            name: {
                "!is": "India"
            }
        }).each(function(r) {
            document.write(r.name + "<br>");
        })
    </script>
</head>
<body>
</body>
</html>

如果你在浏览器中运行上述的HTML文件，你会在终端中得到以下输出。

结论

在本教程中，我们使用多个示例来演示如何在TaffyDB中执行CRUD操作。

Camera课程

Camera API2 教程

API2 教程
Camera 性能教程

Perf 教程
Camera Native Framework 教程

Native FW 教程
Camera QCOM ISP 教程

ISP 教程
Camera QCOM Sensor 教程

Sensor 教程

Python教程

Python 教程

Python 教程
NumPy 教程

NumPy 教程
Django 教程

Django 教程

Java教程

Java 教程

Java 教程

Web教程

JavaScript 教程

JavaScript 教程
jQuery 教程

jQuery 教程
CSS 教程

CSS 教程
PHP 教程

PHP 教程
Laravel 教程

Laravel 教程
TypeScript 教程

TypeScript 教程
WordPress 教程

WordPress 教程

数据库教程

SQL 教程

SQL 教程
SQLite 教程

SQLite 教程
MySQL 教程

MySQL 教程
PL/SQL 教程

PL/SQL 教程
MongoDB 教程

MongoDB 教程

图形图像教程

OpenCV 教程

OpenCV 教程

办公软件教程

Excel 教程

Excel 教程

Linux教程

Linux命令全集

Linux命令全集
Linux内核API

Linux内核API
LVGL 教程

LVGL 教程

计算机教程

操作系统 教程

操作系统 教程
计算机网络 教程

计算机网络 教程
C语言 教程

C语言 教程
C++ 教程

C++ 教程
Swift 教程

Swift 教程

大数据教程

Hadoop 教程

Hadoop 教程
Spark 教程

Spark 教程
Scala 教程

Scala 教程

开发工具教程

Git 教程

Git 教程
Jenkins 教程

Jenkins 教程
ChatGPT 教程

ChatGPT 教程
IntelliJ 教程

IntelliJ 教程

JavaScript 精选教程