您的位置:时时app平台注册网站 > web前端 > 什么制作离线友好的表单?彩世界网址

什么制作离线友好的表单?彩世界网址

2019-10-12 18:45

检查保存的数据

一旦用户联网,就需要检查一下本地是否存在未提交的表单。我们需要监听 online 事件跟踪网络链接的变化,或者页面刷新触发的 load 事件。

constructor(form){ ... window.addEventListener('online', () => this.checkStorage()); window.addEventListener('load', () => this.checkStorage()); }

1
2
3
4
5
constructor(form){
  ...
  window.addEventListener('online', () => this.checkStorage());
  window.addEventListener('load', () => this.checkStorage());
}

当这些事件触发时,我们只需检查在 storage 中是否存在与表单 id 相匹配的数据。根据表单数据类型的不同,可能需要添加一个过期时间的判断,只允许在特定的时间内的表单。这一点对于偶尔网络链接异常的情况很有效果,避免错误地把两个月以前保存在本地的表单提交。

checkStorage() { if (typeof Storage !== 'undefined') { // check if we have saved data in localStorage. const item = localStorage.getItem(this.id); const entry = item && JSON.parse(item); if (entry) { // discard submissions older than one day. (optional) const now = new Date().getTime(); const day = 24 * 60 * 60 * 1000; if (now

  • day > entry.time) { localStorage.removeItem(this.id); return; } // we have valid form data, try to submit it. this.data = entry.data; this.sendData(); } } }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
checkStorage() {
  if (typeof Storage !== 'undefined') {
    // check if we have saved data in localStorage.
    const item = localStorage.getItem(this.id);
    const entry = item && JSON.parse(item);
 
    if (entry) {
      // discard submissions older than one day. (optional)
      const now = new Date().getTime();
      const day = 24 * 60 * 60 * 1000;
      if (now - day > entry.time) {
        localStorage.removeItem(this.id);
        return;
      }
 
      // we have valid form data, try to submit it.
      this.data = entry.data;
      this.sendData();
    }
  }
}

如果表单成功提交,则还需要最后一步,将表单数据从 localStorage 清除。比如说一个 Ajax 表单,我们可以在服务端成功返回后马上实施清除动作。这里简单使用 storage removeItem() 方法即可。

sendData() { // send ajax request to server axios.post(this.action, this.data) .then((response) => { if (response.status === 200) { // remove stored data on success localStorage.removeItem(this.id); } }) .catch((error) => { console.warn(error); }); }

1
2
3
4
5
6
7
8
9
10
11
12
13
sendData() {
  // send ajax request to server
  axios.post(this.action, this.data)
    .then((response) => {
      if (response.status === 200) {
        // remove stored data on success
        localStorage.removeItem(this.id);
      }
    })
    .catch((error) => {
      console.warn(error);
    });
}

如果实在不想使用 Ajax 提交,另外一种处理方案就是将数据回填表单,直接调用 form.submit() 提交,或者让用户自己点击提交按钮提交。

注意:简单起见,我略去了一些环节,比如表单验证以及安全 token 验证等等。这些步骤在真正的产品开发中是必不可少的。还有一个问题是关于敏感数据的处理,避免在本地明文存储用户密码信用卡信息等等。

如果有兴趣,可以在 CodePen 里查看完整的例子:

See the Pen Offline Form by Max Böck (@mxbck) on CodePen.

1 赞 收藏 1 评论

彩世界网址 1

  applicationCache 对象和事件。
  applicationCache 对象记录着本地缓存的各种状态及事件,可以通过 window.applicationCache.status 获得。

如何制作离线友好的表单?

2017/11/07 · JavaScript · 1 评论 · 表单

原文出处: mxb.at   译文出处:寸志   

彩世界网址 2

本文翻译自 Offline-Friendly Forms。

在网络不佳的情况下表单的表现并不理想。如果提交表单的时候恰好断网了,辛苦填好的数据有可能就找不回来了。下面就分享一下我们是如何修复这个问题的。

先睹为快,CodePen 上的 Demo。

自从有了 Service Worker,开发者可以为用户提供离线版的 Web 应用。静态资源的缓存相对比较容易,但对于需要和服务端交互的表单来说就有点困难了。不过还好,我们还是有办法为离线提供一种 fallback 的方案。

首先,创建一个与离线友好表单相对应的 Class。将表单的 idaction 保存下来,并绑定表单的 submit 事件。

class OfflineForm { // setup the instance. constructor(form) { this.id = form.id; this.action = form.action; this.data = {}; form.addEventListener('submit', e => this.handleSubmit(e)); } }

1
2
3
4
5
6
7
8
9
10
class OfflineForm {
  // setup the instance.
  constructor(form) {
    this.id = form.id;
    this.action = form.action;
    this.data = {};
 
    form.addEventListener('submit', e => this.handleSubmit(e));
  }
}

在 submit 的处理函数中,可以使用 navigator.onLine 来检查网络链接情况,这个 API 浏览器都支持得差不多了,就算要实现也比较简单。

但是这个 API 存在误报的可能。因为这个属性只能表示存在网络链接,并不保证网络是通的。反过来,如果结果是 false 就可以明确表示是断网的。因此据此判断是否离线是一种相对靠谱的方式。

如果用户处于离线状态,我们将表单提 hold 住,把表单数据保存在本地。

handleSubmit(e) { e.preventDefault(); // parse form inputs into data object. this.getFormData(); if (!navigator.onLine) { // user is offline, store data on device. this.storeData(); } else { // user is online, send data via ajax. this.sendData(); } }

1
2
3
4
5
6
7
8
9
10
11
12
13
handleSubmit(e) {
  e.preventDefault();
  // parse form inputs into data object.
  this.getFormData();
 
  if (!navigator.onLine) {
    // user is offline, store data on device.
    this.storeData();
  } else {
    // user is online, send data via ajax.
    this.sendData();
  }
}

sessionStorage主要作用是将数据保存在当前回话中,存储的数据的生命周期只保存在存储的当前窗口或由当前窗口
    新建的新窗口,直到想关联的标签页关闭。

保存表单

我们有数种在用户设备商保存数据的方式。根据数据的特点,你可以使用 sessionStorage,如果不想把数据存储在内存种,也可保存在localStorage 中。

给表单数据付上一个时间戳,挂在一个新对象上。然后使用 localStorage.setItem 保存。这个方法接受两个参数,key(表单 id) 和 value(通常是一个 JSON 字符串)。

storeData() { // check if localStorage is available. if (typeof Storage !== 'undefined') { const entry = { time: new Date().getTime(), data: this.data, }; // save data as JSON string. localStorage.setItem(this.id, JSON.stringify(entry)); return true; } return false; }

1
2
3
4
5
6
7
8
9
10
11
12
13
storeData() {
  // check if localStorage is available.
  if (typeof Storage !== 'undefined') {
    const entry = {
      time: new Date().getTime(),
      data: this.data,
    };
    // save data as JSON string.
    localStorage.setItem(this.id, JSON.stringify(entry));
    return true;
  }
  return false;
}

注意:可以在 Chrome 的开发者工具的 Application 标签中查看 storage 数据。如果不出差错,里面的内容如下:

彩世界网址 3

还有最好将离线的情况告知用户,告诉他们填写的数据并不会丢失。补充 handleSubmit 方法,将这些信息反馈给用户。

彩世界网址 4

考虑得真是周到呀!

    JSON.parse(localStorage.getItem("userData")).name = "new Sankyu Name";

  离线与缓存, 都是为了更好地缓存各种文件以提高读取的速度, 网页缓存依赖于网络的存在,二离线应用在离线下仍然可以。
  页面缓存主要是缓存当前页面的相关内容,页仅限于当前页面的读取。
  if(window.applicationCache){
    //浏览器支持离线应用,在此编写离线应用功能。
  }
  mainfest 文件、
    <html mainfwst="cache.manifest">

    alert(JSON.parse(localStorage.getItem("userData")).name);

离线应用:

localStorage 主要作用是将数据保存在客户端中,也就是用户的计算机上。 是基于域的,在该域的任何网页都可以访问,在不同设备上存储的是不同的。
  在本地存储一个字符串类型的数据 key/value setItem
    localStorage.setItem("name","非一般的黑客")
  通过getItem 方法读取key 值为name的值。
    localStorage.getItem("name")
  也可以通过索引去读取,localStorage.key(1)
  删除指定key为“name”的item
    localStorage.removeItem("name")
  删除localStorage 所有key/value

存储JSON 格式的数据
  //定义JSON 格式字符串。
    var userData ={
      name:"Sankyu Name",
      account:"sankyu",
      level:1,
      disabled:true
    }
  //存储userData 数据。
    localStorage.setItem("userData",JSON.stringify(userData));
  //读取userdata 数据并赋值给新变量newUserData
    var newUserDta = JSON.parse(localStorage.getItem("userData"))
  //删除本地存储的item
    localStorage.removeItem("userData")
  //输出对象
    alert(newUserData);

采用重新设置的item 方案修改JSON 对象数据。

    userData.name = "new Sankyu Name";

    采用点语法更新JSON 对象内数据

  不是广泛支持的 input 类型
    datetime 类型,日期和时间文本框(含时区)。
    datetime-local 类型,日期和时间文本框(不含时区)。
    Time 类型,时间选择器文本框。
    Date 类型, 日期选择器文本框。
    Week 类型,年的周号选择器。
    Month 类型,月份选择器。

HTML5表单元素。
  1.form 属性。
    <input form=testform> 外部的<input>就属于form 表单范围。
  2.placeholder 属性 未输入状态下给出文本框的提示内容。
    <input type="text" placeholder="请输入内容"/>
  3. autofocus 控件自动获得焦点。
    <input type="text" autofocus>
  4.required 必填属性,如果表单中存在required 属性的元素时,如果元素为空,则无法提交表单。
    <input type="text" required/>                                  
移动web表单的input类型,
  1.search 主要用于搜索关键词的文本框类型。外观为圆角文本框。
  2.email 主要用于输入E-mail 地址的文本框,会根据当前的文本框类型显示想对应的键盘。
  3.numner 主要用于输入数字的文本框类型, 可以配合min 属性 max 属性,以及step 属性。
  4.range 主要是一种数值范围输入文本框, 一种滑动输入方式,需要配合 min max range 等属性使用。ios Android 内置浏览器都不支持。
  5.tel 主要是一种供用户输入电话号码的文本框, 提供数字键盘输入法。
  6.url 主要是一种输入URL 地址的文本框类型, 提供的输入法是网址输入法键盘。

  //定义JSON 格式字符串。
    var userData ={
      name:"Sankyu Name",
      account:"sankyu",
      level:1,
      disabled:true
  }
  //存储userData 数据。
    localStorage.setItem("userData",JSON.stringify(userData));

 

    alert(userData.name)

    Storage 事件监听
      创建一个页面该页面的主要功能是操作LocalStorage
      window.onload = function(){
          localStorage.clear();
          localStorage.setItem("userData","storage demo");
          localStorage.setItem("userData","storage event demo");
      };
  新增一个页面:
    window.onload = function (){
      window.addEventListener("storage",function(e){
        console.log(e);
      },true)
    }

    localStorage.setItem("userData",JSON.stringify(userData))

    alert(JSON.parse(localStorage.getItem("userData")).name);

    alert(userData.name)

   //存储userData 数据。
    localStorage.setItem("userData",JSON.stringify(userData));

在HTML5 中定义了两种本地存储的,Web Storage 和本地数据库 SQL Database .
  用来检查判断浏览器是否支持 Web Storage
  if(window.localStorage){
    //浏览器支持localStorage
  }
  if(window.sessionStorage){
    //浏览器支持sessionStorage
  }

    userData.name = "new Sankyu Name";

  //读取userdata 数据并赋值给新变量newUserData
    var newUserDta = JSON.parse(localStorage.getItem("userData"))

 //定义JSON 格式字符串。
    var userData ={
      name:"Sankyu Name",
      account:"sankyu",
      level:1,
      disabled:true
    }

  //读取userdata 数据并赋值给新变量newUserData
    var newUserDta = JSON.parse(localStorage.getItem("userData"));

本文由时时app平台注册网站发布于web前端,转载请注明出处:什么制作离线友好的表单?彩世界网址

关键词: