indexedDB的基本使用

最新推荐文章于 2024-01-31 17:43:14 发布
最新推荐文章于 2024-01-31 17:43:14 发布
阅读量381 收藏
点赞数
分类专栏： web前端 文章标签： html5 indexedDB
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhanghao86_/article/details/76943980
版权

html代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

<!--创建一个容器-->
<div class="addNoteView">
    <input type="text" placeholder="标题">
    <textarea name="" id="" cols="30" rows="10" placeholder="正文"></textarea>
    <div class="addButton">保存</div>
</div>
<!--<div class="showNote">-->
    <!--<div class="noteListView"></div>-->
    <!--<div class="noteContentView"></div>-->
<!--</div>-->

<div class="noteList">
    <h2>日记列表</h2>
</div>

<script src="app.js"></script>
</body>
</html>

style.css代码：

*{
    margin: 0;
    padding: 0;
}

.addNoteView input,.addNoteView textarea{
    display:block ;
    padding: 10px 30px;
}

.addNoteView{
    width: 80%;
    margin: 0 auto;
}
.addNoteView input{
    height: 44px;
    width: 100%;
}
.addNoteView textarea{
    height: 200px;
    width: 100%;
}
.addButton{
    width: 50%;
    margin: 0 auto;
    height: 35px;
    background-color: #3e3aff;
    border: none;
    margin-top: 100px;
    text-align: center;
    line-height: 35px;
}
.noteList{
    width: 80%;
    margin:0 auto;
    height:200px;
    border: 1px solid #000;
    margin-top: 20px;
}
.noteList h2{
    text-align: center;
}

app.js代码：


(function () {

    //创建数据库对象
    var database=null;
    // 创建、打开数据库
    function openDB() {
        // open(数据库名字，版本号)
        var request=indexedDB.open("noteDB",4);
        // 错误提示
        request.onerror=function (error) {
            console.log(error)
        };
        // 数据库打开成功
        request.onsuccess=function () {
            console.log("打开数据库成功");
            // 定义数据库对象
            database=this.result;
        };
        // 更新数据库 只在数据库版本号不相同时调用
        request.onupgradeneeded=function () {
            // 在建表的时候 不需要每一次都创建

            console.log("更新数据库成功",this);
            // 获得到数据库对象IDBDatabase
            var db=this.result;
            // 设置表名
            var tableName="note";
            // contains()判断数据库里是否有note这个表名
            if(!db.objectStoreNames.contains(tableName)){
                // 建表
                var objectStore=db.createObjectStore(tableName,{keyPath:"date"});
                // 创建表里面的字段 需要 至少传入两个参数
                // createIndex(字段的名字，该字段对应的内容)
                objectStore.createIndex("title","title");
                objectStore.createIndex("content","content");
                objectStore.createIndex("date","date");
            }
        };
    }

    // 添加数据的方法
    function addData(info) {
        // 获得事务得对象
        var transaction=database.transaction(["note"],"readwrite");
        // 存放某一种类型的容器
        var objectStore=transaction.objectStore("note");
        // 添加数据
        objectStore.add(info);

    }
    // 获得数据方法
    function getData(callback) {
        // 获得事务得对象
        var transaction=database.transaction(["note"],"readwrite");
        // 存放某一种类型的容器
        var objectStore=transaction.objectStore("note");
        // 获取数据方法(此处只通过keypath获取对应的一条数据)
         var getData=objectStore.get(1502184923387);
        // 把结果放入回调函数中 方便使用
        callback(getData);
    }
    // 删除数据方法
    function deleteData() {
        // 获得事务得对象
        var transaction=database.transaction(["note"],"readwrite");
        // 存放某一种类型的容器
        var objectStore=transaction.objectStore("note");
        // 删除数据(此处只通过keypath删除对应的一条数据)
        objectStore.delete(1502184923387);
    }

    // 把输入的内容存储到浏览器中的方法
    function loadView() {
        var titleInput=document.querySelector(".addNoteView input");
        var contentInput=document.querySelector(".addNoteView textarea");
        var saveButton=document.querySelector(".addButton");
        saveButton.onclick=function () {
            var title=titleInput.value;
            var content=contentInput.value;
            var timeStamp=new Date().getTime();
            // 调用添加数据方法，传入字面量对象
            addData({
                title:title,
                content:content,
                date:timeStamp
            });
            // 调用获取数据方法，获取数据
            getData(function (data) {
                console.log(data);
            });
            deleteData();
        }

    }

    // 初始化函数
    function init() {
        // 判断如果浏览器不支持indexedDB则跳出不执行
        if(!indexedDB){
            return;
        }


        openDB();
        loadView();
    }

    init();

})();

