[js] indexeddb 使用demo

需要在服务器环境下运行才可正常存储。
在IOS手机上兼容性很差。
<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <title></title>

    </head>

    <body>
        <ul id='bg' style="background: lightblue;"></ul>
    </body>
    <script>
        var abradb = (function() {
            var myDB = {
                name: 'chat5',
                version: 1,
                db: null
            };
            var storeName = 'list';

            function openDB() {
                var version = myDB.version || 1;
                var request = window.indexedDB.open(myDB.name, version);
                request.onerror = function(e) {
                    console.log(e.currentTarget.error.message);
                };
                request.onsuccess = function(e) {
                    myDB.db = e.target.result;
                };
                request.onupgradeneeded = function(e) {
                    var db = e.target.result;
                    if (!db.objectStoreNames.contains(storeName)) {
                        db.createObjectStore(storeName, {
                            keyPath: 'chat_id'
                        });
                    }
//                        if (db.objectStoreNames.contains(storeName)) {
//                            db.deleteObjectStore(storeName);
//                        }
                    console.log('DB version changed to ' + version);
                };
            }

            function closeDB() {
                myDB.db.close();
            }

            function deleteDB() {
                indexedDB.deleteDatabase(myDB.name);
            }

            function addData(data) {
                var transaction = myDB.db.transaction(storeName, 'readwrite');
                var store = transaction.objectStore(storeName);
                store.add(data);
                console.log(store);
            }

            function getDataByKey(key) {
                var transaction = myDB.db.transaction(storeName, 'readwrite');
                var store = transaction.objectStore(storeName);
                var request = store.get(key);
                request.onsuccess = function(e) {
                    var rd = e.target.result;
                    console.log(rd);
                };
            }

            function updateDataByKey(key, data) {
                var transaction = myDB.db.transaction(storeName, 'readwrite');
                var store = transaction.objectStore(storeName);
                var request = store.get(key);
                request.onsuccess = function(e) {
                    var rd = e.target.result;
                    rd.chat_list.push(data);
                    store.put(rd);
                    console.log(updatedata.transaction);
                };
            }

            function deleteDataByKey(key) {
                var transaction = myDB.db.transaction(storeName, 'readwrite');
                var store = transaction.objectStore(storeName);
                store.delete(key);
            }

            function clearObjectStore() {
                var transaction = myDB.db.transaction(storeName, 'readwrite');
                var store = transaction.objectStore(storeName);
                store.clear();
            }

            function displayData() {
                var transaction = myDB.db.transaction(storeName, "readonly");
                var objectStore = transaction.objectStore(storeName);
                objectStore.openCursor().onsuccess = function(event) {
                    var cursor = event.target.result;
                    console.log(cursor);
                    //console.log(cursor.value);
                    var list = document.getElementById("bg");
                    if (cursor) {
                        var listItem = document.createElement('li');
                        listItem.innerHTML = cursor.value.chat_id;
                        list.appendChild(listItem);
                        cursor.continue();
                    } else {
                        console.log('Entries all displayed.');
                    }
                };
            };
            openDB();
            return {
                openDB: openDB,
                closeDB: closeDB,
                closeDB: closeDB,
                deleteDB: deleteDB,
                addData: addData,
                getData: getDataByKey,
                updateData: updateDataByKey,
                deleteData: deleteDataByKey,
                clearAllData: clearObjectStore,
                displayData: displayData
            }
        })();
        var chat = {
            from_id: 123,
            from_name: "abc",
            from_avatar: "",
            unread: "10",
            chat_id: 10222,
            chat_list: [{
                id: 1001,
                name: "Byron",
                age: 24
            }, {
                id: 1002,
                name: "Frank",
                age: 30
            }, {
                id: 1003,
                name: "Aaron",
                age: 26
            }]
        };
        var dd = [{
            id: 1001,
            name: "Byron",
            age: 24
        }, {
            id: 1002,
            name: "Frank",
            age: 30
        }, {
            id: 1003,
            name: "Aaron",
            age: 26
        }, {
            id: 1003,
            name: "Aaron",
            age: 26
        }];
        var cc = {
            id: 1003,
            name: "Aaron",
            age: 9999
        }
        setTimeout(function() {
            //abradb.updateData(1024, cc);
            abradb.addData(chat);
            //abradb.getData(16);
            //abradb.deleteData(1000);
            //abradb.clearAllData();
            abradb.displayData();
        }, 1000);
    </script>

</html>
posted @ 2016-03-03 20:01 晴明桑阅读(422) 评论(0) 收藏举报
刷新页面返回顶部
[js] indexeddb 使用demo

公告
