electron cookie实现记住密码

使用electron开发时，实现记住密码功能。

这个功能使用比较常见，electron也提供了session的模块来支持。这里只是简单实现了该功能，类似加密等需要自行考虑。当然session模块还有更多的用处。关于更多的session模块的使用，请查看Electron文档。

还有很多其他的实现方式，比如使用一个json文件来存放用户名密码等。

简单介绍一下session模块：

session 模块可以用来创建一个新的 Session 对象。

属性

session 模块有如下属性:

session.defaultSession

返回应用的默认 session 对象.

实例方法

实例 Session 有以下方法:

ses.cookies

cookies 赋予你全力来查询和修改 cookies. 例如:

// 查询所有 cookies.
session.defaultSession.cookies.get({}, function(error, cookies) {
  console.log(cookies);
});

// 查询与指定 url 相关的所有 cookies.
session.defaultSession.cookies.get({ url : "http://www.github.com" }, function(error, cookies) {
  console.log(cookies);
});

// 设置 cookie;
// may overwrite equivalent cookies if they exist.
var cookie = { url : "http://www.github.com", name : "dummy_name", value : "dummy" };
session.defaultSession.cookies.set(cookie, function(error) {
  if (error)
    console.error(error);
});

ses.cookies.set(details, callback)

• details Object

  • url String - 与获取 cookies 相关的 url.
  • name String - cookie 名. 忽略默认为空.
  • value String - cookie 值. 忽略默认为空.
  • domain String - cookie的域名. 忽略默认为空.
  • path String - cookie 的路径. 忽略默认为空.
  • secure Boolean - 是否已经进行了安全性标识. 默认为 false.
  • session Boolean - 是否已经 HttpOnly 标识. 默认为 false.
  • expirationDate Double - cookie的截至日期，数值为UNIX纪元以来的秒数. 如果忽略, cookie 变为 session cookie.

• callback Function

使用 details 设置 cookie, 完成时使用 callback(error) 调用 callback .

ses.clearStorageData([options, ]callback)

• options Object (可选)

  • origin String - 应当遵循 window.location.origin 的格式 scheme://host:port.
  • storages Array - 需要清理的 storages 类型, 可以包含 : appcache, cookies, filesystem, indexdb, local storage, shadercache, websql, serviceworkers
  • quotas Array - 需要清理的类型指标, 可以包含: temporary, persistent, syncable.

• callback Function - 操作完成时调用.

清除 web storages 的数据.

以上只是session模块的一小部分介绍，也是这里要用到的几个方法。更多关于session。

具体实现

实现思路

在渲染进程中，通过remote模块取的原本在主进程中才能使用的session模块。调用ses.cookies.set(details, callback)存储用户名和密码，通过调用ses.cookies.get(filter, callback)可以得到cookie中存放的用户名和密码，通过ses.clearStorageData([options, ]callback)方法可以清空存储的用户名和密码。设置cookie的有效期为30天。

代码

index.html

renderer.js

const ipcRenderer = require('electron').ipcRenderer;
const session = require('electron').remote.session;
let login = () => {
  let name = document.getElementById('name');
  let password = document.getElementById('password');
};
/**
 * 保存用户名和密码
 */
let saveNameAndPassword = () => {
  let name = document.getElementById('name').value;
  let password = document.getElementById('password').value;
  setCookie('name', name);
  setCookie('password', password);
};
/**
 * 获得
 */
let getCookies = () => {
  session.defaultSession.cookies.get({ url: "http://www.github.com" }, function (error, cookies) {
    console.log(cookies);
    if (cookies.length > 0) {
      let name = document.getElementById('name');
      name.value = cookies[0].value;
      let password = document.getElementById('password');
      password.value = cookies[1].value;
    }
  });
};
/**
 * 清空缓存
 */
let clearCookies = () => {
  session.defaultSession.clearStorageData({
    origin: "http://www.github.com",
    storages: ['cookies']
  }, function (error) {
    if (error) console.error(error);
  })
};

/**
 * 保存cookie
 * @param name  cookie名称
 * @param value cookie值
 */
let setCookie = (name, value) => {
  let Days = 30;
  let exp = new Date();
  let date = Math.round(exp.getTime() / 1000) + Days * 24 * 60 * 60;
  const cookie = {
    url: "http://www.github.com",
    name: name,
    value: value,
    expirationDate: date
  };
  session.defaultSession.cookies.set(cookie, (error) => {
    if (error) console.error(error);
  });
};

getCookies();

运行结果