Javascript 应用程序脚本网站/webapp的谷歌电子表格中存储的数据的HTML列表-模板化HTML

我正在尝试制作的谷歌应用脚本web应用程序有一个按钮，用户可以单击该按钮并将其姓名添加到其中。我正在尝试将这些信息保存为网站上的列表，这样，如果我刷新页面，它仍然在那里，如果其他人正在访问该网站，它仍然在那里

这是添加按钮-
这些是从按钮添加的示例名称-

我不想将其保存为本地存储。有没有办法将信息保存到谷歌电子表格中，并将该电子表格用作数据库或其他什么

index.html 我是否需要在Google应用程序脚本“xxx.gs”或“xxx.js”文件中添加一些内容来保存信息/访问数据库/其他内容

编辑 我已经更新了一些代码。我可以将艺术家写入电子表格，并从电子表格中获取艺术家姓名。对于如何将列表中的新项目显示为模板化html，我仍然感到困惑

index.html 代码.gs

var ss=SpreadsheetApp.openById（'id'）；
var sheet=ss.getSheets（）[0]；
函数doGet（）
{
返回HtmlService.createTemplateFromFile（'index'）.evaluate（）；
}
函数getContent（文件名）
{
返回HtmlService.createHtmlOutFromFile（文件名）.getContent（）；
}
函数WriteArtName（艺人名称）
{
var lastRow=sheet.getLastRow（）+1；//获取下一个未使用的行
var column=1；//第一列
var lastCell=sheet.getRange（lastRow，column）；
lastCell.setValue（artistName）；//将下一个空行设置为artistName
}
函数getArtistName（）
{
var lastRow=sheet.getLastRow（）；//获取包含内容的最后一行
var列=1；
var lastastartist=sheet.getRange（lastRow，column）.getValue（）；//使用artistName获取最后一行
Logger.log（lastastartist）；
变量x='
'；
var xyz=x+y+z；
Logger.log（xyz）；
}

如何调用code.gs文件中的

getArtistName（）

函数，将艺术家名称设置为无序列表中的列表项，并将其作为html模板显示在网站上？我无法调用.gs文件中的

document.getElementById

，因为它说

ReferenceError:“document”未定义

---

我需要列表保留在网站上，即使我重新加载页面，并且它需要任何地方的任何人都可以访问

您需要在服务器上构建HTML。因此，将您的HTML更改为：

<div id="artistTabs">
   <ul id="artistList">
      <?!= createTheList(); ?>
  </ul>
</div>

客户端代码：

函数someFunctionName（artistName）{//将数据传递给函数
//或者获取数据
var artistName=获取值的代码；
google.script.run
.withSuccessHandler（serverCodeCompleted）
.书面电子表格（艺人姓名）；
};
函数serverCodeCompleted（）{
//向用户显示消息
这里有一些代码
};

要在页面中显示数据，应使用模板化HTML

---

最好的选择可能是PHP@WilliamBrochmann你能详细说明我将如何使用php吗？你可以使用类似于

cookie

，我建议你使用@nmnsud，上面写着“默认情况下，浏览器关闭时cookie会被删除”。我需要用户输入的信息永久保存在网站上，即使在页面刷新/关闭并再次打开后也是如此。您可以轻松地从应用程序脚本Web应用程序将数据保存到电子表格中。您需要使用

google.script.run.myServerGS_函数（）

从web应用程序到服务器代码进行交互。我假设您有一个

doGet（）

函数为浏览器提供HTML？您至少发布了一个版本？我理解将信息写入电子表格部分的过程。我不明白在我想要这些信息消失之前，我是如何让这些信息在网站上永久存在的。模板化的html非常混乱…我是否在html文件中使用带有“”标记的js函数？如果是这样的话，我是否只需要将我的整个AddArtister函数放在那里？请参阅更新的答案。您还必须将

doGet（）

函数更改为添加：

createTemplateFromFile（'HTML文件名'）。evaluate（）

它的giving me“ReferenceError:“createTheList”未定义。”。服务器代码也是针对“.js”文件的？我不需要gs文件和客户端代码来编写html和服务器代码，对吗？桑迪，作为建议，OP没有做任何研究或试图将数据保存到工作表中。最好让用户先进行研究和尝试，在中有大量的资源，包括重复的问题，以便解释任务。不费力地给出答案会产生更多问题，因为op通常还没有准备好回答。

