dom-examples/indexeddb-api/index.html at 4d3451157ef9afc78fad075aa71d1bd473af82de · mdn/dom-examples · 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
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>IndexedDB Example</title>
    <link href="main.css" rel="stylesheet" type="text/css" />
    <script
      type="text/javascript"
      src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" defer>
    </script>
    <script src="main.js" defer></script>
  </head>

  <body>
    <h1>IndexedDB Demo: storing blobs, e-publication example</h1>
    <div class="note">
      <p>Works and tested with:</p>
      <div id="compat"></div>
    </div>

    <div id="msg"></div>

    <form id="register-form">
      <table>
        <tbody>
          <tr>
            <td>
              <label for="pub-title" class="required">Title:</label>
            </td>
            <td>
              <input type="text" id="pub-title" name="pub-title" />
            </td>
          </tr>
          <tr>
            <td>
              <label for="pub-biblioid" class="required"
                >Bibliographic ID:<br />
                <span class="note">(ISBN, ISSN, etc.)</span>
              </label>
            </td>
            <td>
              <input type="text" id="pub-biblioid" name="pub-biblioid" />
            </td>
          </tr>
          <tr>
            <td>
              <label for="pub-year">
                Year:
              </label>
            </td>
            <td>
              <input type="number" id="pub-year" name="pub-year" />
            </td>
          </tr>
        </tbody>
        <tbody>
          <tr>
            <td>
              <label for="pub-file">
                File image:
              </label>
            </td>
            <td>
              <input type="file" id="pub-file" />
            </td>
          </tr>
          <tr>
            <td>
              <label for="pub-file-url">
                Online-file image URL:<br />
                <span class="note">(same origin URL)</span>
              </label>
            </td>
            <td>
              <input type="text" id="pub-file-url" name="pub-file-url" />
            </td>
          </tr>
        </tbody>
      </table>

      <div class="button-pane">
        <input type="button" id="add-button" value="Add Publication" />
        <input type="reset" id="register-form-reset" />
      </div>
    </form>

    <form id="delete-form">
      <table>
        <tbody>
          <tr>
            <td>
              <label for="pub-biblioid-to-delete">
                Bibliographic ID:<br />
                <span class="note">(ISBN, ISSN, etc.)</span>
              </label>
            </td>
            <td>
              <input
                type="text"
                id="pub-biblioid-to-delete"
                name="pub-biblioid-to-delete"
              />
            </td>
          </tr>
          <tr>
            <td>
              <label for="key-to-delete">
                Key:<br />
                <span class="note">(for example 1, 2, 3, etc.)</span>
              </label>
            </td>
            <td>
              <input type="text" id="key-to-delete" name="key-to-delete" />
            </td>
          </tr>
        </tbody>
      </table>
      <div class="button-pane">
        <input type="button" id="delete-button" value="Delete Publication" />
        <input
          type="button"
          id="clear-store-button"
          value="Clear the whole store"
          class="destructive"
        />
      </div>
    </form>

    <form id="search-form">
      <div class="button-pane">
        <input
          type="button"
          id="search-list-button"
          value="List database content"
        />
      </div>
    </form>

    <div>
      <div id="pub-msg"></div>
      <div id="pub-viewer"></div>
      <ul id="pub-list"></ul>
    </div>

  </body>
</html>