API tools faq
paste
View difference between Paste ID: mLpU0VfP and 2Va9DksV
SHOW: | | - or go back to the newest paste.
1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
    <meta charset="utf-8" />
5
    <title>IndexedDB</title>
6
    <script type="text/javascript">
7
        var indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB || window.msIndexedDB;
8
        var IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction;
9
        var db;
10-
        (function () {
10+
        (function () {
11
            var peopleData = [
12
                { name: "John Dow", email: "[email protected]" },
13
                { name: "Don Dow", email: "[email protected]" }
14
            ];
15-
15+
16
            function initDb() {

17-
                var request = indexedDB.open("PeopleDB", 1);  

17+
                var request = indexedDB.open("PeopleDB", 1);

18
                request.onsuccess = function (evt) {

19-
                    db = request.result;                                                            

19+
                    db = request.result;

20
                };

21-
 

21+
22
                request.onerror = function (evt) {

23
                    console.log("IndexedDB error: " + evt.target.errorCode);

24
                };

25-
 

25+
26-
                request.onupgradeneeded = function (evt) {                   

26+
                request.onupgradeneeded = function (evt) {

27
                    var objectStore = evt.currentTarget.result.createObjectStore(

28-
                             "people", { keyPath: "id", autoIncrement: true });

28+
                            "people", { keyPath: "id", autoIncrement: true });

29-
 

29+
30
                    objectStore.createIndex("name", "name", { unique: false });

31
                    objectStore.createIndex("email", "email", { unique: true });

32-
 

32+
33
                    for (i in peopleData) {

34
                        objectStore.add(peopleData[i]);

35
                    }

36
                };

37
            }

38-
 

38+
39
            function contentLoaded() {

40-
                initDb();                

40+
                initDb();

41
                var btnAdd = document.getElementById("btnAdd");

42
                var btnDelete = document.getElementById("btnDelete");

43-
                var btnPrint = document.getElementById("btnPrint");                

43+
                var btnPrint = document.getElementById("btnPrint");

44-
 

44+
45
                btnAdd.addEventListener("click", function () {

46
                    var name = document.getElementById("txtName").value;

47
                    var email = document.getElementById("txtEmail").value;

48-
 

48+
49
                    var transaction = db.transaction("people", IDBTransaction.READ_WRITE);

50-
                    var objectStore = transaction.objectStore("people");                    

50+
51
                    var request = objectStore.add({ name: name, email: email });

52
                    request.onsuccess = function (evt) {

53
                        // do something after the add succeeded

54
                    };

55
                }, false);

56-
 

56+
57
                btnDelete.addEventListener("click", function () {

58-
                    var id = document.getElementById("txtID").value;

58+
                    var value = document.getElementById("txtID").value;

59-
 

59+
                    var id = parseInt(value);

60
61
                    var transaction = db.transaction("people", IDBTransaction.READ_WRITE);

62
                    var objectStore = transaction.objectStore("people");

63-
                    request.onsuccess = function(evt) {  

63+
64-
                        // It's gone!  

64+
                    request.onsuccess = function(evt) {

65
                        console.log('deleted ' + evt.target.result);

66
                    };

67-
 

67+
                    request.onerror = function(evt) {

68
                        console.log('fail deleting ' + id);

69
                        console.log(evt);

70
                    };

71-
 

71+
72
73
                btnPrint.addEventListener("click", function () {

74-
 

74+
75
                    output.textContent = "";

76-
                    request.onsuccess = function(evt) {  

76+
77-
                        var cursor = evt.target.result;  

77+
78-
                        if (cursor) {  

78+
79-
                            output.textContent += "id: " + cursor.key + 

79+
80-
                                        " is " + cursor.value.name + " ";                            

80+
81-
                            cursor.continue();  

81+
                    request.onsuccess = function(evt) {

82-
                        }  

82+
                        var cursor = evt.target.result;

83-
                        else {  

83+
                        if (cursor) {

84-
                            console.log("No more entries!");  

84+
                            output.textContent += "id: " + cursor.key +

85-
                        }  

85+
                                    " is " + cursor.value.name + " ";

86-
                    };  

86+
                            cursor.continue();

87-
                }, false);              

87+
                        }

88
                        else {

89-
 

89+
                            console.log("No more entries!");

90-
            window.addEventListener("DOMContentLoaded", contentLoaded, false); 

90+
                        }

91-
    })();       

91+
92
                }, false);

93
            }

94
95-
    <div id="container">

95+
            window.addEventListener("DOMContentLoaded", contentLoaded, false);

96-
        <label for="txtName">

96+
        })();

97-
            Name:

97+
98-
        </label>

98+
99-
        <input type="text" id="txtName" name="txtName" />

99+
100-
        <br />

100+
<div id="container">

101-
        <label for="txtEmail">

101+
    <label for="txtName">

102-
            Email:

102+
        Name:

103-
        </label>

103+
    </label>

104-
        <input type="email" id="txtEmail" name="txtEmail" />

104+
    <input type="text" id="txtName" name="txtName" />

105-
        <br />

105+
    <br />

106-
        <input type="button" id="btnAdd" value="Add Record" />

106+
    <label for="txtEmail">

107-
        <br />

107+
        Email:

108-
        <label for="txtID">

108+
    </label>

109-
            ID:

109+
    <input type="email" id="txtEmail" name="txtEmail" />

110-
        </label>

110+
    <br />

111-
        <input type="text" id="txtID" name="txtID" />

111+
    <input type="button" id="btnAdd" value="Add Record" />

112-
        <br />

112+
    <br />

113-
        <input type="button" id="btnDelete" value="Delete Record" />

113+
    <label for="txtID">

114-
        <br />

114+
        ID:

115-
        <input type="button" id="btnPrint" value="Print objectStore" />

115+
    </label>

116-
        <br />

116+
    <input type="text" id="txtID" name="txtID" />

117-
        <output id="printOutput">

117+
    <br />

118-
        </output>

118+
    <input type="button" id="btnDelete" value="Delete Record" />

119-
    </div>

119+
    <br />

120
    <input type="button" id="btnPrint" value="Print objectStore" />

121
    <br />

122
    <output id="printOutput">

123
    </output>

124
</div>

125
126
<script type="text/javascript" src="../../jsc/dev-ydn.db-0.29.js"></script>

127
</body>

128
</html>
        

    


            


                                


        

            



                
    

        Public Pastes
    

    
            

    

                    

        

    





    


    
    
    
    
    
    
    
    




    


    



                

            We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.             OK, I Understand
        

    
                

            

                
                    
                
            

            

                Not a member of Pastebin yet?

                Sign Up, it unlocks many cool features!