Scroll

LocalStorage

LocalStorage

Follow
Summary LocalStorage can be used as a way to store variables and re-use them on another interview made on the same device.
to Askia Design.
Written for Survey programmers, Scripters.
Keywords Html table, javascript, localstorage, transport, CAPI, local storage, storage

 

Use case 

This methodology is often used in CAPI surveys, where you want the agent to avoid re-entering the same data twice. A typical use case is an agent interviewing passengers on a single bus line.

Once the agent has entered the bus line during the 1st interview, we want to pre-fill this question for new interviews, while leaving the possibility for the agent to edit at a later stage.

 

Compatibility

  • We rely on HTML's LocalStorage for this example, which has limited browser support. Details here
  • Design 5.3.5 and above

 

5.4.6+ Version of the script : download here

1st screen : Reading a stored value and putting it into a variable

 

   

<script> 
document.addEventListener("DOMContentLoaded", function () {
    var previousAnswers = localStorage["previousAnswers"];
    if (previousAnswers) {
         // Convert it to an array
        previousAnswers = JSON.parse(previousAnswers); 
        document.getElementsByName("{%= CurrentQuestions[1].InputName()%}")[0].innerHTML = previousAnswers.join("|");  
    }
 })
</script>

 

In this script we take advantage of Askiascript's CurrentQuestions keyword, introduced in 5.4.6, which lists all questions on screen. We then extract the associated input name with the InputName() method. Now that we have this, we are able to set the value of this box from the localstorage.

The same script will work for any question name without needing amendments.

In this example, the full content of the localstorage will be imported in the variable in an Array, each field separated by a " | " character, which is a way for Design to split the Array thanks to the "use as an array" option. 

1.png

2nd screen : saving values into localStorage

 

In the next screen, we use the following script to save multiple answers into the localstorage

<script>
document.forms[0].addEventListener("submit", function () {   
    localStorage["previousAnswers"] = JSON.stringify([document.getElementsByName("{%= CurrentQuestions[2].InputName()%}")[0].value , document.getElementsByName("{%= CurrentQuestions[3].InputName()%}")[0].value ]);
});
</script>

Here, we're waiting for the "next" button to be pressed.

{%= CurrentQuestions[2].InputName()%} gives us the place to read the value for the second question on screen (the first being the "description"). 

We're using the JSON.stringify() method to store all data points in a single JSON object that we push in the localstorage thanks to the localStorage[data_index] keyword

 

5.3.5 + Version : download here

 

Since we don't have CurrentQuestions available on this version, you will need to specify explicitly the question name inside the script.

<script>
  document.forms[0].addEventListener("submit", function (){
    localStorage["previousAnswers"] = JSON.stringify([document.getElementsByName("{%= Nom_agent.InputName()%}")[0].value ,  document.getElementsByName("{%= Num_ligne.InputName()%}")[0].value ]);
  });
</script>

 

 

Have more questions? Submit a request

Comments