Skip to content
On this page

electron-window-state

一个用于保存和恢复 Electron 窗口状态的工具

安装

bash
pnpm add electron-window-state

基础配置

主进程配置

ts
import { app, BrowserWindow } from 'electron'
import windowStateKeeper from 'electron-window-state'

app.whenReady().then(() => {
  // 加载上次窗口状态
  const mainWindowState = windowStateKeeper({
    defaultWidth: 900,
    defaultHeight: 670,
  })

  // 创建窗口并应用状态
  const mainWindow = new BrowserWindow({
    x: mainWindowState.x,
    y: mainWindowState.y,
    width: mainWindowState.width,
    height: mainWindowState.height,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false,
    },
  })

  // 监听窗口状态变化
  mainWindowState.manage(mainWindow)
})

使用示例

自定义存储配置

ts
import windowStateKeeper from 'electron-window-state'

app.whenReady().then(() => {
  const mainWindowState = windowStateKeeper({
    defaultWidth: 900,
    defaultHeight: 670,
    // 自定义存储文件名
    file: 'window-state.json',
    // 自定义存储路径
    path: app.getPath('userData'),
    // 最大/最小尺寸限制
    maximize: true,
    fullScreen: true,
  })

  const mainWindow = new BrowserWindow({
    ...mainWindowState,
    minWidth: 400,
    minHeight: 300,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false,
    },
  })

  mainWindowState.manage(mainWindow)
})

多窗口状态管理

ts
import windowStateKeeper from 'electron-window-state'

app.whenReady().then(() => {
  // 主窗口状态
  const mainWindowState = windowStateKeeper({
    defaultWidth: 900,
    defaultHeight: 670,
    file: 'main-window-state.json',
  })

  // 子窗口状态
  const childWindowState = windowStateKeeper({
    defaultWidth: 600,
    defaultHeight: 400,
    file: 'child-window-state.json',
  })

  // 创建并管理多个窗口
  const mainWindow = new BrowserWindow({
    ...mainWindowState,
  })

  const childWindow = new BrowserWindow({
    ...childWindowState,
    parent: mainWindow,
  })

  // 分别管理窗口状态
  mainWindowState.manage(mainWindow)
  childWindowState.manage(childWindow)
})

高级配置

ts
import { app, BrowserWindow } from 'electron'
import windowStateKeeper from 'electron-window-state'

app.whenReady().then(() => {
  const mainWindowState = windowStateKeeper({
    defaultWidth: 900,
    defaultHeight: 670,
    // 自定义存储配置
    file: 'window-state.json',
    path: app.getPath('userData'),
    // 窗口尺寸限制
    maximize: true,
    fullScreen: true,
    // 事件处理
    beforeSave: (win) => {
      // 保存前的处理
      console.log('即将保存窗口状态')
    },
    afterRestore: (win) => {
      // 恢复后的处理
      console.log('已恢复窗口状态')
    },
    // 自定义序列化
    serialize: (data) => {
      // 添加额外数据
      return {
        ...data,
        timestamp: Date.now(),
      }
    },
    // 自定义反序列化
    deserialize: (data) => {
      // 处理额外数据
      console.log('上次保存时间:', new Date(data.timestamp))
      return data
    },
  })

  const mainWindow = new BrowserWindow({
    ...mainWindowState,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false,
    },
  })

  mainWindowState.manage(mainWindow)
})

要保持清醒 永远不抱有意外的幻想 凭空的期待最要命