是否可以为浏览器制作表单，将数据存储在本地并在浏览器上线时发送数据？

debugcn 发表于 Dev

舍尔德

我想制作一个带有 3 个复选框的表单，这些复选框都有值。当表单被提交并且浏览器离线时。当浏览器/设备联机时，必须发送表单数据。

Roko C. Buljan

如果您依赖 HTTPS，您可以使用Service Worker API，
或者您可以检查navigator.onLine

使用`navigator.onLine`和`online`事件提交表单数据

使用 AJAX向服务器发送数据。
创建一个预提交阶段，您可以在其中检查导航器是否在线MDN。
在预提交时，如果在线 - 提交表单数据
在预提交时，如果离线 - 将您的表单数据对象推送到stack数组。
监听online事件和FIFO -empty的stack阵列，提交对象一个接一个。

	// App's stack to store form data - while offline
const stack = []; // Make available throughout your APP. Or use sessionStorage

// SUBMIT
function submit(formData) {
   console.log(formData); // TODO: send to server using jQuery $.ajax or whatever
}

// PRE SUBMIT
function preSubmit(ev) {
  ev.preventDefault(); // Prevent form submit, we'll use AJAX

  const formData = { // or use JS's FormData API instead
     action: this.action, method: this.method, data: $(this).serialize()
  };

  if (navigator.onLine) {
    submit( formData );     // Submit with AJAX, as usual
  } else {
    stack.push( formData ); // Push to stack! We're offline!
  }
}

// CHECK - Called when online
function stackCheck() {
  if (stack.length) {
    // Empty + submit the data in stack, one by one
    while (stack.length) submit( stack.shift() );
  }
}

// Listen for when online
window.addEventListener('online', stackCheck);
// Every form on our page
$('form').on('submit', preSubmit);

<form action="/api/message" method="delete">
  <input type="hidden" name="id" value="31">
  <input type="submit" value="Delete message">
</form>

<form action="/api/user" method="post">
  <input type="text" name="name" value="john">
  <input type="text" name="surname" value="doe">
  <input type="submit" value="Add user">
</form>

Now, open developer console and check the "Offline" mode.<br>
Click the buttons and turn back online.

<script src="//code.jquery.com/jquery-3.1.0.js"></script>

PS：值得阅读和实施：https : //developer.mozilla.org/en-US/docs/Web/API/FormData

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。