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.
Download the local storage module
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.
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".
- Depending on the state put together by the localStorage, we visually displaying it in the Multi-state component.
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 :-)
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.
The pandasuite.json file
Pandasuite.json describes the properties of our choice.
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.
It is found directly in the Component Properties window.
In our case, it is interesting to initiate action if the button is "ON" or "OFF": we define both partners triggers:
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.
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
- 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.
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 :-)