function addArtist()
{
   console.log("add artist here");
   var artistName = prompt("enter artist whole first name and initial of last name");
    if (artistName === "") //user pressed 'ok' but input field was empty
    {
        return;
    }
    else if (artistName != "" && artistName !== null) //user inputs something and hits 'ok'
    {
         var ul = document.getElementById("artistList");
         var li = document.createElement("li");
         var a = document.createElement("a");
         a.setAttribute("href", "#");
         a.textContent = artistName;
         li.appendChild(a);
         ul.appendChild(li);   
         li.onclick = function()
         {
            test(); return false;
         };
   }
   else //user hits 'cancel' or 'x' 
   {
        return;
   }
}

function test()
{
    console.log("test");
}

<div id="artistTabs">
    <ul id="artistList">
        <li><a onClick="addArtist(); return false;" href="">+</a></li>
    </ul>
</div>

function addArtist()
{
  var artistName = prompt("enter artist whole first name and initial of last name");

  if (artistName === "") //user pressed 'ok' but input field was empty
  {
    return;
  }
  else if (artistName != "" && artistName !== null) //user inputs something and hits 'ok'
  {
    google.script.run
      .withSuccessHandler(writeSuccess(artistName))
      .withFailureHandler(writeFailure)
      .writeArtistName(artistName);
  }
  else //user hits 'cancel' or 'x'
  {
    return;
  }
}

function writeSuccess(artistName)
{
  console.log("write success: " + artistName);
}

function writeFailure()
{
  console.log("write failure - email myself why it failed and the time it failed");
} 

var ss = SpreadsheetApp.openById('id');
var sheet = ss.getSheets()[0];

function doGet()
{
  return HtmlService.createTemplateFromFile('index').evaluate();
}

function getContent(filename)
{
  return HtmlService.createHtmlOutputFromFile(filename).getContent();
}

function writeArtistName(artistName)
{
  var lastRow = sheet.getLastRow() + 1; //gets next unused row
  var column = 1; //first column
  var lastCell = sheet.getRange(lastRow, column);

  lastCell.setValue(artistName); //sets next blank row as artistName
}

function getArtistName()
{
  var lastRow = sheet.getLastRow(); //gets last row with content
  var column = 1;

  var lastArtist = sheet.getRange(lastRow, column).getValue(); //gets last row with artistName

  Logger.log(lastArtist);

  var x = '<li><a onClick="test(); return false;" href="#">';
  var y = lastArtist;
  var z = '</a></li>';

  var xyz = x + y + z;

  Logger.log(xyz);
}

<div id="artistTabs">
   <ul id="artistList">
      <?!= createTheList(); ?>
  </ul>
</div>

function createTheList() {
  var artists,howManyRows,howManyColumns,i,L,newList,ss,sh,startingRow,startingColumn,
    thisArtist,templateHTML,thisRow;

  ss = SpreadsheetApp.openById('file ID goes here'); //Get spreadsheet
  sh = ss.getSheetByName('sheet tab name');

  startingRow = 2;
  startingColumn = 1;
  howManyRows = sh.getLastRow() - 1;
  howManyColumns = 1;

  artists = sh.getRange(startingRow,startingColumn,howManyRows,howManyColumns)
    .getValues();//Get all artist names
  L = artists.length; //How many artist in the list

  artists = artists.toString().split(",");//Flatten 2D array to 1D

  //template of blank row of HTML with a merge string of "z_z_z_z_z"
  templateHTML = "<li><a onClick="addArtist(); return false;" href="">z_z_z_z_z</a></li>";

  newList = "";//Initialize

  for (i=0;i<L;i+=1) {
    thisRow = "";//reset on every loop
    thisArtist = artists[i];

    thisRow = templateHTML.replace("z_z_z_z_z",thisArtist);//Inject artist name
    newList = newList + thisRow;//Keep adding to the list
  };

  return newList;
};

function writeToSpreadsheet(data) {
  var ss, sh;

  //Save data to a spreadsheet
  ss = SpreadsheetApp.openById('file ID goes here'); //Get spreadsheet
  sh = ss.getSheetByName('sheet tab name');
  sh.appendRow([data]);//Append data to end of sheet tab data
};

<script>
  function someFunctionName(artistName) {//Either pass data to function
    //Or get the data
    var artistName = code to get the value;

    google.script.run
      .withSuccessHandler(serverCodeCompleted)
     .writeToSpreadsheet(artistName);
  };

  function serverCodeCompleted() {
    //Show message to the user
    some code here
  };
</script>