Dialogflow同站点页面跳转会话重置：是否支持配置跨页面持续交互？

Dialogflow Messenger默认不会在页面跳转时保留会话，但可以通过自定义配置实现同域名下的会话持久化，具体方案如下：

核心思路 #

利用浏览器的localStorage或sessionStorage存储会话ID，页面加载时读取并复用该ID，让Dialogflow识别为同一个会话。

具体实现步骤 #

1. 获取并存储会话ID
   在Dialogflow Messenger初始化后，监听df-messenger的df-response-received事件，提取会话ID并存入localStorage：

   document.addEventListener('df-response-received', (event) => {
     const sessionId = event.detail.session.split('/').pop();
     localStorage.setItem('df-session-id', sessionId);
   });
   

2. 页面加载时复用会话ID
   在新页面初始化Dialogflow Messenger前，读取localStorage中的会话ID，通过session-id属性传入组件：

   <df-messenger
     chat-title="你的机器人名称"
     agent-id="你的代理ID"
     language-code="zh-CN"
     session-id=""
   ></df-messenger>
   
   <script>
     window.addEventListener('DOMContentLoaded', () => {
       const savedSessionId = localStorage.getItem('df-session-id');
       if (savedSessionId) {
         document.querySelector('df-messenger').setAttribute('session-id', savedSessionId);
       }
     });
   </script>
   

3. 关键注意事项

   • sessionStorage仅在当前浏览器标签页有效，关闭标签页后自动清除；localStorage会持久保存，直到主动删除，可根据业务需求选择存储方式。
   • 若需支持用户手动重置会话，可添加按钮执行localStorage.removeItem('df-session-id')后刷新页面。
   • 确保所有页面的Dialogflow Messenger使用相同的代理ID和语言代码，否则会话无法复用。

内容的提问来源于stack exchange，提问作者Laura Antsygina