Home >Web Front-end >JS Tutorial >TaffyDB – JavaScript database for the browser

TaffyDB – JavaScript database for the browser

PHPzforward: 2023-08-25 13:45:181329browse

TaffyDB – 适用于浏览器的 JavaScript 数据库

TaffyDB is a lightweight and powerful in-memory database that can be used in browsers and server-side applications. It is open source and free to use. In this tutorial, we will go through a few examples to show how to use TaffyDB to store some data, perform some queries on the data, and perform important operations on the data.

Let’s start with a simple example

Let's start with a very basic example where we will create some data and then try to print that data on the browser.

Our first step is to have TaffyDB. For this we have different options. The most basic method is to use a URL that contains a minified version of the "taffydb.js" file.

The code for "taffydb.js" can be found at this link. I suggest you open this link, then copy and paste the code into a file called "taffy.js". Otherwise, you can Just use their CDN.

Now that the dependencies are taken care of, let's focus on the "index.html" file, where we will write the core logic, within the <script> tags, of course. Consider the HTML code shown below. </script>

Example

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>

If you run the above code in your browser, you should see the following output.

In the above code, we first imported the "taffy.js" file and then created a <script> tag inside the &ly;head> tag itself. Inside the <script> tag, we create a TAFFY object, in which we create an object array in which there are multiple objects with different properties. </script>

We then iterate over the values of the countries variables, and for each variable we put the value of the "name" attribute into an array called "countriesName".

If you run the above code in your browser, you should see the following output.

Insert records using TaffyDB

In the above example, we created an array of objects and passed it to the TIFFY method. Now let us focus on inserting a new object into the data, we can do this with the help of the insert() method. In the insert() method we can pass the same properties or different properties depending on our choice.

Consider the code snippet shown below, we can use it to Country variables in TaffyDB.

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

Example

index.html

The updated index.html code is as follows.

<!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>

If you run the above code in your browser you should see the following output -

Execute queries using TaffyDB

While we executed the query in the above example, let us execute a simple query again where we want to store the names of countries whose capital and state have the same value in the data.

Example

index.html

Consider the index.html code shown below.

<!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>

In the above HTML code, we iterate over all the values of the countries variables with the help of the each() method and then compare "capital" and "declare" the attribute value with them. Then if there is a match we put the values into an array and finally print the array in the console.

If we run the above HTML file in a browser, we will terminal.

Now let's execute the query again, this time we want to print the name of the smallest country in lexicographic order. From the data in the example above, it would be "Brazil". Consider the HTML code shown below.

Example

index.html

Consider the index.html code shown below.

<!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>

In the above code, the line containing the code countries().order("name").first().name is where we use the link named link, where the link Multiple methods. First, we sort the data by the name attribute, then select the first element from the sorted data, and finally, we extract the name attribute from that element.

If you run the above HTML file in your browser, you will see terminal.

Update data using TaffyDB

You can use the update() method to update data in TaffyDB. In this method, if we pass a property that does not exist in the object, then it will be appended; if it does exist, it will be updated.

Suppose you want to add a field to an object named "India" and add a new property named financialCapital: "Mumbai". Consider the HTML code shown below.

Example

index.html

Consider the index.html code shown below.

<!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>

To verify that the data we added has been added to the database, I iterate over the object and then print the values using a simple "if-else" condition.

如果您在浏览器中运行上述 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 操作。

The above is the detailed content of TaffyDB – JavaScript database for the browser. For more information, please follow other related articles on the PHP Chinese website!

JavaScript html 运算符 if JS 对象数据库

Statement：

This article is reproduced at:tutorialspoint.com. If there is any infringement, please contact admin@php.cn delete

Previous article：How to write a mobile number in an international way using JavaScript?Next article：How to write a mobile number in an international way using JavaScript?

See more

TaffyDB – JavaScript database for the browser

Let’s start with a simple example

Example

Insert records using TaffyDB

Example

Execute queries using TaffyDB

Example

Example

Update data using TaffyDB

Example

使用“!”运算符

示例

结论

Related articles