浏览器indexedDB操作

最新推荐文章于 2024-08-08 10:00:07 发布

zp_field

最新推荐文章于 2024-08-08 10:00:07 发布

阅读量1.7k

点赞数

分类专栏：浏览器本地存储数据库文章标签：浏览器 indexedDB 数据库本地存储

本文链接：https://blog.csdn.net/zp_field/article/details/72734305

版权

本文介绍了浏览器中的IndexedDB数据库，一种类似于NoSQL的非关系型数据库，特别适合存储复杂数据结构。它提供了按索引查找、全量查找和范围查找等功能，并且相比localStorage，IndexedDB在数据交互上更为便捷，但查询效率较低。文章还提到，IndexedDB可以在同一主域名下跨数据库访问，支持创建多个数据库和objectStorage。作者分享了封装的方法，以实现更灵活的查询方式，如模糊查询和属性值查询，旨在帮助开发者更好地利用IndexedDB。

摘要由CSDN通过智能技术生成

浏览器indexedDB操作

最近在浏览器中发现Storage下的IndexedDB数据库很感兴趣
制作了一些封装的方法,进行学习和测试并有了下面的一段代码
IndexedDB是在浏览器中存在的对象存储
类似NoSQL数据库,存储document对象文档
相比常见的关系型数据库更容易和js交互
简化了数据转化操作,在前端给开发人员开辟了一块可以存放大量复杂数据的空间
相比localStorage的key/value的字符串存储方式省去了JSON.XXX的转码过程,但数据库运行查找时间成本较大,适合存储复杂的数据结构,对于简单的数值存储还是建议使用cookie和local、session等作为存储媒介
indexedDB在相同主域名下可以访问，可以建立多个数据库，数据库内部可以建立objectStorage（对象存储or表）
indexedDB的原声接口可以实现：
1. 数据的按照指定索引查找
2. 数据全部查找
3. 按照大于、小于、等于或范围查找
通过封装可以实现模糊查询、属性值查询方式
希望对有需要的朋友可以有所帮助
不定期更新…

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>IndexedDB操作</title>
</head>
<body>
<label><input type="text"></label>
<button id="create">新建表student</button>
<button id="add">批量新增student</button>
<button id="delete">关键词搜索删除</button>
<button id="search">测试查询</button>
<button id="fuzzySearch">模糊查询</button>
<table id="table"></table>
<script>
    function getRandom(max, min) {
    
        max = max || 100;
        min = min || 0;
        return Math.floor(min + Math.random() * max);
    }
    var dbName = "MyDatabase",
        tableName = 'students',
        addData = [
            {uid: getRandom(9999), name: "qwer", email: "@qq.com"},
            {uid: getRandom(9999), name: "asdf", email: "@163.com"},
            {uid: getRandom(9999), name: "zxcv", email: "@sina.com"},
            {uid: getRandom(9999), name: "tyuo", email: "@live.com"},
            {uid: getRandom(9999), name: "ghjk", email: "@baidu.com"}
        ],
        Btn_create = document.getElementById('create'),
        Btn_add = document.getElementById('add'),
        Btn_delete = document.getElementById('delete'),
        Btn_search = document.getElementById('search'),
        Btn_fuzzy = document.getElementById('fuzzySearch'),
        input = document.getElementsByTagName('input')[0];


    //初始化数据库
    var indexedDB = window.indexedDB || window.msIndexedDB || window.mozIndexedDB || window.webkitIndexedDB;

最低0.47元/天解锁文章

zp_field

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
浏览器indexedDB操作

浏览器indexedDB操作最近在浏览器中发现Storage下的IndexedDB数据库很感兴趣制作了一些封装的方法,进行学习和测试并有了下面的一段代码 IndexedDB是在浏览器中存在的对象存储类似NoSQL数据库,存储document对象文档相比常见的关系型数据库更容易和js交互简化了数据转化操作,在前端给开发人员开辟了一块可以存放大量复杂数据的空间相比localStor
复制链接

扫一扫

专栏目录