Store Data Locally

If you create a game, you probably want to keep track of the progress of a user and unlocked stages, even after closing the application.

This storage is possible through the localStorage property. Inserted in the studio in an HTML component, it allows you to store data without limits of life.

To make life easier, we have prepared a ready-to-use local storage module: this example keeps track of the state of a button: "ON" or "OFF". Feel free to download and customize it for your application.

In this article, we explain how to use this module and for those who would like to customize it for personal use, we explain how it has been built.

 

Remember the state of a button

This example applies to a button with two statuses: "ON" or "OFF". With this module, it is possible to remember the state of the button even after closing the application.

The localStorage property to store data limitless lifetime. It is very useful and configurable to match the location of your choice.

In the design studio, insert an HTML component where you want, although it has no visible representation. In the Properties window, select the type OFFLINE, click ADD SOURCE and upload the .zip file.

We've built in parallel the button in Multi-state component made of two states. It is now necessary to connect these two components together:

From button to localStorage:

  • To tap the button visually changes state and this change of state is also sent to localStorage.

button's interactivity

From LocalStorage to the button:

  • At the launch of the state, it is necessary to question the localStorage to find the button stored state. That's the whole point of the action "Get the switch state".

state's interactivity

  • Depending on the state put together by the localStorage, we visually displaying it in the Multi-state component.

module's interactivity

Select the HTML component and open the Interactivities window. This component includes two default triggers: the state "ON" and "OFF" button. You can create specific actions depending on the state of the button :-)

HTML interactivity

All is said ! It remains for you to create your own two-state button and use the HTML component to track the status. Close and reopen your application and see the result! Magic ;-)

 

Customize localStorage (Advanced)

In this section we will step-by-step detail the construction of local storage model for you to adapt to all your problems. This section is for HTML lovers.

This file is simply composed of an index.html file, the PandaBridge connection and the pandasuite.json file.

module's files

 

The pandasuite.json file

Pandasuite.json describes the properties of our choice.

 

a. Properties

To be able to use localStorage in many situations, we define an identifier for each user. It is of type string that is to say, it is a customizable string.

description files' properties

It is found directly in the Component Properties window.

properties in studio

 

b. Triggers

In our case, it is interesting to initiate action if the button is "ON" or "OFF": we define both partners triggers:

triggers

 

c. Actions

We also want to change the button state "ON" or "OFF". It is also necessary to call the storage place for condition of the button: this is getSwitchState action.

actions

 

The PandaBridge file

The PandaBridge makes it easy to communicate between the HTML component and the application, in terms of transmission and reception. You must insert this file in your .zip file.

There are no changes required.

 

The methods of the PandaBridge class

Now that the properties were declared and that communication has been established, we use the methods of PandaBridge class to send and receive different information.

  • Insert the script code in the header

pandabridge class

  • Appeal to localStorage, description of triggers and actions

The init method allows the initialization, it is what will allow to perform the functionality of PandaBridge.

The onLoad method is called when the component is visually supported. It can receive properties and custom markers component.

The getSwitchstate function uses the localStorage feature to know the button state. Depending on the

With the listen method, we get the studio of information to change the button state. The status is changed directly in the localStorage, depending on the requested action. With getSwitchState property, the state is lifted from localStorage without being changed.

module's HTML

 

The insertion of the .zip file

Once you have set the files, unzip the whole.

Be careful: your main HTML file must be accessible from the roots at the time of compression. Do not bundle these files in a folder at the time of compression.

You can now customize the localStorage depending on the desired action :-)

 

Was this article helpful?
1 out of 1 found this helpful

Create today your interactive content

Easy-to-use ∗ Free ∗ No installation

START NOW!