http://www.web008.net

HTML5行业内部的本土存款和储蓄,怎么着营造离线友好的表单

怎么样制作离线友好的表单?

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

初藳出处: mxb.at   译文出处:寸志   

图片 1

本文翻译自 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();
  }
}

在HTML5 中定义了二种本地存款和储蓄的,Web Storage 和本土数据库 SQL Database .
  用来确诊浏览器是还是不是匡助 Web Storage
  if(window.localStorage){
    //浏览器匡助localStorage
  }
  if(window.sessionStorage){
    //浏览器帮忙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 数据。假诺不出差错,里面包车型大巴剧情如下:

图片 2

还应该有最佳将离线的意况报告客商,告诉他们填写的数目并不会抛弃。补充 handleSubmit 方法,将这几个新闻叙述给客户。

图片 3

思忖得真是周详呀!

localStorage 首要效率是将数据保存在客户端中,也便是客商的Computer上。 是基于域的,在该域的其余网页都能够访问,在差异器具上囤积的是莫衷一是的。
  在该地存款和储蓄叁个字符串类型的多少 key/value setItem
    localStorage.setItem("name","非平日的红客"卡塔尔国
  通过getItem 方法读取key 值为name的值。
    localStorage.getItem("name")
  也得以经过索引去读取,localStorage.key(1卡塔尔国
  删除钦命key为“name”的item
    localStorage.removeItem("name")
  删除localStorage 所有key/value

检查保存的数额

假若客户联网,就供给检查一下本地是还是不是留存未提交的表单。大家需求监听 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 评论

图片 4

 

存储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 对象数据。

  //定义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"));

    userData.name = "new Sankyu Name";

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

    alert(userData.name)

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

    接纳点语法更新JSON 对象内数据

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

郑重声明:本文版权归美高梅163888所有,转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们修改或删除,多谢。