index DB使用方法，学生成绩信息存储本地

最新推荐文章于 2024-06-22 15:48:58 发布

密西西比河呀呀呀

最新推荐文章于 2024-06-22 15:48:58 发布

阅读量1.5k

点赞数

文章标签：前端 html5

本文链接：https://blog.csdn.net/m0_60112757/article/details/127339504

版权

indexDB是一个存放在服务器端的本地数据库，类似于NoSQL。

操作过程：

1、创建或打开数据库：indexedDB.open("mydb", 1);

2、创建事务：let tx = db.transaction(['students'], 'readwrite');

3、获取数据对象：let store = tx.objectStore("students");

3、添加数据：store.add(data);

4、查找和删除数据需要使用游标。

（1）打开游标：let getRq = store.openCursor()

（2）删除数据：cursor.delete()

举个栗子，这是一个学生成绩信息存储本地的功能。可以添加数据，删除数据，修改数据。

这是HTML部分，主要实现查看、添加、删除数据功能。

//主页面HTML部分
<body>
    <h1>indexed Databases</h1>
    <input type="button" value="创建数据库" onclick="createDB()">

    <input type="button" value="创建对象仓库" onclick="createObjectStore()">
    <fieldset>
        <legend>学生成绩信息</legend>
        <ul>
            <li>学号:<input type="number" value="" name="" id="code" /></li>
            <li>姓名:<input type="text" value="" name="" id="name" /></li>
            <li>班级:<input type="text" value="" name="" id="classes" /></li>
            <li>课程:<input type="text" value="" name="" id="course" /></li>
            <li>生日:<input type="text" value="" name="" id="brith" /></li>
            <li>成绩:<input type="text" value="" name="" id="grade" /></li>
        </ul>
        <input type="button" value="保存" onclick="save()">
    </fieldset>
    <button onclick="searchAll('table')">查看所有<