从我离开 SurveyJs 的地方继续提问

Question

每次用户刷新页面时，调查都会在 surveyjs 后重新开始。

是否有可能从他离开的地方继续？

我正在使用 surveyjs 和 React (Nextjs)。

谢谢！

Answer 1

这个问题的解决方案实际上取决于您保存用户回复的位置和频率。

保存到数据库

理想情况下，只要任何问题的值发生变化，您就会将其保存到数据库中。这可以通过为以下 SurveyJS 事件添加事件处理程序来完成：

onValueChanged
onDynamicPanelItemValueChanged
onMatrixCellValueChanged
onCurrentPageChanged

您的服务器上需要一个端点，它会从您的数据库中保存调查响应 JSON 和 returns 一个唯一 ID。该 ID 应该用于在后续调用中更新响应 JSON，直到整个调查完成。

可以使用cookie在本地存储id。您可以在每次加载页面时查找该 cookie。如果 cookie 存在，则从中获取 id 并调用您的服务器以获取部分调查响应并将其设置为 survey.data.

为了获得更好的用户体验，请确保您不仅保存响应 JSON，还保存当前页码。这样您就可以自动导航到用户刷新浏览器之前所在的同一调查页面。可以从survey.currentPageNo.

获得

您应该确保在调查完成后删除 cookie。这可以通过处理 onComplete 事件来完成。

保存到本地存储

这是一个带有示例的沙箱，它展示了如何使用浏览器的本地存储来实现相同的结果：https://codesandbox.io/s/musing-cloud-z2lhc?file=/src/SurveyComponent.jsx

（示例基于官方 SurveyJS 站点的 Edit saved survey 示例）

以下方法创建调查响应对象并将其保存在本地：

function saveState(survey) {
      var res = { currentPageNo: survey.currentPageNo, data: survey.data };
      //Here should be the code to save the data into your database
      window.localStorage.setItem(storageName, JSON.stringify(res));
    }

这是在页面加载并查找 locla 存储中的任何数据以将其预加载到调查中时运行的方法：

function loadState(survey) {
      //Here should be the code to load the data from your database
      var storageSt = window.localStorage.getItem(storageName) || "";
      var res = {};
      if (storageSt) res = JSON.parse(storageSt);

      //Set the loaded data into the survey.
      if (res.currentPageNo) survey.currentPageNo = res.currentPageNo;
      if (res.data) survey.data = res.data;
    }

调查完成后，您可以按照以下方式从本地存储中清除数据：

function clearStorage() {
      window.localStorage.removeItem(storageName);
    }

最后，您将如何分配这些方法来处理相应的 SurveyJS 事件：

survey.onValueChanged.add(function (survey, options) {
      saveState(survey);
});
survey.onCurrentPageChanged.add(function (survey, options) {
      saveState(survey);
});
survey.onComplete.add(function (survey, options) {
      //save the data on survey complete. You may call another function to store the final results
      saveState(survey);
      //TODO: save data to server
      //clear the local storage data
      clearStorage();
});

除了onValueChanged，还可以将saveState赋值给onDynamicPanelItemValueChanged和onMatrixCellValueChanged.

有关更多信息，请查看文档的以下部分：https://surveyjs.io/Documentation/Library?id=LibraryOverview#data-restoreanswers

从我离开 SurveyJs 的地方继续提问

Continue questions from where I left in SurveyJs

reactjs

next.js

surveyjs