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.



  • 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



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("|");  


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. 


2nd screen : saving values into localStorage


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

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

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.

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



Have more questions? Submit a request