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
  }

认清浏览器是还是不是帮衬localStorage能够采纳上面包车型地铁代码:
if(window.localStorage){     
alert("支持localStorage")
}else{    
alert("暂不扶助localStorage")
 }
 //可能 if(typeof window.localStorage == 'undefined'){     alert("浏览暂不援救localStorage") }
 setItem存储value

封存表单

我们有数种在顾客设备商保存数据的秘诀。依照数量的特色,你能够应用 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

用途:将value存储到key字段
用法:localStorage.setItem( key, value)
代码示例:
localStorage.setItem("id", "2");

反省保存的数码

假诺客户联网,就必要检查一下本地是或不是留存未提交的表单。大家要求监听 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

 

getItem获取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);

用处:获取钦赐key本地存款和储蓄的值
用法:localStorage.getItem(key)
代码示例:
var value =localStorage.getItem("id");

选择双重安装的item 方案修正JSON 对象数据。

removeItem删除key

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

用场:删除钦命key本地存款和储蓄的值
用法:localStorage.removeItem(key)
代码示例:
localStorage.removeItem("id");

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

clear杀绝全数的key/value

    userData.name = "new Sankyu Name";

用场:扑灭全部的key/value
用法:localStorage.clear()
代码示例:
localStorage.clear();

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

localStorage提供的key()和length能够低价的落到实处存储的数量遍历,比如上面包车型地铁代码:

    alert(userData.name)

var storage = window.localStorage;
 for (var i=0, len = storage.length; i  <  len; i ){    
  var key = storage.key(i);     var value = storage.getItem(key);   
    console.log(key "=" value);
     }

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

storage事件
storage还提供了storage事件,当键值退换只怕clear的时候,就能够触发storage事件,如上边包车型地铁代码就增添了三个storage事件改变的监听:
if(window.addEventListener){     
window.addEventListener("storage",handle_storage,false);
}else if(window.attachEvent){
    window.attachEvent("onstorage",handle_storage);
    } function handle_storage(e){     
    if(!e){
    e=window.event;
    }    
   }

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

storage事件对象的具体性质如下表:

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

Property Type 描述
key String 指定的键,添加、删除或moddified
oldValue Any (现在的前一个值覆盖),如果添加了一个新的项目或null
newValue Any 新值,或null如果一个项目是补充道
url/uri String 页面称为引发这种变化的方法

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

上边是部分使用例子:

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

