当前位置：首页 > JavaScript

用js实现读写

2026-04-07 13:25:39JavaScript

使用 File System Access API 读写文件

现代浏览器支持 File System Access API，允许网页应用直接读写本地文件系统。

读取文件

async function readFile() {
  const [fileHandle] = await window.showOpenFilePicker();
  const file = await fileHandle.getFile();
  const content = await file.text();
  console.log(content);
}

写入文件

async function writeFile(content) {
  const handle = await window.showSaveFilePicker();
  const writable = await handle.createWritable();
  await writable.write(content);
  await writable.close();
}

使用 Node.js fs 模块

在 Node.js 环境中，可以使用内置的 fs 模块进行文件操作。

同步读写

const fs = require('fs');

// 同步读取
const data = fs.readFileSync('file.txt', 'utf8');

// 同步写入
fs.writeFileSync('file.txt', 'Hello World', 'utf8');

异步读写

用js实现读写

const fs = require('fs/promises');

// 异步读取
async function readFile() {
  try {
    const data = await fs.readFile('file.txt', 'utf8');
    console.log(data);
  } catch (err) {
    console.error(err);
  }
}

// 异步写入
async function writeFile() {
  try {
    await fs.writeFile('file.txt', 'Hello World', 'utf8');
  } catch (err) {
    console.error(err);
  }
}

使用浏览器 FileReader API

对于传统浏览器文件读取，可以使用 FileReader API。

读取文件内容

function handleFileSelect(event) {
  const file = event.target.files[0];
  const reader = new FileReader();

  reader.onload = function(e) {
    const content = e.target.result;
    console.log(content);
  };

  reader.readAsText(file);
}

document.getElementById('fileInput').addEventListener('change', handleFileSelect);

使用 localStorage 进行简单数据存储

对于少量数据的持久化存储，可以使用 localStorage。

存储数据

用js实现读写

localStorage.setItem('key', 'value');

读取数据

const value = localStorage.getItem('key');

删除数据

localStorage.removeItem('key');

使用 IndexedDB 进行复杂数据存储

对于更复杂的客户端存储需求，可以使用 IndexedDB。

打开数据库

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

request.onupgradeneeded = function(e) {
  const db = e.target.result;
  const store = db.createObjectStore('MyStore', { keyPath: 'id' });
};

request.onsuccess = function(e) {
  const db = e.target.result;
  // 数据库操作
};

标签: js