如何在动态Gmail重载时持久化AMP表单的用户输入状态？

• 可以实现，核心是借助AMP原生的amp-state组件本地存储表单状态，不需要依赖外部端点或amp-list。
• 具体实现方式：
  1. 声明amp-state组件初始化状态，用来存储用户输入值：

     <amp-state id="formData">
       <script type="application/json">
         {"username": "", "feedback": ""}
       </script>
     </amp-state>
     

  2. 给表单输入控件绑定事件，实时更新amp-state的状态，同时通过value属性绑定状态值实现自动填充：

     <!-- 文本输入框示例 -->
     <input type="text" name="username"
            value="[$formData.username]"
            on="input-debounced:AMP.setState({formData: {username: event.value}})">
     
     <!-- 文本域示例 -->
     <textarea name="feedback"
               value="[$formData.feedback]"
               on="input-debounced:AMP.setState({formData: {feedback: event.value}})"></textarea>
     

  3. 邮件重载时，AMP会保留amp-state中存储的本地状态，输入框会自动展示之前用户输入的内容。
• 关键注意点：
  • 必须符合Gmail的AMP邮件规范，比如表单需使用action-xhr属性，提交域名需在Gmail允许的AMP邮件发送域名列表内。
  • 优先使用input-debounced事件，避免因用户连续输入导致频繁触发状态更新。
  • 该方案仅支持常规表单字段（文本、单选框、复选框等），复杂自定义组件可能需要额外适配。

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