IndexedDB 解释

window.onload = () => {
}

// let us open our database
const dbopenrequest = window.indexeddb.open('todolist', 4);

// register two event handlers to act on the database being opened successfully, or not
dbopenrequest.onerror = (event) => {
 note.appendchild(createlistitem('error loading database.'));
};

dbopenrequest.onsuccess = (event) => {
 note.appendchild(createlistitem('database initialised.'));
// store the result of opening the database in the db variable. this is used a lot below
 db = dbopenrequest.result;
// run the displaydata() function to populate the task list with all the to-do list data already in the indexeddb
 displaydata();
};

// open a read/write db transaction, ready for adding the data
const transaction = db.transaction(['todolist'], 'readwrite');
// call an object store that's already been added to the database
const objectstore = transaction.objectstore('todolist');
// make a request to add our newitem object to the object store
const objectstorerequest = objectstore.add(newitem[0]);
objectstorerequest.onsuccess = (event) => {
 // process data on success.
}
// report on the success of the transaction completing, when everything is done
transaction.oncomplete = () => {
 note.appendchild(createlistitem('transaction completed: database modification finished.'));
// update the display of data to show the newly added item, by running displaydata() again.
 displaydata();
};
// handler for any unexpected error
transaction.onerror = () => {
 note.appendchild(createlistitem(`transaction not opened due to error: ${transaction.error}`));
};

export function AddFriendForm({ defaultAge } = { defaultAge: 21 }) {
 const [name, setName] = useState('');
 const [age, setAge] = useState(defaultAge);
 const [status, setStatus] = useState('');
async function addFriend() {
 try {
 // Add the new friend!
 const id = await db.friends.add({
 name,
 age
 });
setStatus(`Friend ${name} successfully added. Got id ${id}`);
 setName('');
 setAge(defaultAge);
 } catch (error) {
 setStatus(`Failed to add ${name}: ${error}`);
 }
 }
return (
 <>
 <p>{status}</p>
 Name:
 <input
 type="text"
 value={name}
 onChange={(ev) => setName(ev.target.value)}
 />
 Age:
 <input
 type="number"
 value={age}
 onChange={(ev) => setAge(Number(ev.target.value))}
 />
 <button onClick={addFriend}>Add</button>
 </>
 );
}