当前位置:首页 > 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');

异步读写

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。

存储数据

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

读取数据

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

删除数据

localStorage.removeItem('key');

使用 IndexedDB 进行复杂数据存储

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

打开数据库

用js实现读写

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
分享给朋友:

相关文章

js实现动画

js实现动画

使用 CSS 动画与 JavaScript 控制 通过 JavaScript 动态添加或移除 CSS 类来触发动画。CSS 定义关键帧(@keyframes),JavaScript 通过 classL…

js 进度条的实现

js 进度条的实现

使用 HTML 和 CSS 创建基础进度条 HTML 结构可以简单使用一个 div 元素作为容器,内部嵌套另一个 div 表示进度: <div class="progress-containe…

js实现图片放大缩小

js实现图片放大缩小

实现图片放大缩小的基础方法 使用CSS的transform: scale()属性可以快速实现图片的放大缩小效果。通过JavaScript动态修改该属性值: const img = document.…

js实现类

js实现类

JavaScript 实现类的几种方式 JavaScript 是一种基于原型的语言,但在 ES6 之后引入了 class 语法糖,使得实现类更加直观。以下是几种常见的实现方式: 使用构造函数 传统的…

js实现vr

js实现vr

使用WebXR API实现VR体验 WebXR是浏览器中实现VR和AR体验的标准API,它取代了早期的WebVR。现代浏览器如Chrome、Edge和Firefox已支持WebXR。 // 初始化W…

js实现百叶窗

js实现百叶窗

使用CSS和JavaScript实现百叶窗效果 通过CSS动画和JavaScript事件监听可以实现百叶窗效果。核心思路是将内容区域分割为多个条状元素,通过控制它们的展开/折叠状态来模拟百叶窗。 &…