rtc-js/indexeddb-example.html at main · tplive/rtc-js · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
<!DOCTYPE html>
<html>
<script>
  window.onerror = function(errorMsg, url, lineNumber){
    const error = document.querySelector("error")
    error.innerHTML = "Error in " + url + " at " + lineNumber + ":\n" + errorMsg
  }
</script>
<body>

<h2>Test IndexedDB</h2>

<button type="button" onclick="run()">run</button>

<pre id="demo"></pre>
<pre id="error"></pre>

<script>
function log(domId, msg) {

  const para = document.createElement("p")
  const node = document.createTextNode(msg)
  para.appendChild(node)
  const element = document.getElementById(domId)
  element.appendChild(para);
}

log("error", "Aye!")

function run() {
  log("error", "run()")

  const out = document.querySelector('#demo')
  out.innerHTML = "This is the #demo paragraph"

  try {
    lookupCity("90210", db => {

      const res = request.result
      out.innerHTML = res.zipcodes

    })
    //throw(`diz iz eror`)

  } catch (e) {
    log("error", "Catch error message: " + e)
  }
}

function withDB(callback) {
  let request = indexedDB.open("zipcodes", 1); // Request v1 of the database
  request.onerror = console.error // Log any errors
  request.onsuccess = () => { // Or call this when done
    let db = request.result // The result of the request is the database
    callback(db); // Invoke the callback with the database
  }

  // If version 1 of the database does not yet exist, then this event
  // handler will be triggered. This is used to create and initialize
  // object stores and indexes when the DB is first created or to modify
  // them when we switch from one version of the DB schema to another.

  request.onupgradeneeded = () => { initdb(request.result, callback); }
}

function initdb(db, callback) {

  let store = db.createObjectStore("zipcodes", // store name
    { keyPath: "zipcode" }
  )

  store.createIndex("cities", "city")

  fetch("zipcodes.json") // Make an HTTP GET request
    .then(response => response.json()) // Parse the body as JSON
    .then(zipcodes => { // Get 40K zip code records
      let transaction = db.transaction(["zipcodes"], "readwrite")
      transaction.onerror = console.error

      let store = transaction.objectStore("zipcodes")

      for(let record of zipcodes) { store.put(record) }

      transaction.oncomplete = () => { callback(db) }
    }
  )
}

function lookupCity(zip, callback) {
  withDB(db => {
    let transaction = db.transaction(["zipcodes"])

    let zipcodes = transaction.objectStore("zipcodes")

    let request = zipcodes.get(zip)

    request.onerror = console.error // Log errors

    request.onsuccess = () => { // Or call this function on success
      let record = request.result; // This is the query result
      if (record) { // If we found a match, pass it to the callback
        callback(`${record.city}, ${record.state}`)
      } else { // Otherwise, tell the callback that we failed
        callback(null)
      }
    }
  })
}

function lookupZipcodes(city, callback) {
  withDB(db => {

    let transaction = db.transaction(["zipcodes"])
    let store = transaction.objectStore("zipcodes")

    let index = store.index("cities")

    let request = index.getAll(city)

    request.onerror = console.error
    request.onsuccess = () => { callback(request.result) }
  })
}

</script>

</body>
</html>