zhanghao86_
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
indexDB基础操作
sinat_41747081的博客
09-03 1503
本文参考的是：https://www.jianshu.com/p/4c74cbe60d83，自己整理了一下： 一、打开数据库 var myDB = { name: 'factory', version: 3, db: null, }; // factory相当于数据库的名字 var request = window.indexedDB.open(myDB.name, myDB.vers...
indexedDB的基础使用—事务
Meskjei的博客
04-01 2364
。事务是indexedDB数据库中非常重要的一个概念，因为任何对于数据库中数据的读和修改的操作只能在事务中进行。 文章目录事务的创建IDBTransaction对象属性事件方法多个事务的执行顺序 事务的创建 事务由IDBDatabase对象调用其transaction方法创建。 let IDBTransaction = IDBDatabase.transaction(storeNames, mod...
BlasorIndexedDb:使用Blazor从C＃管理indexedDb
04-05
BlasorIndexedDb 使用Blazor从C＃管理indexedDb 依存关系
使用 IndexedDB
a956163985的专栏
09-07 2707
IndexedDB 开发指南 | Node.js 教程|培训|咨询 document.documentElement.className = 'js'; IndexedDB -> Using IndexedDB 的一篇长文。针对最新规范的 IndexedDB API 进行了详细讲解，针对 IndexedDB 的设计原理，基本模式，使用方法，
IndexedDB基本操作学习总结
bgbgbgmmm的博客
07-20 1009
前言 最近在做一个脱机的项目，数据需要保存到前端，前端页面的操作大部分也是基于IndexdDB的，而该项目之前用的也是IndexdDB，在这里和大家分享下学习到的IndexdDB基本操作和学习时的遇到的一些坑。 ------ 学习，分享 大纲 一，IndexdDB简要 二，判断浏览器是否...
IndexedDB 数据库的使用
qq_40409143的博客
05-31 1183
前端的存储方式 前端的存储，可以使得页面交互更加友好，特别是在保存草稿，网络差的情况下对用户来说是很有用的。 前端的存储方式有多种，像 Local storage、Session storage、IndexedDB、Web Sql、Cookies等这几种。 使用场景 我们比较常见的是本地存储，像用户的基本信息，需要在多个页面需要的时候，可以在登入的时候存储在本地，及时下次退出之后，登入信息还可以保存，这样减少了用户的输入量。 但是，它也是有缺点的，它的存储大小只有5M，只能满足相对较小的数据存储，如果是大
使用indexedDB的正确打开方式和多种使用场景
qq_44859233的博客
03-16 2215
针对以下场景，在不使用库的情况下，如何使用indexedDB数据库, 下面将介绍使用直接使用indexedDB的痛点, 最后给出解决方案一张数据表,大家应该都能够操作,但你会发现,只是简简单单的使用api,会出现一些意外情况,怎么解决这样的意外情况呢?请看下面的小demo 但是当你删除这张表, 刷新这个页面, 再次打开时,你就会发现不能正常进行操作了Uncaught DOMException: Failed to execute ‘transaction’ on ‘IDBDatabase’: One of
IndexedDB基本使用共22页.pdf.zip
10-29
这个压缩包“IndexedDB基本使用共22页.pdf.zip”包含了22页关于IndexedDB的基础教程，旨在帮助开发者理解和掌握这个技术的核心概念。 IndexedDB是一个NoSQL数据库，允许开发者创建索引并进行高效的数据检索。它对于...
IndexedDB 基本使用.pdf
08-12
IndexedDB 基本使用
html5 初试 indexedDB(推荐)
09-27
相比于传统的Web Storage（localStorage和sessionStorage），IndexedDB提供了更强大的数据管理能力，支持索引和复杂的查询操作，适用于需要高效访问大量数据的应用场景，如离线应用、数据缓存等。 首先，我们来看...
使用IndexedDB的完整指南
haming11的博客
06-02 1849
IndexedDB是用于客户端存储的低级API。它是一个全面、持久的NoSQL存储系统，可在浏览器中使用，允许存储不同类型的数据，例如：文件或Blob图像和视频结构化数据，如对象、列表和数组IndexedDB可以用于各种场景，如缓存、PWA和游戏，还支持事务。它的开发是为了有效地满足web应用程序的多种需求。建立我们的项目我们不会做任何花哨的设置，因为IndexedDB是在网络上本地运行的。
前端本地储存数据库 IndexedDB 零基础入门知识详解
starry-sea1412的博客
06-04 2077
IndexedDB 是一种在浏览器端存储大量结构化数据的 API。它是 HTML5 标准中的一部分，和 Web SQL Database 和 localStorage 类似都是浏览器端本地数据存储技术。由于 IndexedDB 的功能非常强大，所以学习和使用 IndexedDB 需要对浏览器端存储技术、JavaScript 异步编程、数据库设计和查询等方面都有深入了解。
前端本地存储数据库IndexedDB完整教程
qq_44760844的博客
03-14 2355
在人们的印象中，可能觉得只有做后端的小伙伴才会接触到数据库。其实在前端的领域里面也有数据库，只是可能用的比较少，因为前端存储方案有很多，比如cookie、sessionstorage等等。在浏览器上有两种数据库：webSQL和IndexedDB。但是如果在浏览器上需要用到数据库一般会使用Indexed DB数据库，webSQL基本上已经废弃了，具体原因小伙伴可以下来自己查查，今天主要就讲解Indexed DB数据库的使用。
indexeddb使用场景
最新发布
Thea12138的博客
01-31 327
离线Web应用程序：IndexedDB允许Web应用程序在浏览器中存储和检索数据，即便是在没有网络连接的情况下，用户仍然能够访问本地保存的信息。电子商务网站：对于需要本地存储购物车和订单历史记录的电子商务网站，IndexedDB可以高效地存储和管理这些数据，提升用户体验。数据可视化工具：IndexedDB还能用于数据可视化工具，允许用户在离线状态下处理数据，并在下次连接时将数据同步回云数据库。综上所述，IndexedDB广泛应用于不同类型的Web应用程序和服务，为用户提供流畅且灵活的用户体验。
本地数据存储之 IndexedDB 基本封装
qq_22648203的博客
10-20 2830
在HTML5本地存储——Web SQL Database提到过Web SQL Database实际上已经被废弃，而HTML5的支持的本地存储实际上变成了Local Storage和Session Storage与IndexedDB。Web Storage使用简单字符串键值对在本地存储数据，方便灵活，但是对于大量结构化数据存储力不从心，IndexedDB是为了能够在客户端存储大量的结构化数据，并且使用
indexedDB 基本使用
唐立彤的博客
12-20 2419
indexedDB 简介:  indexedDB 是一种使用浏览器存储大量数据的方法。它创造的数据可以被查询，并且可以离线使用。 indexedDB 有以下特点: indexedDB 是 WebSQL 数据库的取代品 indexedDB遵循同源协议(只能访问同域中存储的数据，而不能访问其他域的) API包含异步API
前端存储之indexedDB
weixin_30618985的博客
12-07 699
在前一个阶段的工作中，项目组要开发一个平台，为了做出更好的用户体验，实现快速、高质量的交互，从而更快得到用户的反馈，要求在前端把数据存储起来，之后我去研究了下现在比较流行的前端存储数据库，找到了indexedDB，于是便对indexedDB做了一个较为深入的探索，此文就是记录探索过程的一些心得体会。 indexedDB为何物 在使用一个技术之前，先搞清楚它是什么，这对你的理解很重要，从DB就可...
浅析IndexedDB存数结构
狂奔的木木
05-08 939
IndexedDB 是HTML5中的一种数据存储方式。用来帮助网站，在浏览器本地，存储结构比较复杂的数据。它和HTML5中其它的数据存储方式有一些共性： 1.和我们熟知的cookies类似，IndexedDB是每个域名独立存储数据的。 对cookies不熟悉的童鞋，可以顺便学习一下cookies，不过这不影响大家理解IndexedDB。网上cookies的教材和文章非常多，这里不一一列
IndexedDB初步
大道至简
07-31 317
IndexedDB是一种低级API，用于客户端存储大量结构化数据(包括, 文件/ blobs)。该API使用索引来实现对该数据的高性能搜索。虽然 Web Storage 对于存储较少量的数据很有用，但对于存储更大量的结构化数据来说，这种方法不太有用。IndexedDB提供了一个解决方案。这是MDN IndexedDB的主要着陆页 - 这里，我们提供了完整的API参考和使用指南，浏览器支持细节，以及关键概念的一些解释的链接。
indexeddb 使用实例
09-21
下面是一个基本的 IndexedDB 示例： ```javascript // 打开 IndexedDB 数据库 var request = window.indexedDB.open("myDatabase", 1); // 处理成功和失败事件 request.onerror = function(event) { console.log...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值