44
55Dexie.js is a wrapper library for indexedDB - the standard database in the browser. https://dexie.org .
66
7-
8- ```
9- /$$ /$$ /$$ /$$ /$$
10- | $$ | $$ | $$ | $$ | $$
11- | $$ | $$ /$$$$$$ /$$$$$$$| $$ /$$ /$$$$$$ /$$$$$$ | $$$$$$$ /$$$$$$ /$$$$$$$
12- | $$$$$$$$ |____ $$ /$$_____/| $$ /$$/ |____ $$|_ $$_/ | $$__ $$ /$$__ $$| $$__ $$
13- | $$__ $$ /$$$$$$$| $$ | $$$$$$/ /$$$$$$$ | $$ | $$ \ $$| $$ \ $$| $$ \ $$
14- | $$ | $$ /$$__ $$| $$ | $$_ $$ /$$__ $$ | $$ /$$| $$ | $$| $$ | $$| $$ | $$
15- | $$ | $$| $$$$$$$| $$$$$$$| $$ \ $$| $$$$$$$ | $$$$/| $$ | $$| $$$$$$/| $$ | $$
16- |__/ |__/ \_______/ \_______/|__/ \__/ \_______/ \___/ |__/ |__/ \______/ |__/ |__/
17-
18- 🌟 Welcome to Dexie Global Hackathon 25! 🌟
19- 📅 Date: February 14 --> April 13, 2025
20- 🕒 Start coding with Dexie Cloud and win prices!
21-
22- For more information: dexie.org/hackathon
23-
24- Good luck! 🚀
25-
26- ```
27- [ dexie.org/hackathon] ( https://dexie.org/hackathon/ )
28-
297#### Why Dexie.js?
308
319IndexedDB is the portable database for all browser engines. Dexie.js makes it fun and easy to work with.
@@ -36,14 +14,15 @@ But also:
3614* Dexie.js works around bugs in the IndexedDB implementations, giving a more stable user experience.
3715* It's an easy step to [ make it sync] ( https://dexie.org/#sync ) .
3816
39- #### Hello World
17+ #### Hello World (vanilla JS)
4018
4119``` html
4220<!DOCTYPE html>
4321<html >
4422 <head >
45- <script src =" https://unpkg.com/dexie/dist/dexie.js" ></script >
46- <script >
23+ <script type =" module" >
24+ // Import Dexie
25+ import { Dexie } from ' https://unpkg.com/dexie/dist/modern/dexie.mjs' ;
4726
4827 //
4928 // Declare Database
@@ -56,35 +35,33 @@ But also:
5635 //
5736 // Play with it
5837 //
59- db .friends .add ({ name: ' Alice' , age: 21 }).then (() => {
60- return db .friends
61- .where (' age' )
62- .below (30 )
63- .toArray ();
64- }).then (youngFriends => {
65- alert (` My young friends: ${ JSON .stringify (youngFriends)} ` );
66- }).catch (e => {
67- alert (` Oops: ${ e} ` );
68- });
38+ try {
39+ await db .friends .add ({ name: ' Alice' , age: 21 });
6940
41+ const youngFriends = await db .friends
42+ .where (' age' )
43+ .below (30 )
44+ .toArray ();
45+
46+ alert (` My young friends: ${ JSON .stringify (youngFriends)} ` );
47+ } catch (e) {
48+ alert (` Oops: ${ e} ` );
49+ }
7050 </script >
7151 </head >
7252</html >
7353```
7454
7555Yes, it's that simple. Read [ the docs] ( https://dexie.org/docs/ ) to get into the details.
7656
77- #### Hello World (for modern browsers)
78-
79- All modern browsers support ES modules and top-level awaits. No transpiler needed. Here's the previous example in a modern flavour:
57+ #### Hello World (legacy script tags)
8058
8159``` html
8260<!DOCTYPE html>
8361<html >
8462 <head >
85- <script type =" module" >
86- // Import Dexie
87- import { Dexie } from ' https://unpkg.com/dexie/dist/modern/dexie.mjs' ;
63+ <script src =" https://unpkg.com/dexie/dist/dexie.js" ></script >
64+ <script >
8865
8966 //
9067 // Declare Database
@@ -97,18 +74,17 @@ All modern browsers support ES modules and top-level awaits. No transpiler neede
9774 //
9875 // Play with it
9976 //
100- try {
101- await db .friends .add ({ name: ' Alice' , age: 21 });
102-
103- const youngFriends = await db .friends
104- .where (' age' )
105- .below (30 )
106- .toArray ();
107-
108- alert (` My young friends: ${ JSON .stringify (youngFriends)} ` );
109- } catch (e) {
77+ db .friends .add ({ name: ' Alice' , age: 21 }).then (() => {
78+ return db .friends
79+ .where (' age' )
80+ .below (30 )
81+ .toArray ();
82+ }).then (youngFriends => {
83+ alert (` My young friends: ${ JSON .stringify (youngFriends)} ` );
84+ }).catch (e => {
11085 alert (` Oops: ${ e} ` );
111- }
86+ });
87+
11288 </script >
11389 </head >
11490</html >
0 commit comments