Electron学习笔记（四）

相关笔记

• Electron学习笔记（一）
• Electron学习笔记（二）
• Electron学习笔记（三）
• Electron学习笔记（四）
• Electron学习笔记（五）
• Electron学习笔记（六）
• 使用 electron-vite-vue 构建 electron + vue3 项目并打包

笔记说明

文本为学习《Electron 实战 入门、进阶与性能优化 刘晓伦 著》时所记录的笔记 主要将书本上的案例运行一遍，针对原理部分并无相关记录。笔记记录于 2023年9月。

六、数据

1、使用本地文件持久化数据

(1) 用户数据目录

在 src/background.js 文件内进行测试：

console.log(app.getPath('appData')); // C:\Users\asus\AppData\Roaming
console.log(app.getPath('userData')); // C:\Users\asus\AppData\Roaming\electron_basic04 （此处为 Windows 系统）
console.log(app.getPath('home')); // C:\Users\asus
console.log(app.getPath('desktop')); // D:\桌面

参数说明：

appData：应用程序用户个性化数据目录。

userData：根据操作系统返回具体的用户个性化数据存储目录。

home：用户的根目录。

其他参数：documents、downloads、pictures、music、temp、exe

重置用户数据目录：

console.log(app.getPath('appData')); // 修改前：C:\Users\asus\AppData\Roaming

// 重置用户数据目录（参数一：要重置的路径的名称，参数二：具体的路径）
app.setPath('appData','D:\\桌面')

console.log(app.getPath('appData')); // 修改后：D:\桌面

(2) 读写本地文件

保存用户数据到磁盘：（此处创建了一个名为 test.txt 的文件，文件内容为 abc）

let fs = require("fs-extra");
let path = require("path");
let dataPath = app.getPath("userData");

// 写入的文件路径
dataPath = path.join(dataPath, "test.txt");
fs.writeFileSync(dataPath, 'abc', { encoding: 'utf8' })

效果展示：

读取文件内容：

let fs = require("fs-extra");
let path = require("path");
let dataPath = app.getPath("userData");

dataPath = path.join(dataPath, "test.txt");
let data = fs.readFileSync(dataPath,{ encoding: 'utf8' });
console.log(data); // 读取的文件内容为：abc

(3) 第三方库

lowdb： 可以快速高效地操作数组、JSON对象。

//创建数据访问对象
const low = require('lowdb')
const FileSync = require('lowdb/adapters/FileSync')
const adapter = new FileSync('db.json')
const db = low(adapter)
//查找数据
db.get('posts').find({ id: 1 }).value();
//更新数据
db.get('posts').find({ title: 'low!' }).assign({ title: 'hi!'}).write();
//删除数据
db.get('posts').remove({ title: 'low!' }).write();
//排序数据
db.get('posts').filter({published: true}).sortBy('views').take(5).value();

electron-store： 一个专门为 Electron 设计的，轻量的数据库，支持数据加密，无需指定文件路径可直接将数据保存在用户的 userData 目录下。

const Store = require('electron-store');
const store = new Store();
store.set('key', 'value');
console.log(store.get('key'));            //输出value 
store.set('foo.bar', true);               //可以级联设置JSON对象的值
console.log(store.get('foo'));            //输出 {bar: true}
store.delete('key');
console.log(store.get('unicorn'));        //输出 undefined

---

2、读写受限访问的 Cookie

访问第三方网页时写入并读取 cookie：

在 src/background.js 文件核心代码：

const path = require('path');

async function createWindow() {
    const win = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
            enableRemoteModule: true,
            preload: path.join(__static, 'preload.js'),
        }
    });

    win.loadURL('https://www.baidu.com/');
    win.webContents.openDevTools();
}

public/preload.js 文件内容如下：

const { remote } = require("electron");

//获取Cookie
let getCookie = async function (name) {
    let cookies = await
        remote.session.defaultSession.cookies.get({ name });
    if (cookies.length > 0) return cookies[0].value;
    else return '';
}

//设置Cookie
let setCookie = async function (cookie) {
    await remote.session.defaultSession.cookies.set(cookie);
}


window.onload = function () {
    setCookie({url:'https://www.baidu.com/',name: 'xiaom',value: 'abc123'});

    console.log(getCookie('xiaom'));
}

效果展示：

---

3、清空浏览器缓存

await remote.session.defaultSession.clearStorageData({
    storages: 'cookies,localstorage'
})