Passing values between templates and server side script( gs)

Question

What i have - 3 files,

1. sidebar.html (step 1)
2. model_less_dialog.html (Step 2)
3. server side script (.gs)

What i want to do : I want to send values of sidebar.html and model_less_dialog.html on server side script.

My existing solution is working fine with

localStorage.setItem('selectedSidebarValues', selectedData);

passing information between templates and server side. I want to find a best practice to pass the values between the templates and the server side script other than localStorage(). Users can modify localStorage() before sending it to Server Side Script (.gs) Which can be dangerous

Step-1 sidebar.html :

$("#selectBtn").on("click",function() {

    -------------------
    --- piece of code ---
    -------------------
    
    var selectedData = 'all selected values';

    //storing step 1 selected data in local storage.
    localStorage.setItem('selectedSidebarValues', selectedData);
    
    //call the server script method to open the model less dialog box
    google.script.run
          .withSuccessHandler(
              function(result, element) {
                  element.disabled = false;
              })
          .withFailureHandler(
              function(msg, element) {
                  console.log(msg);
                  element.disabled = false;
              })
          .withUserObject(this)
          .openModelLessDialogBox();
  
});

Step-2 model_less_dialog.html:

$("#selectBtnModelLessDialogBox").on("click",function(){

    //collecting step 1 selected data from local storage.
    var selectStep1 = localStorage.getItem('selectedSidebarValues');
    var selectStep2 = 'all selected values';

    //call the server script method
    google.script.run
        .withSuccessHandler(
            function(result, element) {
                element.disabled = false;
            })
        .withFailureHandler(
            function(msg, element) {
                console.log(msg);
                element.disabled = false;
            })
        .withUserObject(this)
        .calculatePolicy(selectStep1, selectStep2);
  });

server side script (.gs) :

function openModelLessDialogBox() {
   var ui = SlidesApp.getUi();
   var htmlOutput = HtmlService
                           .createHtmlOutputFromFile('model_less_dialog')
                           .setWidth(250)
                           .setHeight(300);
   ui.showModelessDialog(htmlOutput, 'model less dialog');
}
 
function calculatePolicy(selectStep1, selectStep2) {
  ----- ----- --- 
  ----- ----- --- 
  ----- ----- ---
}

So this is how I passing values to the server.

Answer 1

Easiest way is to pass the data in templates:

• Sidebar calls modaldialog with argument selectedData

  .openModelLessDialogBox(selectedData);
  

• Modal dialog has a template:

  var selectStep1 = <?= sidebarData?>
  

• Pass through the data from sidebar to modal dialog through server:

  function openModelLessDialogBox(sidebarData) {
     var ui = SlidesApp.getUi();
     var htmlTemp = HtmlService.createTemplateFromFile('model_less_dialog');
     htmlTemp["sidebarData"] = sidebarData;
     var htmlOutput = htmlTemp.evaluate()
                       .setWidth(250)
                       .setHeight(300);
     ui.showModelessDialog(htmlOutput, 'model less dialog');
  }
  

Another way is to directly communicate through window.top. See Related answer