Introduction to jsstore
jsstore is a powerful IndexedDB wrapper that simplifies complex web storage operations, making it easier for developers to interact with databases in the browser. With a variety of useful APIs, jsstore provides a robust solution for client-side storage.
API Examples
Creating a Database
To create a new database, you can use the initDb function:
const connection = new JsStore.Connection({
name: 'DemoDb',
tables: [
{
name: 'Customers',
columns: {
id: { primaryKey: true, autoIncrement: true },
name: { notNull: true, dataType: 'string' },
age: { notNull: true, dataType: 'number' }
}
}
]
});
Inserting Data
Inserting data is streamlined with the insert method:
const customers = [
{ name: 'John Doe', age: 35 },
{ name: 'Jane Smith', age: 28 }
];
connection.insert({
into: 'Customers',
values: customers
}).then(isInserted => {
console.log(isInserted);
});
Querying Data
Retrieve data easily using the select method:
connection.select({
from: 'Customers',
where: {
age: { '>': 30 }
}
}).then(results => {
console.log(results);
});
Updating Data
Update existing records with the update method:
connection.update({
in: 'Customers',
set: { age: 36 },
where: { name: 'John Doe' }
}).then(rowsUpdated => {
console.log(rowsUpdated);
});
Deleting Data
Remove records using the remove method:
connection.remove({
from: 'Customers',
where: { age: { '<': 30 } }
}).then(rowsDeleted => {
console.log(rowsDeleted);
});
App Example
Let’s build a simple application that leverages the above APIs to manage a customer database:
HTML
<!DOCTYPE html>
<html>
<head>
<title>Customer Manager</title>
</head>
<body>
<h1>Customer Manager</h1>
<div>
<input type="text" id="name" placeholder="Name">
<input type="number" id="age" placeholder="Age">
<button onclick="addCustomer()">Add Customer</button>
</div>
<div id="customerList"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jsstore/3.9.1/jsstore.min.js"></script>
<script>
const connection = new JsStore.Connection({
name: "CustomerDb",
tables: [{
name: "Customers",
columns: {
id: { primaryKey: true, autoIncrement: true },
name: { notNull: true, dataType: "string" },
age: { notNull: true, dataType: "number" }
}
}]
});
function addCustomer() {
const name = document.getElementById("name").value;
const age = parseInt(document.getElementById("age").value);
connection.insert({
into: "Customers",
values: [{ name, age }]
}).then(() => {
displayCustomers();
});
}
function displayCustomers() {
connection.select({
from: "Customers"
}).then(customers => {
const list = customers.map(customer => "<div>" + customer.name + ", " + customer.age + "</div>").join("");
document.getElementById("customerList").innerHTML = list;
});
}
displayCustomers();
</script>
</body>
</html>
With these practical examples, you can quickly get started with jsstore and explore its full potential.
Hash: 73fc828cfdf209328b635b7d3acab34f450538432d5df96c7c32d98244502b1e
