indexedDB学习demo

最新推荐文章于 2023-06-19 17:24:23 发布

yz764127031

最新推荐文章于 2023-06-19 17:24:23 发布

阅读量909

点赞数

分类专栏： web 前端

本文链接：https://blog.csdn.net/yz764127031/article/details/68503022

版权

web 同时被 2 个专栏收录

21 篇文章 0 订阅

订阅专栏

前端

9 篇文章 0 订阅

订阅专栏

indexDB
IndexedDB是HTML5规范里新出现的浏览器里内置的数据库。对于在浏览器里存储数据，你可以使用cookies或local storage，但它们都是比较简单的技术，而IndexedDB提供了类似数据库风格的数据存储和使用方式。存储在IndexedDB里的数据是永久保存，不像cookies那样只是临时的。IndexedDB里提供了查询数据的功能，在online和offline模式下都能使用。你可以用IndexedDB存储大型数据。

IndexedDB里数据以对象的形式存储，每个对象都有一个key值索引。IndexedDB里的操作都是事务性的。一种对象存储在一个objectStore里，objectStore就相当于关系数据库里的表。IndexedDB可以有很多objectStore，objectStore里可以有很多对象。每个对象可以用key值获取。

学习要点
（1）打开数据库

 var request = window.indexedDB.open("testDB", 1);

第一个参数是数据库的名称，第二个参数是数据库的版本号。
（3）objectstore
objectStore相当于一张表，里面存储的每条数据和一个键相关联。
我们可以使用每条记录中的某个指定字段作为键值（keyPath），也可以使用自动生成的递增数字作为键值（keyGenerator），也可以不指定。
（2）onupgradeneeded
onupgradeneeded事件在第一次打开页面初始化数据库时会被调用，或在当有版本号变化时。
（3）onsuccess
如果没有版本号变化，而且页面之前被打开过，你会获得一个onsuccess事件。
（4）transaction
增删查改四种操作都是基于transaction

db.transaction(["students"],"readwrite").objectStore("students").delete(rollNo);

截图
这里写图片描述
代码
html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>indexedDB</title>
    <style>
        .container{
            text-align: center; 
            padding-top: 150px;         
        }
    </style>
</head>
<body>
    <div class="container">
        <label for="id">Id</label>
        <input type="text" id="id">
        <br>
        <label for="name">Name</label>
        <input type="text" id="name">
        <br>
        <label for="gender">Gender</label>
        <input type="text" id="gender">
        <br>
        <button id="add">Add</button>
        <button id="modify">Modify</button>
        <button id="delete">Delete</button>
        <button id="query">Query</button>
        <div id="display"></div>
    </div>
    <script src="script.js"></script>
</body>
</html>

window.onload = function() {
    var id = document.getElementById("id");
    var name = document.getElementById("name");
    var gender = document.getElementById("gender");
    var add = document.getElementById("add");
    var modify = document.getElementById("modify");
    var remove = document.getElementById("delete");
    var query = document.getElementById("query");
    var display = document.getElementById("display");

    var request = indexedDB.open("animals", 1);

    request.onupgradeneeded = function() {
        var rq = this.result;
        var store = rq.createObjectStore("mamals", {keyPath: "id"});
        store.createIndex("id", "id", {unique: true});
        store.createIndex("name", "name", {unique: false});
        store.createIndex("gender", "gender", {unique: false});
    };
    request.onsuccess = function() {
        var rq = this.result;
        add.onclick = function() {
            var transaction = rq.transaction(["mamals"], "readwrite");
            var store = transaction.objectStore("mamals");
            store.add({id: parseInt(id.value), name: name.value, gender: gender.value});
        };
        modify.onclick = function() {
            var transaction = rq.transaction(["mamals"], "readwrite");
            var store = transaction.objectStore("mamals");
            store.put({id: parseInt(id.value), name: name.value, gender: gender.value});
        };
        remove.onclick = function() {
            var transaction = rq.transaction(["mamals"], "readwrite");
            var store = transaction.objectStore("mamals");
            store.delete(parseInt(id.value));
        };
        query.onclick = function() {
            display.innerHTML = "";
            var transaction = rq.transaction(["mamals"], "readwrite");
            var store = transaction.objectStore("mamals");
            var index = store.index("id");
            var cursor = index.openCursor();
            cursor.onsuccess = function() {
                var result = this.result;
                if (result) {
                    var p = document.createElement("p");
                    display.appendChild(p);
                    p.innerHTML = result.value.id + " " +
                                  result.value.name + " " +
                                  result.value.gender;
                    result.continue();
                }
            };
        };
    };
};

yz764127031

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
indexedDB学习demo

indexDB IndexedDB是HTML5规范里新出现的浏览器里内置的数据库。对于在浏览器里存储数据，你可以使用cookies或local storage，但它们都是比较简单的技术，而IndexedDB提供了类似数据库风格的数据存储和使用方式。存储在IndexedDB里的数据是永久保存，不像cookies那样只是临时的。IndexedDB里提供了查询数据的功能，在online和offline模
复制链接

扫一扫