图片 5图片 6

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

  1 <!DOCTYPE html>
  2 <html>
  3 <head>
  4     <script src="../Script/jquery-1.9.1.min.js" type="text/javascript"></script>
  5     <title>localStorage</title>
  6     <script type="text/javascript">
  7         var productBrowseTheTraceArray = [];
  8         if (window.localStorage) {
  9             alert("浏览支持localStorage")
 10             try {
 11                 if (typeof localStorage.getItem("productBrowseTheTraceJsonData") != 'undefined') {
 12                     productBrowseTheTraceArray = JSON.parse(localStorage.getItem("productBrowseTheTraceJsonData")) || [];
 13 
 14                     var time = new Date().toLocaleDateString().toString().replace("/", "-").replace("/", "-");  //判断 记录 是否过期
 15                     for (var i = 0;i< productBrowseTheTraceArray.length; i  ) {   //循环遍历 去除 过期的数据
 16                         if (daysBetween(time, productBrowseTheTraceArray[i].productAddDateTime) >15) {  //判断 数据的日期是否 大于 15
 17                             productBrowseTheTraceArray.splice(i, 1);  //记录过期  移除
 18                         }
 19                     }
 20                 }
 21                 localStorage.setItem("productBrowseTheTraceJsonData", JSON.stringify(productBrowseTheTraceArray));
 22                 //browseTheTrace = localStorage.getItem("productBrowseTheTraceJsonData") || [];
 23             } catch (e) {
 24                 Window.localStorage.clear(); //删除所有数据 
 25                 localStorage.setItem("productBrowseTheTraceJsonData", JSON.stringify(productBrowseTheTraceArray));
 26                 alert("异常名字:"   e.name);
 27                 alert("异常号:"   e.number);
 28                 alert("异常的描述信息:"   e.description);
 29                 alert("异常的错误信息:"   e.message);
 30             }
 31         } else {
 32             alert("浏览暂不支持localStorage")
 33         }
 34         //或者 if(typeof window.localStorage == 'undefined'){     alert("浏览暂不支持localStorage") }
 35 
 36         $(function () {
 37 
 38 
 39             //setItem存储value
 40             $("#submit").click(function () {
 41                 var obj =
 42                  {
 43                      productId: $("#txtProductId").val(),
 44                      productName: $("#txtProductName").val(),
 45                      productPrice: $("#txtProductPrice").val(),
 46                      productImageUrl: $("#txtProductImageUrl").val(),
 47                      productAddDateTime: new Date().toLocaleDateString().toString().replace("/", "-").replace("/", "-")
 48                  };
 49                  alert(obj);
 50                 for (var i = 0; i < productBrowseTheTraceArray.length; i  ) {   //循环遍历 是否 数组里面已经存在 该数据
 51                     if (productBrowseTheTraceArray[i].productId == obj.productId) {
 52                         productBrowseTheTraceArray.splice(i, 1);  //记录过期  移除
 53                         break;
 54                     }
 55                 }
 56                 productBrowseTheTraceArray.push(obj);
 57                 var jsonData = JSON.stringify(productBrowseTheTraceArray);
 58                 alert(jsonData);
 59 
 60                 localStorage.setItem("productBrowseTheTraceJsonData", jsonData);
 61 
 62             });
 63 
 64             $("#getData").click(function () {
 65                 productBrowseTheTraceArray = JSON.parse(localStorage.getItem("productBrowseTheTraceJsonData")) || [];
 66                 alert(productBrowseTheTraceArray);
 67                 var html = [];
 68                 for (var i = 0; i < productBrowseTheTraceArray.length; i  ) {
 69                     html[i] = "<p>产品ID:"   productBrowseTheTraceArray[i].productId   "</p><br/><p>产品名称:"   productBrowseTheTraceArray[i].productName   "</p><br/><p>产品价格:"   productBrowseTheTraceArray[i].productPrice   "</p><br/><p>产品图片URL:"   productBrowseTheTraceArray[i].productImageUrl   "</p>";
 70                 }
 71                 $("#data").html(html.join(""));
 72                 alert(html);
 73             });
 74 
 75         });
 76 
 77 
 78 
 79         // ---------------------------------------------------  
 80         //| 求两个时间的天数差 日期格式为 YYYY-MM-dd   
 81         // ---------------------------------------------------  
 82         function daysBetween(DateOne, DateTwo) {
 83             var OneMonth = DateOne.substring(5, DateOne.lastIndexOf('-'));
 84             var OneDay = DateOne.substring(DateOne.length, DateOne.lastIndexOf('-')   1);
 85             var OneYear = DateOne.substring(0, DateOne.indexOf('-'));
 86 
 87             var TwoMonth = DateTwo.substring(5, DateTwo.lastIndexOf('-'));
 88             var TwoDay = DateTwo.substring(DateTwo.length, DateTwo.lastIndexOf('-')   1);
 89             var TwoYear = DateTwo.substring(0, DateTwo.indexOf('-'));
 90 
 91             var cha = ((Date.parse(OneMonth   '/'   OneDay   '/'   OneYear) - Date.parse(TwoMonth   '/'   TwoDay   '/'   TwoYear)) / 86400000);
 92             return Math.abs(cha);
 93         }  
 94     </script>
 95 </head>
 96 <body>
 97     Key:<input type="text" id="txtKey" /><br />
 98     产品Id:<input type="text" id="txtProductId" /><br />
 99     产品名称:<input type="text" id="txtProductName" /><br />
100     产品价格:<input type="text" id="txtProductPrice" /><br />
101     产品图片:<input type="text" id="txtProductImageUrl" /><br />
102     <input type="button" id="submit" value="添加" />
103     <input type="button" id="getData" value="获取localStorage的值" />
104     <br />
105     <div id="data">
106     </div>
107 </body>
108 </html>

    userData.name = "new Sankyu Name";

View Code

    alert(userData.name)

 

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

sessionStorage主要成效是将数据保存在这个时候此刻答应中,存储的数额的生命周期只保存在存款和储蓄的近日窗口或由近日窗口
    新建的新窗口,直到想关联的标签页关闭。

    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)
    }

离线应用:

  离线与缓存, 皆以为了更加好地缓存各个文件以巩固读取的进程, 网页缓存信赖于网络的留存,二离线应用在离线下依旧能够。
  页面缓存首若是缓存当前页面包车型大巴相干内容,页只限于当前页面包车型大巴读取。
  if(window.applicationCache){
    //浏览器帮忙离线应用,在那编写制定离线应用作用。
  }
  mainfest 文件、
    <html mainfwst="cache.manifest">

  applicationCache 对象和事件。
  applicationCache 对象记录着地点缓存的各样情状及事件,能够由此window.applicationCache.status 取得。

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 首假诺风姿洒脱种输入UPAJEROL 地址的公文框类型, 提供的输入法是网站输入法键盘。

  不是大范围扶助的 input 类型
    datetime 类型,日期和岁月文本框(含时区卡塔尔国。
    datetime-local 类型,日期和时间文本框(不含时区卡塔尔国。
    提姆e 类型,时直接收器文本框。
    Date 类型, 日期选拔器文本框。
    Week 类型,年的周号选取器。
    Month 类型,月份采纳器。

本文由星彩网app下载发布于前端技术,转载请注明出处:HTML5正规的地点存款和储蓄,如何创建离线友好的

TAG标签:
Ctrl+D 将本页面保存为书签,全面了解最新资讯,方便快捷。