正文

js如何创建json数据库中

admin
admin V管理员 /0 评论 /7 阅读
1027

JavaScript 如何创建 JSON 数据库：从基础到实践

在 Web 开发中，数据存储与管理是核心环节之一，JSON（JavaScript Object Notation）以其轻量级、易读、易解析的特性，成为前后端数据交互的“通用语言”，而“JSON 数据库”并非传统意义上的数据库（如 MySQL、MongoDB），更常指基于 JSON 格式的本地存储方案（如浏览器中的 localStorage/sessionStorage）或以 JSON 为数据模型的 NoSQL 数据库（如 MongoDB），本文将围绕 JavaScript 如何创建和管理这类“JSON 数据库”，从基础概念到实践代码,带你全面核心方法。

理解“JSON 数据库”的两种核心形态

js如何创建json数据库中

在代码之前，需明确“JSON 数据库”的两种常见形态,这决定了不同的实现方式：

浏览器端：基于 JSON 的本地存储

浏览器原生提供 localStorage 和 sessionStorage，它们只能存储字符串类型的数据，若要存储 JSON 对象，需通过 JSON.stringify() 将对象转为字符串，读取时再用 JSON.parse() 还原，这种方案适合存储用户偏好、缓存数据等轻量级场景,无需后端支持。

服务端：原生 JSON 文件数据库

对于小型项目或原型开发，可直接用 JSON 文件作为“数据库”（如 data.json），通过 Node.js 的文件操作模块（fs）读取、修改文件内容，模拟数据库的增删改查（CRUD）操作，这种方案无需数据库服务，适合数据量小、并发低的场景。

专业 NoSQL 数据库：MongoDB

MongoDB 是文档型数据库，数据以 BSON（二进制 JSON）格式存储，本质上与 JSON 高度兼容，通过 Node.js 的官方驱动 mongodb，可连接 MongoDB 并进行 JSON 文档的增删改查,适合生产环境的中大型应用。

浏览器端：用 localStorage 创建 JSON 数据库

localStorage 是浏览器提供的键值存储方案，数据持久化在本地，即使关闭浏览器也不会丢失，以下是创建和管理 JSON 数据库的完整流程。

初始化：存储 JSON 数据

假设我们要存储一个用户列表（JSON 数组），需先通过 JSON.stringify() 将对象转为字符串：

// 1. 定义 JSON 数据（用户列表）
const users = [
  { id: 1, name: "张三", age: 25, email: "zhangsan@example.com" },
  { id: 2, name: "李四", age: 30, email: "lisi@example.com" }
];
// 2. 存储到 localStorage（键：users，值：JSON 字符串）
localStorage.setItem("users", JSON.stringify(users));
console.log("JSON 数据已存储到 localStorage");

读取：从 localStorage 获取 JSON 数据

读取时需用 JSON.parse() 将字符串还原为 JavaScript 对象：

// 1. 从 localStorage 获取数据（字符串格式）
const usersStr = localStorage.getItem("users");
// 2. 解析为 JSON 对象
const usersData = JSON.parse(usersStr);
// 3. 使用数据（如遍历用户列表）
usersData.forEach(user => {
  console.log(`用户ID: ${user.id}, 姓名: ${user.name}`);
});

更新：修改 JSON 数据并重新存储

JSON 数据不可变，需先读取、修改,再覆盖存储：

// 1. 读取现有数据
const usersData = JSON.parse(localStorage.getItem("users"));
// 2. 修改数据（如添加新用户）
const newUser = { id: 3, name: "王五", age: 28, email: "wangwu@example.com" };
usersData.push(newUser);
// 3. 重新存储（覆盖原数据）
localStorage.setItem("users", JSON.stringify(usersData));
console.log("数据已更新，新用户添加成功");

删除：移除特定数据或清空数据库

支持删除单个键或清空所有数据：

// 1. 删除单个数据（如删除 ID=2 的用户）
const usersData = JSON.parse(localStorage.getItem("users"));
const updatedUsers = usersData.filter(user => user.id !== 2); // 过滤掉目标用户
localStorage.setItem("users", JSON.stringify(updatedUsers));
// 2. 清空整个 JSON 数据库
localStorage.clear();
console.log("localStorage 已清空");

完整示例：简易本地用户管理

