Navigation:  Reference > Elements >

Local Storage

Previous pageReturn to chapter overviewNext page

Local Storage is a basic element that can allows you to put value into, and get value from HTML5 local storage. You can find the "Local Storage" element in the elements pane, and add it into the editing area.  It looks like:

localstorage_elem

Just like the Html, Css and Script elements, Local Storage element is not visible in HTML5 simulation and exported image/PDF. It is only visible in the editing mode.

Although you can directly use the local storage in HTML5 (by using the Script element). This element can still bring you some benefits.

One advantage of using this Local Storage element is that it provides a namespace for each instance of this element. So you can use this element like a database table, and different instances of this element can store values with the same key. In the “Manipulate Elements…” window, you can choose the “Set Local Storage Data” action and then specify the data as a key-value pair.

localstorage_set_value

If you directly use the local storage in HTML5, it can only store data as text string. The local storage element in ForeUI however, can store any data type supported by ForeUI, which are number, string, array and object. You don’t need to worry about how they get stored, ForeUI will take care of that for you.

You can retrieve the data as an element property (associative array type), and can insert it into any expression field.

localstorage_get

For example, you store an integer value into local storage with key "x":

localstorage_set_x

Then you can retrieve it like this:

localstorage_get_x

The data type will still be integer (not changed).

What can we do with it?

The data stored in local storage will be persisted and will not go away even if you close the we browser. This could be used to save the progress of the HTML5 game locally, or it could be used as a way for communications between ForeUI simulations.