Я создаю базу данных indexedDB products_db.
onload, добавляю objectStore products_os в БД. - , извлекаю данные с сервера и добавляю данные в
products_os. - отображение данных в пользовательском интерфейсе.
onclick из добавить кнопку , попытаться открыть базу данных с более высоким номером версии и создать новый объект Store cart_os. Это то место, где оно не работает должным образом.
Текущее поведение:
- Когда я открываю Chromeбраузер в режиме инкогнито и загрузить мой index.html файл на вкладке, одна строка таблицы отображается в пользовательском интерфейсе, но на вкладке
Application в Developer Tools нет базы данных product_db в indexedDB. - При нажатии кнопки добавления появляется предупреждение о событии
onblocked, как указано в function addCartData(e) {.(Нет другой вкладки с открытым сайтом!).После закрытия всплывающего окна, теперь нажатие на ту же кнопку добавления ничего не делает. - Теперь, если я обновлю страницу с помощью cmd + shift + r , новая строка будет добавлена в таблицу.Всего у него два ряда.При каждом обновлении добавляется новый ряд.Предыдущая точка верна для всех кнопок добавления, которые есть в пользовательском интерфейсе, нажатие на любую из них вызовет предупреждение, а затем все станут бесполезными. (Без всплывающего окна при нажатии).
- Если я очищаю хранилище и затем выполняю cmd + shift + r , снова я получаю только одну строку в пользовательском интерфейсе.
Ожидаемое поведение:
- indexedDBв Приложение Вкладка Инструменты разработчика не должна быть пустой.Вместо этого его следует заполнить
db и objectStore. - При обновлении, без очистки хранилища, каждый раз должна отображаться только одна строка.
onclick кнопки добавления,БД должна открыться с новым номером версии и к ней следует добавить objectStore cart_os.Чтобы потом я мог использовать cart_os для read/write транзакции.
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Product Table</title>
<link href="styles.css" rel="stylesheet">
<script src="script.js" defer></script>
</head>
<body>
<table id='idb-table' style="width=100%" />
</body>
</html>
script.js
// Create an instance of a db object for us to store the open database in
let db;
window.onload = function() {
// Open our database; it is created if it doesn't already exist
let request = window.indexedDB.open('products_db', 1);
// onerror handler signifies that the database didn't open successfully
request.onerror = function() {
console.log('Database failed to open');
}
// onsuccess handler signifies that the database opened successfully
request.onsuccess = function() {
console.log('Database opened successfully');
// Store the opened database object in the db variable. This is used a lot below
db = request.result;
// Run the fetchProducts() function to fetch data from external API
fetchProducts();
}
// Setup the database tables if this has not already been done
request.onupgradeneeded = function(e) {
// Grab a reference to the opened database
let db = e.target.result;
// Create an objectStore to store our products in (basically like a single table)
// including a auto-incrementing key
let objectStore = db.createObjectStore('products_os', {keyPath: 'id', autoIncrement: true});
// Define what data items the objectStore will contain
objectStore.createIndex('title', 'title', {unique: false});
objectStore.createIndex('price', 'price', {unique: false});
objectStore.createIndex('inStock', 'inStock', {unique: false});
}
function fetchProducts() {
let product1 = fetch('http://localhost:3001/location/pathname') // see product.json file
.then(function(response) {
return response.json();
})
.then(function(response) {
addData(response);
})
}
function addData(value) {
// open a read/write db transaction, ready for adding the data
let transaction = db.transaction(['products_os'], 'readwrite');
// call an object store that's already been added to the database
let objectStore = transaction.objectStore('products_os');
let newItem = {
title: value.title,
price: value.sellingPrice,
inStock: value.inStock,
};
// Make a request to add our newItem object to the object store
var request = objectStore.add(newItem);
transaction.oncomplete = function() {
console.log('Transaction completed: database modification finished.');
// update the display of data to show the newly added item, by running displayData() again.
displayData();
}
transaction.onerror = function() {
console.log('Transaction not opened due to error');
};
}
function displayData() {
// Open our object store and then get a cursor - which iterates through all the
// different data items in the store
let objectStore = db.transaction('products_os').objectStore('products_os');
objectStore.openCursor().onsuccess = function(e) {
// Get a reference to the cursor
let cursor = e.target.result;
// Get a reference to table
let table = document.querySelector('#idb-table');
// If there is still another data item to iterate through, keep running this code
if(cursor) {
// Insert into table,
// structure the HTML fragment, and append it inside the table
let tableRow = document.createElement('tr');
for (let val in cursor.value) {
if (Object.prototype.hasOwnProperty.call(cursor.value, val)) {
if (val !== 'id') {
let td = document.createElement('td');
tableRow.appendChild(td);
td.textContent = cursor.value[val];
}
}
}
let td = document.createElement('td');
td.setAttribute('align', 'center');
let addButton = document.createElement('button');
td.appendChild(addButton);
addButton.textContent = 'Add';
addButton.addEventListener('click', function(e) {
addCartData(e);
})
tableRow.appendChild(td);
table.appendChild(tableRow);
// Iterate to the next item in the cursor
cursor.continue();
}
}
}
function addCartData(e) {
// Open the db with higher version number
let req = window.indexedDB.open('products_db', 2);
req.onerror = function() {
console.log('Database failed to open');
}
req.onsuccess = function() {
console.log('Database opened successfully');
// Store the opened database object in the db variable. This is used a lot below
db = req.result;
}
req.onblocked = function(event) {
// If some other tab is loaded with the database, then it needs to be closed
// before we can proceed.
alert("Please close all other tabs with this site open!");
};
req.onupgradeneeded = function(e){
// Grab a reference to the opened database
let db = e.target.result;
// Create a cart objectStore to store our information added to the cart
let cartStore = db.createObjectStore('cart_os', {keyPath: 'id', autoIncrement: true});
// Define what data items the cart objectStore will contain
cartStore.createIndex('title', 'title', {unique: false});
cartStore.createIndex('price', 'price', {unique: false});
}
}
styles.css
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
tr:last-child {
text-align: center!important;
}
product.json
{
"title": "Newhide Designer",
"productDescription": "",
"sellingPrice": 119,
"inStock": true,
}
РЕДАКТИРОВАТЬ
objectStore products_os никогда не былодобавлено в БД
Я получаю ошибку Uncaught (in promise) DOMException: Failed to execute 'transaction' on 'IDBDatabase': One of the specified object stores was not found. в строке 207 , как показано на рисунке.
onupgradeneeded_version1:
function onupgradeneeded_version1(e) {
// Grab a reference to the opened database
let db = e.target.result;
// Create an objectStore to store our products in (basically like a single table)
// including a auto-incrementing key
let objectStore = db.createObjectStore('products_os', {keyPath: 'id', autoIncrement: true});
// Define what data items the objectStore will contain
objectStore.createIndex('title', 'title', {unique: false});
objectStore.createIndex('price', 'price', {unique: false});
objectStore.createIndex('inStock', 'inStock', {unique: false});
}