Create Cookies in Electron Apps with Oreo.js

4 min readDec 21, 2020

Sometimes is really hard to write cross-platform apps in javascript, because many common features available in the browsers aren’t present in other platforms like Node.js, Electron even Cordova. That is why I have decided to create cross-plaform packages to be usable in many platforms without the need to make a radical change in the code.

What is Oreo.js?

Is a cross-platform javascript package that allows you to create and manage cookies just like in browsers (with additional features). This package can be installed in different ways depending on the platform on which you are developing your application.

But, this time, we will see how to implement it in an Electron app. If you are insterested, you can visit the package website to see all information and documentation.

Installing the Package

Oreo.js have two ways to install (talking about Electron). You can install it by importing directly the .js file or you can use the package manager (npm).

The script-tag way

You can import the .js directly with a script-tag in your index.html file. Just like this:

<script src="https://cdn.jsdelivr.net/npm/oreo.js/dist/oreo.min.js"></script>

Also you can download the oreo.js file in your Electron project folder and import it:

<script src="./local/path/to/oreo.js"></script>

Once imported, the package will detect automatically if the current platform is an Electron app to set a storage-system (a local file named “oreo.cookies”). Also, a global object will be created with the name oreo and another named cookies . Both objects are the same, but you can select one of them to access to oreo functions.

Package Manager Way

This way is a little complicated (unlike script-tag way), but just follow the next steps. First, you need to install the package in your current electron-app:

npm install --save oreo.js

Then, make sure that your main-window (where you will import oreo.js) have nodeIntegration option enabled:

function createWindow () {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true // <= ENABLE IT!
    }
  })

  win.loadFile('index.html')
}

This option enable client-side to import Node.js packages just like any other Node.js app with require( 'package-name' )

Now, we can import oreo.js in the client-side (index.html):

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Oreo.js Test</title>
</head>
<body>
  <script>
    // RIGHT HERE WE ARE IMPORTING OREO PACKAGE by require( ) ;
    let oreo = require( 'oreo.js' ) ;
  </script>
</body>
</html>

Perfect, now we are able to use all oreo features in our electron-app. You can see full electron example in the official documentation page.

Basic Usage

With the package imported, now we can call the basic methods to start creating cookies. Just call one of the next instances:

// WRITE A COOKIE [v]
// WILL EXPIRE IN A MONTH BY DEFAULT [v]
oreo( 'my-cookie-key', 'my-cookie-value' ) ;

// WRITE A COOKIE WITH EXPIRATION-DATE AND PATH [v]
// WILL EXPIRE IN A YEAR [v]
expiration = new Date( ) ;
expiration = expiration.setFullYear( expiration.getFullYear( ) + 1 ) ;
// OR 
expiration = 365 ; // EXPIRATION IN DAYS IS ACCEPTABLE TOO.
oreo( 'my-cookie-key', 'my-cookie-value', { expires : expiration, path : '/blog/' } ) ;

// READ COOKIE [v]
var cookie = oreo( 'my-cookie-key' ) ;

// REMOVE COOKIE [v]
oreo.remove( 'my-cookie-key' ) ;

// CLEAR ALL [v]
oreo.clear( ) ;

Interesting Features

Oreo.js tries to emulate webcookies, but also include a few features to make code easier.

Formatted Values

The package will return a formatted value. For example, if you save a boolean, you will get a boolean once you request that cookie.

Date Cookies

You can save JavaScript Dates, just define a Date in the value parameter (string dates are acceptable too, like ISOString or UTCString).

JSON Values

Also, you can save directly a JSON Object. This will be stringified and converted back once you request the cookie.

Unlimited Cookies

By default, browsers set a limit for the number of cookies storaged and the size of the cookies itself (~4096 bytes per cookie). You can disbale this limits in Electron and Cordova only, but is not recommended if you are trying to create a cross-platform app.

And that’s all, is really easy to implement in our electron-apps. If you want more information, you can visit the documentation site, also you can download a full electron example from the Github Repository.

Good Luck! ☕💜