当前位置:首页 > JavaScript

js实现数据库操作

2026-01-31 08:09:27JavaScript

JavaScript 实现数据库操作的方法

JavaScript 可以通过多种方式操作数据库,包括浏览器端的本地存储、服务器端的数据库连接以及使用 ORM 框架等。以下是几种常见的实现方法:

浏览器端存储(客户端数据库)

1. Web Storage API(localStorage/sessionStorage)
适用于简单的键值对存储,数据保存在浏览器中。

// 存储数据
localStorage.setItem('key', 'value');

// 读取数据
const value = localStorage.getItem('key');

// 删除数据
localStorage.removeItem('key');

2. IndexedDB
适用于存储结构化数据,支持事务和索引查询。

js实现数据库操作

const request = indexedDB.open('myDatabase', 1);

request.onupgradeneeded = (event) => {
  const db = event.target.result;
  const store = db.createObjectStore('users', { keyPath: 'id' });
};

request.onsuccess = (event) => {
  const db = event.target.result;
  const transaction = db.transaction('users', 'readwrite');
  const store = transaction.objectStore('users');

  // 添加数据
  store.add({ id: 1, name: 'Alice' });

  // 查询数据
  const getRequest = store.get(1);
  getRequest.onsuccess = () => console.log(getRequest.result);
};

服务器端数据库操作

1. 使用 Node.js 连接关系型数据库(如 MySQL)
通过 mysqlmysql2 模块连接数据库。

const mysql = require('mysql2');
const connection = mysql.createConnection({
  host: 'localhost',
  user: 'root',
  database: 'test'
});

connection.query('SELECT * FROM users', (err, results) => {
  console.log(results);
});

connection.end();

2. 使用 MongoDB(NoSQL 数据库)
通过 mongodbmongoose 驱动操作。

js实现数据库操作

const { MongoClient } = require('mongodb');
const url = 'mongodb://localhost:27017';
const client = new MongoClient(url);

async function run() {
  await client.connect();
  const db = client.db('test');
  const collection = db.collection('users');

  // 插入数据
  await collection.insertOne({ name: 'Bob' });

  // 查询数据
  const users = await collection.find({}).toArray();
  console.log(users);
}

run().catch(console.error);

使用 ORM 框架

1. Sequelize(支持 MySQL/PostgreSQL/SQLite 等)

const { Sequelize, DataTypes } = require('sequelize');
const sequelize = new Sequelize('sqlite::memory:');

const User = sequelize.define('User', {
  name: DataTypes.STRING
});

async function test() {
  await sequelize.sync();
  await User.create({ name: 'Charlie' });
  const users = await User.findAll();
  console.log(users);
}

test();

2. Prisma(现代 ORM 工具)

const { PrismaClient } = require('@prisma/client');
const prisma = new PrismaClient();

async function main() {
  await prisma.user.create({ data: { name: 'Dave' } });
  const users = await prisma.user.findMany();
  console.log(users);
}

main().finally(() => prisma.$disconnect());

注意事项

  • 浏览器端存储(如 IndexedDB)受同源策略限制,无法跨域访问。
  • 服务器端数据库操作需注意安全性(如 SQL 注入),推荐使用参数化查询或 ORM。
  • 对于实时数据同步,可考虑 Firebase 或 Supabase 等 BaaS 服务。

标签: 操作数据库
分享给朋友:

相关文章

vue实现sql操作

vue实现sql操作

Vue 中实现 SQL 操作的方法 Vue 本身是一个前端框架,不直接支持 SQL 操作。但可以通过以下方式间接实现与数据库的交互: 通过后端 API 连接数据库 前端 Vue 通过 HTTP 请求…

vue 实现选题操作

vue 实现选题操作

实现选题操作的基本思路 在Vue中实现选题操作通常涉及数据绑定、事件处理和状态管理。通过v-model或自定义事件实现选项的选择与反选,结合计算属性或方法动态更新选中状态。 单选功能实现 使用v-m…

vue实现操作执行功能

vue实现操作执行功能

Vue 实现操作执行功能的方法 使用 methods 定义方法 在 Vue 组件的 methods 选项中定义需要执行的操作方法。这些方法可以绑定到模板中的事件或直接调用。 export defau…

vue项目操作如何实现

vue项目操作如何实现

Vue 项目基本操作实现 创建 Vue 项目 使用 Vue CLI 快速创建项目: npm install -g @vue/cli vue create project-name cd proje…

启动react项目如何操作

启动react项目如何操作

安装Node.js 确保系统已安装Node.js(建议版本16+),可通过官网下载或使用版本管理工具(如nvm)。安装完成后,在终端运行 node -v 和 npm -v 验证版本。 创建React…

react如何操作引用页面的值

react如何操作引用页面的值

获取引用页面的值 在React中,可以通过useRef钩子或createRef方法创建引用(ref),用于直接访问DOM节点或React组件实例。以下为具体实现方式: 使用函数组件与useRef…