结合以上操作，实现一个简单的用户管理页面（HTML + JavaScript）：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">JSON 本地数据库示例</title>
</head>
<body>
  <h1>用户管理</h1>
  <button onclick="addUser()">添加用户</button>
  <button onclick="showUsers()">查看用户</button>
  <button onclick="clearUsers()">清空数据</button>
  <div id="output"></div>
  <script>
    // 初始化数据（localStorage 为空）
    if (!localStorage.getItem("users")) {
      const initialUsers = [
        { id: 1, name: "张三", age: 25 },
        { id: 2, name: "李四", age: 30 }
      ];
      localStorage.setItem("users", JSON.stringify(initialUsers));
    }
    // 添加用户
    function addUser() {
      const name = prompt("请输入用户名：");
      const age = prompt("请输入年龄：");
      const users = JSON.parse(localStorage.getItem("users"));
      const newUser = {
        id: users.length > 0 ? Math.max(...users.map(u => u.id)) + 1 : 1,
        name,
        age: parseInt(age)
      };
      users.push(newUser);
      localStorage.setItem("users", JSON.stringify(users));
      alert("用户添加成功！");
    }
    // 查看用户
    function showUsers() {
      const users = JSON.parse(localStorage.getItem("users"));
      const output = document.getElementById("output");
      if (users.length === 0) {
        output.innerHTML = "<p>暂无用户数据</p>";
      } else {
        output.innerHTML = "<ul>" + users.map(u => 
          `<li>ID: ${u.id}, 姓名: ${u.name}, 年龄: ${u.age}</li>`
        ).join("") + "</ul>";
      }
    }
    // 清空数据
    function clearUsers() {
      localStorage.removeItem("users");
      document.getElementById("output").innerHTML = "<p>数据已清空</p>";
    }
  </script>
</body>
</html>

服务端：用 Node.js + JSON 文件创建数据库

对于需要服务端操作的场景，可通过 Node.js 的 fs 模块读写 JSON 文件，模拟数据库功能，假设我们有一个 data.json 文件作为“数据库”：

初始化 JSON 文件数据库

创建 data.json,存储初始数据：

{
  "users": [
    { "id": 1, "name": "张三", "age": 25 },
    { "id": 2, "name": "李四", "age": 30 }
  ],
  "posts": [
    { "id": 1, "title": "JavaScript 入门", "content": "JS 是一种脚本语言" }
  ]
}

读取 JSON 文件数据

使用 fs.readFileSync() 同步读取文件（或 fs.readFile() 异步读取）：

const fs = require('fs');
// 读取 JSON 文件
function readDatabase() {
  try {
    const data = fs.readFileSync('data.json', 'utf8');
    return JSON.parse(data);
  } catch (error) {
    console.error("读取数据库失败:", error);
    return { users: [], posts: [] }; // 返回空数据结构
  }
}
const db = readDatabase();
console.log("当前数据库:", db);

写入 JSON 文件数据

修改数据后，通过 fs.writeFileSync() 写入文件（需用 JSON.stringify() 格式化，null 和 2 参数用于美化输出）：

// 写入 JSON 文件
function writeDatabase(data) {
  try {
    fs.writeFileSync('data.json', JSON.stringify(data, null, 2), 'utf8');
    console.log("数据写入成功");
  } catch (error) {
    console.error("写入数据库失败:", error);
  }
}
// 示例：添加新用户
const db = readDatabase();
const newUser = { id: 3, name: "王五", age: 28 };
db.users.push(newUser);
writeDatabase(db);

实现完整的 CRUD 操作

封装成工具函数,方便调用：

const fs = require('fs');
// 数据库文件路径
const DB_FILE = 'data.json';
// 读取数据库
function read() {
  try {
    const data = fs.readFileSync(DB_FILE, 'utf8');
    return JSON.parse(data);
  } catch (error) {
    return { users
内容声明:本文中引用的各种信息及资料(包括但不限于文字、数据、图表及超链接等)均来源于该信息及资料的相关主体(包括但不限于公司、媒体、协会等机构》的官方网站或公开发表的信息，内容仅供参考使用!本站为非盈利性质站点,本着免费分享原则,发布内容不收取任何费用也不接任何广告! 邮箱：i77i88@88.com
-- 展开阅读全文 --