Electron那些事09：本地数据

【前言】

electron开发桌面应用后，不可避免的要记录一些本地数据，

类似web浏览器中的cookie，session，localstorage，websql，indexeddb这些

本节来讲一下electron怎么记录本地数据

【本地日志】

Electron那些事06：本地日志和异常上报_uikoo9的博客-CSDN博客

这一节讲了通过log4js记录本地日志，文章内只讲了传一个filename：vq.log，

但是并没有说这个日志文件会记录到那里，本节来探索一下

首先回顾一下写日志的代码

渲染进程通过preload注入进来的函数直接使用

本地调试的时候可以看到，在项目下生成了electron.log文件，内容如下

以上代码详见：GitHub - insistime-guides/electron-guides at 0.2.8 

 

打包为dmg文件，并安装打开后，操作后看下日志记录到了哪里

操作完后可以看到日志文件生成到了用户目录下

而这个并不是我们想要的效果，需要将日志文件挪到一个指定的位置

【获取系统目录】

如果获取各种系统目录呢，比如用户目录，缓存目录等，

electron提供了app.getPath的方法，详见

app | Electron 

可以看到，这个方法可以获取到很多系统目录，实践一下

可以看到logs文件夹默认在用户下Library/Logs/app目录下，

如果想修改log到其他文件夹下也可以通过这个api实现

 

【修改log4js日志目录】

修改log4js日志目录也比较简单，只要getLogger的时候传入完整的filename即可

可以看到logs目录下就生成了日志文件

以上代码详见：GitHub - insistime-guides/electron-guides at 0.3.0

【记录本地数据】

回到正题，如何记录本地数据呢，上面知道了一些常用的系统文件夹，

就可以通过将数据记录到文件内，文件保存到常用文件夹内，记录本地数据，

或者一些本地数据库内，windows下可以记录注册表等

本文使用之前封装好的一个本地读写文件的库为例

qiao-config - npm

使用比较简单，如下

 

结合本节内容，将文件存放在userData的位置

'use strict';

// path
const path = require('path');

// electron
const { app } = require('electron');

// q
const { c } = require('qiao-config');

// get config
const getConfig = () => {
    const userDataPath = app.getPath('userData');
    const configPath = path.resolve(userDataPath, './electron.config');
    const config = c(configPath);

    return config;
};

// export
module.exports = getConfig();

electron中使用

效果

 

【根据登录状态打开窗口】 

有了以上的铺垫，就可以通过记录的本地数据做判断，打开对应的窗口

1.登录成功后，本地记录loginName值为admin，跳转到index窗口

2.关闭app再次打开，判断是否有loginName，如果有跳转到index窗口，没有则跳转login窗口

以上代码详见：https://github.com/insistime-guides/electron-guides/tree/0.3.1

【总结】

1.通过app.getPath获取各种系统目录地址

2.将log4js的日志文件保存到系统logs目录下

3.通过qiao-config记录本地数据到userData目录下

4.通过本地数据记录，判断跳转不同的窗口