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 首要作用是将数据保存在顾客端中,也正是顾客的微型机上。 是基于域的,在该域的其他网页都足以访问,在差异器械上囤积的是莫衷一是的。
  在地面存款和储蓄四个字符串类型的数据 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 首借使生机勃勃种输入UENVISIONL 地址的文书框类型, 提供的输入法是网站输入法键盘。

  不是相近帮衬的 input 类型
    datetime 类型,日期和岁月文本框(含时区卡塔尔。
    datetime-local 类型,日期和时间文本框(不含时区卡塔尔。
    Time 类型,时间选择器文本框。
    Date 类型, 日期选取器文本框。
    Week 类型,年的周号接收器。
    Month 类型,月份选拔器。

本文由pc28.am发布于前端技术,转载请注明出处:HTML5正经的地点存款和储蓄,本地数据库

上一篇:PostCSS长远学习,你须求精通怎样 下一篇:没有了
猜你喜欢
热门排行
精彩图文