Storage

In this example we will show you how you can use the Storage API to save and/or share data across different Custom User Interfaces. One very common usage of this is, for example, to share data between Template UIs and Show UIs.

Client Side Storage

There are 3 types of storage methods that reside on the client (not the server), and are therefore only available locally to the specific client.

Tip

If you need to share data across different clients please use the Global Variables

1. globalStorage - Data stored in the globalStorage is availble to all user interfaces on the specific client.
2. localStorage - Data stored in the localStorage is only accessible to the specific user interface.
3. sessionStorage - Data stored in the sessionStorage is availble to all user interfaces on the specific client, similar to globalStorage, however it is not persistent, meaning that it will be deleted when the session ends (page refresh, server restart, client restart etc.)

Example commands:

// Store data in storage:
globalStorage.setItem('My Global Key', 'Some global value');
localStorage.setItem('My Local Key', 'Some local value');
sessionStorage.setItem('My Session Key', 'Some session value');

// Retrieve the data from storage
// Returned value will be null is key does not exist
const globalData = globalStorage.getItem('My Global Key');
const localData = localStorage.getItem('My Global Key');
const sessionData = sessionStorage.getItem('My Global Key');

You can also store JSON data in each of the storage methods, however you will need to stringify and parse the data as follows:

// Store data in storage:
// We stringify the JSON data when storing
globalStorage.setItem('My Global Key', JSON.stringify({ myData: 'Some Global Data' }));
localStorage.setItem('My Local Key', JSON.stringify({ myData: 'Some Local Data' }));
sessionStorage.setItem('My Session Key', JSON.stringify({ myData: 'Some Session Data' }));

// Retrieve the data from storage
// We parse the JSON String when retrieving
const globalData = JSON.parse(globalStorage.getItem('My Global Key'));
const localData = JSON.parse(localStorage.getItem('My Global Key'));
const sessionData = JSON.parse(sessionStorage.getItem('My Global Key'));

Global Variables

Global Variables are saved on the server side and is consistent, meaning that it can be accessed by all clients connected to the server. The data stored can be any valid JS value (string / boolean / nuber / object / ...)

Tip

Global variable API is promise based as it requires communication with the server

Example command:

 try {
    // Use promise to set Global Varaible Value
    await GlobalVariables.set("MyKey", "My Global Variable Value")
    // Use promise to retrieve Global Varaible Value
    const myVariable = await GlobalVariables.get("MyKey");
    console.log(myVariable);
  } catch (err) {
    console.error("Oops something went wrong ", err);
  }

Info

The Storage API is derived from the official MDN Storage API

Get All Stored Keys

We can retrieve all the stored keys in any of the storage methods with the following code example:

for (let i = 0; i < localStorage.length; i++) {
  const key = localStorage.key(i);
  console.log(key, localStorage.getItem(key));
}

Example Files

This Example UI shows how you can store and retrieve data using all 4 storage methods.

Download ezUI File