html学习笔记（14）

最新推荐文章于 2024-02-09 23:20:47 发布

thystar

最新推荐文章于 2024-02-09 23:20:47 发布

阅读量403

点赞数

分类专栏： html

本文链接：https://blog.csdn.net/thystar/article/details/47616515

版权

html 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

indexedDB数据库：

是一种存储在客户端本地的NoSql数据库；

具体参考：http://www.tfan.org/using-indexeddb/

连接数据库：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script>
        if (!window.indexedDB) {
            window.alert("Your browser doesn't support a stable version of IndexedDB. Such and such feature will not be available.")
        }
        function connectDetabase(){
            var dbName = "indexDBtest";
            var dbVersion = 1;
            var idb;
            var dbConnect = indexedDB.open(dbName, dbVersion);
            dbConnect.onsuccess = function(e){
                idb = e.target.result;
                alert("数据库连接成功");
            }
            dbConnect.onerror = function(){
                alert("连接数据库失败")
            }

        }
    </script>
</head>
<body>
    <input type="button" value="连接数据库" οnclick="connectDetabase()">
</body>
</html>

数据库版本更新：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script>
        function VersionUpdate(){
            var dbName = "indexDBtest";
            var dbVersion = 2;
            var idb;
            var dbConnect = indexedDB.open(dbName, dbVersion);
            dbConnect.onsuccess = function(e){
                idb = e.target.result;
                alert("数据库连接成功");
            }
            dbConnect.onerror = function(){
                alert("连接数据库失败")
            }

            dbConnect.onupgradeneeded = function(e){
                idb = e.target.result;
                var tx = e.target.transaction;
                var oldV = e.oldVersion;
                var newV = e.newVersion;
                alert("版本已更新" + oldV + "---->" + newV)
            }
        }
    </script>
</head>
<body>
<input type="button" value="数据库更新" οnclick="VersionUpdate()">
</body>
</html>

创建对象仓库：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script>
        if (!window.indexedDB) {
            window.alert("Your browser doesn't support a stable version of IndexedDB. Such and such feature will not be available.")
        }
        function CreateObjectStore(){
            var dbName = "indexDBtest";
            var dbVersion = 3;
            var idb;
            var dbConnect = indexedDB.open(dbName, dbVersion);
            dbConnect.onsuccess = function(e){
                idb = e.target.result;
                alert("数据库连接成功");
            }
            dbConnect.onerror = function(){
                alert("连接数据库失败")
            }
            dbConnect.onupgradeneeded = function(e){
                idb = e.target.result;
                var name = "user"; //数据库仓库名称
                var optionalParameters = {
                    keyPath: "userid",
                    autoIncrement:false
                };
                var store = idb.createObjectStore(name, optionalParameters);
                alert("对象仓库创建成功");
            }

        }
    </script>
</head>
<body>
<input type="button" value="创建对象仓库" οnclick="CreateObjectStore()">
</body>
</html>