Local Data Storage for PWAs

Local data storage can be used by a PWA to store or cache content on the user's device for display or later use and is an important tool when developing applications for offline use.

There are two types of local data storage available:

Local Storage, a key-value system for storing strings
IndexedDB, a simple database system for storing multiple strings with a shared index

It is possible to store other data types by transforming them into a string. Objects and other complex data can be stored using JSON.stringify() and retrieved using JSON.parse().

For more information, see the MDN documentation.

Steps

Create a new form and add a Field, myField. Set the Client accessibility property of the field to Read/write. Drag the field onto your form as a Field Control and enable Immediate Validation.

Add two buttons to your form with the texts Store and Retrieve.

Add the following code to the click jQuery event of the Store button by right-clicking it and selecting HTML Element Properties. Give the button an ID of storeBtn.

// Store the value of the field in Local Storage
localStorage.setItem('myField',$eb.getFieldValue('myField'));

Add the following code to the click jQuery event of the Retrieve button by right-clicking it and selecting HTML Element Properties. Give the button an ID of retrieveBtn.

// Retrieve the stored value from Local Storage
var myFieldValue = localStorage.getItem('myField');

// Set the field to the stored value
// The last parameter instructs Verj.io to autorefresh the field
$eb.setFieldValue('myField', myFieldValue, true);

Run your form. Enter a value into the field and click the Store button to store it using Local Storage. Re-run the form and click the Retrieve button to retrieve the value of the field from Local Storage.

Previous Page To Module