Link to home
Start Free TrialLog in
Avatar of Eddie Shipman
Eddie ShipmanFlag for United States of America

asked on

IndexedDB how to clear the DB when returning but not refreshing?

I need to be able to clear and/or delete an IndexedDB when the the user comes back to my site. I want my DB to be fresh each time I login.

How would I clear or delete all objectStores in a DB when initially loading a page but NOT on page refreshes?

Any thoughts on how to do this?
I've asked on SO but no real solutions:
stackoverflow.com/questions/37401428/indexeddb-how-to-clear-the-db-when-logging-in


Here's some code:
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>IndexedDB test</title>
        <script type="text/javascript">
            var indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB || window.msIndexedDB;
            var IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction;
            var db;
            (function () {     
                var peopleData = [ 
                                 {"FILENAME":"/NewDesigMemo1026732160521.pdf","DOC":"5/23/2016 | New Desig Memo","PRT_DT":"5/23/2016","EC":"","STATE":"","DES":"CIC","PRG_CODE":"","DIST":"","CNAME":""},
                                 {"FILENAME":"/NewDesigMemo1026732160521.pdf","DOC":"5/23/2016 | New Desig Memo","PRT_DT":"5/23/2016","EC":"","STATE":"","DES":"CISR","PRG_CODE":"","DIST":"","CNAME":""},
                                 {"FILENAME":"/AttendanceOutOfStateMemo102673220160521.pdf","DOC":"5/23/2016 | Attendance Out of State Memo","PRT_DT":"5/23/2016","EC":"","STATE":"","DES":"CISR","PRG_CODE":"","DIST":"","CNAME":""},
                                 {"FILENAME":"/Attend1026732160521.pdf","DOC":"5/23/2016 | Attendance","PRT_DT":"5/23/2016","EC":"","STATE":"","DES":"CSRM","PRG_CODE":"","DIST":"","CNAME":""},
                                 {"FILENAME":"/NewMemo1026732160521.pdf","DOC":"5/23/2016 | New Desig Memo","PRT_DT":"5/23/2016","EC":"","STATE":"","DES":"CRM","PRG_CODE":"","DIST":"","CNAME":""},
                                ];

                var peopleData2 = [ 
                                  {"FILENAME":"/Attend102673220160312.pdf","PRT_DATE":"3/14/2016","EC":"","DOC":"3/14/2016 | CSRM Attendance","CRID":null,"PRG_CODE":"","STATE":"","DES":"","DATE_SENT":null,"PRG_DESC":null,"YEAR":null,"ISSUE":"","DIST":null,"CNAME":""},
                                  {"FILENAME":"/RMagazine.aspx?I=r_spring_2016&P=1026732","PRT_DATE":"","EC":"","DOC":"R Magazine Spring 2016","CRID":null,"PRG_CODE":"","STATE":"","DES":"","DATE_SENT":null,"PRG_DESC":null,"YEAR":null,"ISSUE":"Spring 2016","DIST":null,"CNAME":""},
                                  {"FILENAME":"/Packet+Notification+CISR+CIC+20160309ALM.html","PRT_DATE":"3/9/2016","EC":"20160317LLM","DOC":"3/9/2016 | Packet Notification","CRID":null,"PRG_CODE":"","STATE":"","DES":"","DATE_SENT":null,"PRG_DESC":null,"YEAR":null,"ISSUE":"","DIST":null,"CNAME":"WTH"},
                                  {"FILENAME":"Eval20160317LLM1026732.pdf","PRT_DATE":"","EC":"20160317LLM","DOC":"Evaluation_Packet","CRID":null,"PRG_CODE":"ALM","STATE":"LA","DES":"","DATE_SENT":null,"PRG_DESC":null,"YEAR":null,"ISSUE":"","DIST":null,"CNAME":"WTH"},
                                  {"FILENAME":"Eval20160315LPR1026732.pdf","PRT_DATE":"","EC":"20160315LPR","DOC":"Evaluation_Packet","CRID":null,"PRG_CODE":"PR","STATE":"LA","DES":"","DATE_SENT":null,"PRG_DESC":null,"YEAR":null,"ISSUE":"","DIST":null,"CNAME":"IPR"}
                                 ]

                function initDb() {
                    var request = indexedDB.open("DocsDB", new Date().getUTCMilliseconds());
                    request.onsuccess = function (evt) {
                        db = request.result;     
                        // Only do the below if this is first visit to page...                                                       
                        if(window.performance) { 
                            if(performance.navigation.type  == 0 ) {
                                var store = getObjectStore(db);                   
                                // The db already exists so delete it and re-create it so we don't have stale records.
                                if(store != null) {
                                    store.clear();
                                }
                            }
                        }
                    };

                    request.onerror = function (evt) {
                        console.log("IndexedDB error: " + evt.target.error.code);
                    };

                    request.onupgradeneeded = function (evt) {
                        var objectStore = evt.currentTarget.result.createObjectStore(
                                 "docs", { keyPath: "id", autoIncrement: true });

                        objectStore.createIndex("docname", "DOC", { unique: false });
                        objectStore.createIndex("printdate", "PRT_DT", { unique: false });

                        for (i in peopleData) {
                            objectStore.add(peopleData[i]);
                        }
                    };
                }

                 function getObjectStore(db, mode) {
                     if(typeof db != 'undefined') {
                         var tx = db.transaction('docs', 'readwrite');
                         return tx.objectStore('docs');
                    } else {
                        return null;
                    }
                 }

                function contentLoaded() {           
                    initDb();    
                    var btnPrint = document.getElementById("btnPrint");                

                    btnAdd.addEventListener("click", function () {
                        var transaction = db.transaction("docs", "readwrite");
                        var objectStore = transaction.objectStore("docs");
                        for (i in peopleData2) {
                            var request = objectStore.add(peopleData[i]);
                            request.onsuccess = function (evt) {
                                // do something after the add succeeded
                            };
                        }

                    }, false);

                    btnPrint.addEventListener("click", function () {
                        var output = document.getElementById("printOutput");
                        output.textContent = "";

                        var transaction = db.transaction("docs", "readwrite");
                        var objectStore = transaction.objectStore("docs");

                        var request = objectStore.openCursor();
                        request.onsuccess = function(evt) {  
                            var cursor = evt.target.result;  
                            if (cursor) {  
                                output.textContent += "id: " + cursor.key + " is " + cursor.value.FILENAME + " " + cursor.value.DOC;                            
                                cursor.continue();  
                            }  
                        };  
                    }, false);              
                }
                window.addEventListener("DOMContentLoaded", contentLoaded, false); 
            })();   
        </script>
    </head>
    <body>
        <div id="container">
            <input type="button" id="btnAdd" value="Add Records" />
            <br />
            <br />
            <input type="button" id="btnPrint" value="Print objectStore" />
            <br />
            <br />
            <output id="printOutput">
            </output>
        </div>
    </body>
</html>

Open in new window

ASKER CERTIFIED SOLUTION
Avatar of Eddie Shipman
Eddie Shipman
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial