Introduction

If you are not hosting your project on an LMS and you want a simple way to save and retrieve user data (such as high scores and names) than local storage is a good way to go.

Adobe’s current documentation on Local Storage https://helpx.adobe.com/captivate/using/common-js-interface.html only focuses on storing ‘strings’ such as user names, so this tutorial also shows how to work with integers (numbers) as well.

I have included a .cptx file and will be referring to it throughout this tutorial.

localStorage

A few points about this project file.

• This project creates two local storage variables ‘lsName’ and ‘lsPoints’. (‘ls’ stands for ‘local storage variable’, ‘cap’ stands for Captivate variable)
• There are three Captivate variables: ‘capName’, ‘capPoints’, and ‘inputName’
• The text entry box sets the variable ‘inputName’
• Local Storage is automatically saved as a string – even if it’s a number.  You need to use parseInt() to set the string as an integer.
• All changes are made to the Captivate variables (such as increments and decrements) and then saved as the local storage variable
• I learned the hard way Text Entry Boxes will always reset their variables to “”. This is why I ‘transfer’ the inputName variable to capName in the save button.

Storing Numbers

Step 1: Create your ‘if null statement’

if(localStorage.getItem(“lsPoints”) == null){

The first time a user goes onto your project, there will be no local storage variables.  You therefore need to create the variable and ‘set’ it to an initial starting value – such as 0.  But, if your initiating code sets the variable to 0,  each time the user starts the project, the variable will keep getting reset to 0.  The solution to this paradox is to have an if null (non existent) statement.  The above code is a conditional statement and basically means ‘check to see if there is something in local storage called lsPoints’.  In javascript, if you check to see the value of a non-existent variable, it will return a value of null.

Step 2: If lsPoints is null…

If the above conditional statement is true (i.e. there is no such variable called lsPoints local storage) we will then create the variable and set its initial value:

localStorage.setItem(“lsPoints”, 0);
capPoints= parseInt(localStorage.getItem(“lsPoints”));

The setItem creates a lsPoints in local storage and gives it a value of 0. (Note that 0 is stored as a ‘string’ / word).

I then set capPoints to equal lsPoints – which would be zero.  You need to use the parseInt() statement so that the string gets converted into a number.  That way we can add and subtract numbers to capPoints.

Step 3: If lsPoints is not null…

capPoints= parseInt(localStorage.getItem(“lsPoints”));

If there is an lsPoints, we are going to set capPoints to its value as an integer.

Step 4: Saving the variables

I used the ‘+’ and ‘-‘ buttons to simply add or subtract 1 to capPoints.  Whenever I want the value to be saved in the localStorage I use the following  which I put in the save button’s javascript:

localStorage.setItem(“lsPoints”, capPoints);

This sets the value of lsPoints to capPoints.  Therefore if capPoints was 12, lsPoints would be 12.  But again, it’s always stored as a string.

Step 5: Clearing your local storage.

I created a clear button (maybe you want your users to be able to reset a game – it’s also good for testing purposes).  The clear button removes the variable from local storage completely and resets it back to a null value.

localStorage.removeItem(‘lsPoints’);

Storing Names

Step 1: Create your ‘if null statement’

I use the same type of ‘if null statement’ but this time for the variable lsName.

if(localStorage.getItem(“lsName”) == null){

Step 2: If lsName is null…

I want to show the text entry box, the save name button if lsName is null.  I do not need to set an initial value for lsName yet.

cp.show(‘entBox’);
cp.show(‘nameBtn’);

Step 3: If lsName is not null…

capName = localStorage.getItem(“lsName”);
cp.show(‘wtxt’)

If lsName has a value such as ‘Jeremy’, I will set the capName value to equal that. Notice that I do not need to use the parseInt because I am dealing with a ‘string’.  I also show the text box wtxt that has a welcoming message.

Step 4: Saving the variables

Text Entry Boxes will reset its variables to “” each time the page reloads.  The save name button ‘transfers’ the inputName to capName.  It is then capName that is stored in the lsName local Storage variable.

Step 5: Clearing your local storage.

localStorage.removeItem(‘lsName’);

Like the clear points button, this script will remove the lsName variable.

If you have any questions about the attached file or anything I have written here please do not hesitate to ask.  All the best,

Jeremy