IndexedDB入门

海天鹰

已于 2024-01-28 22:15:35 修改

阅读量284

点赞数 2

分类专栏： JS 文章标签： javascript html

于 2024-01-28 20:29:39 首次发布

本文链接：https://blog.csdn.net/sonichty/article/details/135899951

版权

JS 专栏收录该内容

58 篇文章 1 订阅

订阅专栏

https://www.cnblogs.com/zhangzuwei/p/16574791.html

注意

1.删除表，创建表只能在数据库版本升级里面进行。

2.keyPath: key 要和表字段对应，而且格式要一样，不然不运行不报错。

3.使用 autoIncrement: true 代替 keyPath: key，则不需要写关键字段。

<html>
<head>
<title>IndexedDB</title>
<style>
h1 { text-align:center; }
table { margin:auto; border-collapse:collapse; }
th, td { text-align:center; padding:10px; border:1px solid black; }
</style>
</head>
<body>
<h1>Customers</h1>
<p id="msg"></p>
<table id="table"></table>
<script>
if (!window.indexedDB) {
    msg.innerText = "Your browser doesn't support IndexedDB.";
} else {
    const customerData = [
        { name: "Bill", age: 35, email: "bill@company.com" },
        { name: "Donna", age: 32, email: "donna@home.org" },
        { name: "Jenny", age: 23, email: "jenny@msn.com" },
        { name: "Henry", age: 43, email: "Henry@outlook.com" },
        { name: "Kaili", age: 53, email: "Kaili@outlook.com" }
    ];
    
    var db;
    var request = window.indexedDB.open("MyTestDatabase", 1);
    
    request.onerror = function(event) {
        console.log(event);
        msg.innerText = event.target.error;
    };
    
    request.onupgradeneeded = function(event){
        db = event.target.result;
        if (db.objectStoreNames.contains('customers')){
            db.deleteObjectStore("customers");
        }
        var objectStore = db.createObjectStore("customers", { autoIncrement: true });
        objectStore.createIndex("name", "name", { unique: false });
        objectStore.createIndex("email", "email", { unique: true }); 
        objectStore.transaction.oncomplete = function(event){
            var customerObjectStore = db.transaction("customers", "readwrite").objectStore("customers");
            customerData.forEach(function(customer){
                customerObjectStore.add(customer);               
            });
        };
    };
    
    request.onsuccess = function(event){        
        var i = 1;
        var tr = document.createElement('tr');
        var th = document.createElement('th');
        th.textContent = 'id';
        tr.append(th);
        th = document.createElement('th');
        th.textContent = 'name';
        tr.append(th);
        th = document.createElement('th');
        th.textContent = 'age';
        tr.append(th);
        th = document.createElement('th');
        th.textContent = 'email';
        tr.append(th);
        table.append(tr);
        db = event.target.result;
        var objectStore = db.transaction("customers").objectStore("customers");        
        objectStore.openCursor().onsuccess = function(event){
            var cursor = event.target.result;            
            if (cursor) {
                tr = document.createElement('tr');
                var td = document.createElement('td');
                td.textContent = i;
                tr.append(td);
                td = document.createElement('td');
                td.textContent = cursor.value.name;
                tr.append(td);
                td = document.createElement('td');
                td.textContent = cursor.value.age;
                tr.append(td);
                td = document.createElement('td');
                td.textContent = cursor.value.email;
                tr.append(td);
                table.append(tr);
                cursor.continue();                
                i++;
            } else {
                console.log("No more cursor!");
            }
        };
    };    
    
}
</script>
</body>
</html>

海天鹰

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
IndexedDB入门

3.使用 autoIncrement: true 代替 keypath: key，则不需要写关键字段。2.keypath: key 要和表字段对应，而且格式要一样，不然不运行不报错。1.删除表，创建表只能在数据库版本升级里面进行。
复制链接

扫一扫

专栏目录