使用pouchdb做简单的本地数据库增删改查,浏览器端和nodejs端都适用
浏览器端增删改查
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>pouchdb</title> <script src="https://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script> <script src="https://unpkg.com/pouchdb@8.0.1/dist/pouchdb.js"></script> <script src="https://unpkg.com/pouchdb@8.0.1/dist/pouchdb.find.js"></script> <style> th { width: 200px; } td { text-align: center; } </style> </head> <body> <button onclick="查询()">查询</button> <br><br> _id<input type="text" id="_id" /> <br> a<input type="text" id="a" /> b<input type="text" id="b" /> <br><br> <button onclick="新增数据()">新增数据</button> <button onclick="修改数据()">修改数据</button> <button onclick="删除数据()">删除数据</button> <br><br> <table id="example-table" border="1"> <thead> <tr> <th>_id</th> <th>a</th> <th>b</th> </tr> </thead> <tbody> </tbody> </table> <script> var db = new PouchDB('my_db'); async function 查询() { //查 const data = await db.find({ selector: {}, sort: [ { '_id': 'asc' },//asc 升序 desc 降序 ], fields: ['id', 'a', 'b'],//'_id', '_rev', }) console.log('查询', data.docs) const tableBody = document.getElementById('example-table').getElementsByTagName('tbody')[0]; // 清空表格 tableBody.innerHTML = ''; // 循环遍历数组对象,创建表格的行和单元格 for (let i = 0; i < data.docs.length; i++) { const row = tableBody.insertRow(i); const idCell = row.insertCell(0); const aCell = row.insertCell(1); const bCell = row.insertCell(2); idCell.innerHTML = data.docs[i].id; aCell.innerHTML = data.docs[i].a; bCell.innerHTML = data.docs[i].b; } $('#_id').val('') $('#a').val('') $('#b').val('') } async function 新增数据() { const a = $('#a').val() const b = $('#b').val() await db.put({ _id: String(Date.now()), id: Date.now(), a, b, }) console.log('新增数据成功') 查询() } async function 修改数据() { const _id = $('#_id').val() const a = $('#a').val() const b = $('#b').val() if (!_id) { console.log('请填写_id') return } const doc = await db.get(_id) // console.log(doc) await db.put({ ...doc, a, b, }) console.log('修改数据成功') 查询() } async function 删除数据() { const _id = $('#_id').val() if (!_id) { console.log('请填写_id') return } const doc = await db.get(_id) await db.remove(doc) console.log('删除数据成功') 查询() } 查询() </script> </body> </html>
nodejs端增删改查,这不就基本脱离数据库了吗
const PouchDB = require('pouchdb'); PouchDB.plugin(require('pouchdb-find')) var db = new PouchDB('database/my_db'); async function init() { //增 // await db.put({ // _id: String(Date.now()), // id: Date.now(), // title: '11111', // author: '2222' // }) //查 const list = await db.allDocs({ include_docs: true, descending: true, selector: { // title: '111', }, }) //查 const data = await db.find({ descending: false, selector: { // title: '111', }, sort: [ { _id: 'desc' }, ], fields: ['_id', '_rev', 'id', 'title', 'author'], }) // db.put({ // _id: '2', // title: '111', // author: '222' // }).then(function () { // console.log('Document inserted!'); // }).catch(function (error) { // console.error(error); // }); db.remove('1681982410780', '1-fc1d15d67959343816f9601686048f3b') // const res = await db.get('2') // console.log(list.rows) console.log(data) //清空数据库 // await db.destroy() //删除数据 } init()
博客园作者:herry菌朋友,看到这里,关注作者的公众号吧,不漏掉更新哦
![]()
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 周边上新:园子的第一款马克杯温暖上架
· 分享 3 个 .NET 开源的文件压缩处理库,助力快速实现文件压缩解压功能!
· Ollama——大语言模型本地部署的极速利器
· 使用C#创建一个MCP客户端
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型,支持深度思考和联网搜索!