您的位置:新葡亰496net > 新葡亰官网 > 新葡亰496net地方数据库,Web应用中的离线数据存

新葡亰496net地方数据库,Web应用中的离线数据存

发布时间:2019-10-13 08:31编辑:新葡亰官网浏览(199)

    何以创造离线友好的表单?

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

    原来的作品出处: mxb.at   译文出处:寸志   

    新葡亰496net 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

    本文由 伯乐在线 - njuyz 翻译。未经许可,幸免转发!
    泰语出处:Nettuts 。款待加入翻译组。

    保留表单

    我们有数种在用户设备商保存数据的法子。依照数量的特色,你能够应用 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 数据。假诺不出差错,里面包车型大巴原委如下:

    新葡亰496net 2

    还恐怕有最佳将离线的情事告诉用户,告诉她们填写的多少并不会舍弃。补充 handleSubmit 方法,将那么些音信陈述给顾客。

    新葡亰496net 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");

    为了提高Web应用的顾客体验,想必非常多开拓者都会项目中引进离线数据存款和储蓄机制。但是面临多姿多彩的离线数据本领,哪种才是最能满意项目须求的吧?本文将帮扶各位找到最合适的那么些。

    自己争辩保存的数码

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

    新葡亰496net 4

     

    getItem获取value

    引言

    乘机HTML5的赶来,各样Web离线数据技能步入了开辟职员的视线。诸如AppCache、localStorage、sessionStorage和IndexedDB等等,各种本事都有它们各自适用的规模。比方AppCache就相比较切合用于离线起动应用,或许在离线状态下使利用的一有个别成效照常运作。接下来作者将会为我们作详细介绍,并且用一些代码片段来展现什么行使这一个本领。

    仓库储存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");

    AppCache

    只要你的Web应用中有局地效果与利益(恐怕全部应用)要求在脱离服务器的状态下行使,那么就足以由此AppCache来让您的客户在离线状态下也能应用。你所需求做的正是创造一个配置文件,在其间钦命哪些能源须要被缓存,哪些不必要。另外,仍可以在里边钦赐有个别联机财富在脱机条件下的代表财富。

    AppCache的配置文件平时是三个以.appcache终极的文本文件(推荐写法)。文件以CACHE MANIFEST开班,包涵下列三有的剧情:

    • CACHE – 钦赐了什么能源在顾客率先次访谈站点的时候须求被下载并缓存
    • NETWORK – 钦点了怎么着财富需求在一起条件下才干访谈,那几个财富从不被缓存
    • FALLBACK – 钦赐了上述能源在脱机条件下的代表财富

    选择双重设置的item 方案修改JSON 对象数据。

    removeItem删除key

    示例

    第一,你需求在页面上钦定AppCache的配置文件:

    XHTML

    <!DOCTYPE html> <html manifest="manifest.appcache"> ... </html>

    1
    2
    3
    4
    <!DOCTYPE html>
    <html manifest="manifest.appcache">
    ...
    </html>

    在那间相对记得在劳动器端公布上述配置文件的时候,须求将MIME类型设置为text/cache-manifest,不然浏览器不能够寻常深入分析。

    接下去是创制在此之前定义好的各类能源。大家要是在这里个示例中,你付出的是三个交互类站点,客户能够在上头联系外人并且宣布商议。顾客在离线的气象下还是能够访谈网址的静态部分,而关系以至公布商讨的页面则会被别的页面代替,不可能访谈。

    好的,大家那就入手定义这个静态财富:

    JavaScript

    CACHE MANIFEST CACHE: /about.html /portfolio.html /portfolio_gallery/image_1.jpg /portfolio_gallery/image_2.jpg /info.html /style.css /main.js /jquery.min.js

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    CACHE MANIFEST
     
    CACHE:
    /about.html
    /portfolio.html
    /portfolio_gallery/image_1.jpg
    /portfolio_gallery/image_2.jpg
    /info.html
    /style.css
    /main.js
    /jquery.min.js

    旁注:配置文件写起来有几许特不便利。比如来佛说,假诺你想缓存整个目录,你无法一贯在CACHE部分用到通配符(*),而是只好在NETWO福特ExplorerK部分应用通配符把装有不应该被缓存的财富写出来。

    您无需显式地缓存包涵配置文件的页面,因为这一个页面会自动被缓存。接下来大家为挂钩和批评的页面定义FALLBACK部分:

    JavaScript

    FALLBACK: /contact.html /offline.html /comments.html /offline.html

    1
    2
    3
    FALLBACK:
    /contact.html /offline.html
    /comments.html /offline.html

    最后大家用叁个通配符来阻止其他的能源被缓存:

    JavaScript

    NETWORK: *

    1
    2
    NETWORK:
    *

    提起底的结果便是上边那样:

    JavaScript

    CACHE MANIFEST CACHE: /about.html /portfolio.html /portfolio_gallery/image_1.jpg /portfolio_gallery/image_2.jpg /info.html /style.css /main.js /jquery.min.js FALLBACK: /contact.html /offline.html /comments.html /offline.html NETWORK: *

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    CACHE MANIFEST
     
    CACHE:
    /about.html
    /portfolio.html
    /portfolio_gallery/image_1.jpg
    /portfolio_gallery/image_2.jpg
    /info.html
    /style.css
    /main.js
    /jquery.min.js
     
    FALLBACK:
    /contact.html /offline.html
    /comments.html /offline.html
     
    NETWORK:
    *

    再有一件很入眼的事情要记得:你的财富只会被缓存叁回!相当于说,要是能源革新了,它们不会自动更新,除非你改改了布署文件。所以有贰个一流实施是,在布局文件中加进一项版本号,每回换代能源的时候顺便更新版本号:

    JavaScript

    CACHE MANIFEST # version 1 CACHE: ...

    1
    2
    3
    4
    5
    6
    CACHE MANIFEST
     
    # version 1
     
    CACHE:
    ...

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

    LocalStorage和SessionStorage

    要是您想在Javascript代码里面保存些数据,那么那五个东西就派上用场了。前贰个足以保存数据,恒久不会晚点(expire)。只借使一律的域和端口,全部的页面中都能访问到通过LocalStorage保存的数目。举个轻松的例证,你能够用它来保存客商安装,顾客能够把他的村办喜好保存在脚下利用的微型Computer上,现在展开应用的时候能够一贯加载。前面一个也能保留数据,不过只要关闭浏览器窗口(译者注:浏览器窗口,window,如果是多tab浏览器,则此处指代tab)就失效了。并且这么些数量不可能在不一样的浏览器窗口之间分享,即使是在区别的窗口中做客同贰个Web应用的其他页面。

    旁注:有一点亟待提示的是,LocalStorage和SessionStorage里面只可以保留基本类型的数据,也等于字符串和数字类型。别的具备的数量足以经过各自的toString()方法转化后保存。假如你想保留一个目的,则必要运用JSON.stringfy方法。(要是那些目的是多少个类,你能够复写它暗中认可的toString()方法,这么些方法会自动被调用)。

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

    clear清除全体的key/value

    示例

    大家不要紧来拜访后面包车型客车例证。在联系人和批评的一对,大家能够随即保存顾客输入的东西。这样一来,纵然顾客十分大心关闭了浏览器,在此之前输入的事物也不会吐弃。对于jQuery来讲,那几个意义是小菜一碟。(注意:表单中各种输入字段都有id,在这里边大家就用id来代表具体的字段)

    JavaScript

    $('#comments-input, .contact-field').on('keyup', function () { // let's check if localStorage is supported if (window.localStorage) { localStorage.setItem($(this).attr('id'), $(this).val()); } });

    1
    2
    3
    4
    5
    6
    $('#comments-input, .contact-field').on('keyup', function () {
       // let's check if localStorage is supported
       if (window.localStorage) {
          localStorage.setItem($(this).attr('id'), $(this).val());
       }
    });

    历次提交联系人和评价的表单,大家必要清空缓存的值,大家能够那样管理提交(submit)事件:

    JavaScript

    $('#comments-form, #contact-form').on('submit', function () { // get all of the fields we saved $('#comments-input, .contact-field').each(function () { // get field's id and remove it from local storage localStorage.removeItem($(this).attr('id')); }); });

    1
    2
    3
    4
    5
    6
    7
    $('#comments-form, #contact-form').on('submit', function () {
       // get all of the fields we saved
       $('#comments-input, .contact-field').each(function () {
          // get field's id and remove it from local storage
          localStorage.removeItem($(this).attr('id'));
       });
    });

    终极,每一遍加载页面包车型大巴时候,把缓存的值填充到表单上就可以:

    JavaScript

    // get all of the fields we saved $('#comments-input, .contact-field').each(function () { // get field's id and get it's value from local storage var val = localStorage.getItem($(this).attr('id')); // if the value exists, set it if (val) { $(this).val(val); } });

    1
    2
    3
    4
    5
    6
    7
    8
    9
    // get all of the fields we saved
    $('#comments-input, .contact-field').each(function () {
       // get field's id and get it's value from local storage
       var val = localStorage.getItem($(this).attr('id'));
       // if the value exists, set it
       if (val) {
          $(this).val(val);
       }
    });

        userData.name = "new Sankyu Name";

    用途:清除全体的key/value
    用法:localStorage.clear()
    代码示例:
    localStorage.clear();

    IndexedDB

    在自己个人看来,那是最佳玩的一种技能。它能够保存大批量因而索引(indexed)的多少在浏览器端。那样一来,就会在顾客端保存复杂对象,大文档等等数据。并且客户能够在离线情状下访谈它们。这一性子大致适用于具备项指标Web应用:假使您写的是邮件客户端,你能够缓存客户的邮件,以供稍后再看;要是您写的是相册类应用,你能够离线保存客户的照片;若是你写的是GPS导航,你能够缓存客商的渠道……数不清。

    IndexedDB是贰个面向对象的数据库。那就代表在IndexedDB中既子虚乌有表的概念,也从没SQL,数据是以键值对的形式保留的。个中的键不仅可以够是字符串和数字等基础项目,也能够是日期和数组等复杂类型。这一个数据库自身营造于积累(store,多个store类似于关系型数据中表的概念)的根基上。数据库中各样值都必须求有照顾的键。每一种键既能自动生成,也足以在插入值的时候内定,也足以取自于值中的某些字段。假诺您决定运用值中的字段,那么只好向当中增加Javascript对象,因为基础数据类型不像Javascript对象这样有自定义属性。

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

    localStorage提供的key()和length能够方便的达成存款和储蓄的数据遍历,比如下边的代码:

    示例

    在这里个事例中,大家用二个音乐专辑应用作为示范。不过本人并不希图在那原原本本体现整个应用,而是把涉及IndexedDB的有个别挑出来解释。若是大家对那一个Web应用感兴趣的话,小说的末端也提供了源代码的下载。首先,让大家来开荒数据库并创造store:

    JavaScript

    // check if the indexedDB is supported if (!window.indexedDB) { throw 'IndexedDB is not supported!'; // of course replace that with some user-friendly notification } // variable which will hold the database connection var db; // open the database // first argument is database's name, second is it's version (I will talk about versions in a while) var request = indexedDB.open('album', 1); request.onerror = function (e) { console.log(e); }; // this will fire when the version of the database changes request.onupgradeneeded = function (e) { // e.target.result holds the connection to database db = e.target.result; // create a store to hold the data // first argument is the store's name, second is for options // here we specify the field that will serve as the key and also enable the automatic generation of keys with autoIncrement var objectStore = db.createObjectStore('cds', { keyPath: 'id', autoIncrement: true }); // create an index to search cds by title // first argument is the index's name, second is the field in the value // in the last argument we specify other options, here we only state that the index is unique, because there can be only one album with specific title objectStore.createIndex('title', 'title', { unique: true }); // create an index to search cds by band // this one is not unique, since one band can have several albums objectStore.createIndex('band', 'band', { unique: false }); };

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    // check if the indexedDB is supported
    if (!window.indexedDB) {
        throw 'IndexedDB is not supported!'; // of course replace that with some user-friendly notification
    }
     
    // variable which will hold the database connection
    var db;
     
    // open the database
    // first argument is database's name, second is it's version (I will talk about versions in a while)
    var request = indexedDB.open('album', 1);
     
    request.onerror = function (e) {
        console.log(e);
    };
     
    // this will fire when the version of the database changes
    request.onupgradeneeded = function (e) {
        // e.target.result holds the connection to database
        db = e.target.result;
     
        // create a store to hold the data
        // first argument is the store's name, second is for options
        // here we specify the field that will serve as the key and also enable the automatic generation of keys with autoIncrement
        var objectStore = db.createObjectStore('cds', { keyPath: 'id', autoIncrement: true });
     
        // create an index to search cds by title
        // first argument is the index's name, second is the field in the value
        // in the last argument we specify other options, here we only state that the index is unique, because there can be only one album with specific title
        objectStore.createIndex('title', 'title', { unique: true });
     
        // create an index to search cds by band
        // this one is not unique, since one band can have several albums
        objectStore.createIndex('band', 'band', { unique: false });
    };

    相信上边包车型客车代码还是极其简单明了的。预计你也介意到上述代码中开荒数据库时会传入一个本子号,还用到了onupgradeneeded事件。当你以较新的本子打开数据库时就能够触发这些事件。假设相应版本的数据库尚官样文章,则会触发事件,随后大家就能够创设所需的store。接下来咱们还成立了三个目录,多个用以标题搜索,三个用于乐队找寻。未来让大家再来看看如何增删专辑:

    JavaScript

    // adding $('#add-album').on('click', function () { // create the transaction // first argument is a list of stores that will be used, second specifies the flag // since we want to add something we need write access, so we use readwrite flag var transaction = db.transaction([ 'cds' ], 'readwrite'); transaction.onerror = function (e) { console.log(e); }; var value = { ... }; // read from DOM // add the album to the store var request = transaction.objectStore('cds').add(value); request.onsuccess = function (e) { // add the album to the UI, e.target.result is a key of the item that was added }; }); // removing $('.remove-album').on('click', function () { var transaction = db.transaction([ 'cds' ], 'readwrite'); var request = transaction.objectStore('cds').delete(/* some id got from DOM, converted to integer */); request.onsuccess = function () { // remove the album from UI } });

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    // adding
    $('#add-album').on('click', function () {
        // create the transaction
        // first argument is a list of stores that will be used, second specifies the flag
        // since we want to add something we need write access, so we use readwrite flag
        var transaction = db.transaction([ 'cds' ], 'readwrite');
        transaction.onerror = function (e) {
            console.log(e);
        };
        var value = { ... }; // read from DOM
        // add the album to the store
        var request = transaction.objectStore('cds').add(value);
        request.onsuccess = function (e) {
            // add the album to the UI, e.target.result is a key of the item that was added
        };
    });
     
    // removing
    $('.remove-album').on('click', function () {
        var transaction = db.transaction([ 'cds' ], 'readwrite');
        var request = transaction.objectStore('cds').delete(/* some id got from DOM, converted to integer */);
        request.onsuccess = function () {
            // remove the album from UI
        }
    });

    是还是不是看起来直接明了?这里对数据库全数的操作都依据事务的,只有这么技术保障数据的一致性。未来最后要做的正是展现音乐专辑:

    JavaScript

    request.onsuccess = function (e) { if (!db) db = e.target.result; var transaction = db.transaction([ 'cds' ]); // no flag since we are only reading var store = transaction.objectStore('cds'); // open a cursor, which will get all the items from database store.openCursor().onsuccess = function (e) { var cursor = e.target.result; if (cursor) { var value = cursor.value; $('#albums-list tbody').append(' ' value.title '' value.band '' value.genre '' value.year '

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    request.onsuccess = function (e) {
        if (!db) db = e.target.result;
     
        var transaction = db.transaction([ 'cds' ]); // no flag since we are only reading
        var store = transaction.objectStore('cds');
        // open a cursor, which will get all the items from database
        store.openCursor().onsuccess = function (e) {
            var cursor = e.target.result;
            if (cursor) {
                var value = cursor.value;
                $('#albums-list tbody').append('
    ' value.title '' value.band '' value.genre '' value.year '

    ‘); // move to the next item in the cursor cursor.continue(); } }; }

    那亦非拾分复杂。能够望见,通过动用IndexedDB,能够十分轻松的保留复杂对象,也足以由此索引来搜索想要的内容:

    JavaScript

    function getAlbumByBand(band) { var transaction = db.transaction([ 'cds' ]); var store = transaction.objectStore('cds'); var index = store.index('band'); // open a cursor to get only albums with specified band // notice the argument passed to openCursor() index.openCursor(IDBKeyRange.only(band)).onsuccess = function (e) { var cursor = e.target.result; if (cursor) { // render the album // move to the next item in the cursor cursor.continue(); } }); }

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    function getAlbumByBand(band) {
        var transaction = db.transaction([ 'cds' ]);
        var store = transaction.objectStore('cds');
        var index = store.index('band');
        // open a cursor to get only albums with specified band
        // notice the argument passed to openCursor()
        index.openCursor(IDBKeyRange.only(band)).onsuccess = function (e) {
            var cursor = e.target.result;
            if (cursor) {
                // render the album
                // move to the next item in the cursor
                cursor.continue();
            }
        });
    }

    利用索引的时候和接纳store无差距于,也能透过游标(cursor)来遍历。由于同一个索引值名下也是有有些条数据(要是索引不是unique的话),所以那边大家必要运用IDBKeyRange。它能依赖内定的函数对结果集进行过滤。这里,大家只想依赖钦定的乐队进行检索,所以大家用到了only()函数。也能选用任何类似于lowerBound()新葡亰496net,,upperBound()bound()等函数,它们的作用也是不在话下的。

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

    总结

    能够瞥见,在Web应用中利用离线数据而不是拾贰分复杂。希望通过翻阅那篇小说,各位能够在Web应用中加入离线数据的效果与利益,使得你们的运用越来越团结易用。你能够在这里下载全数的源码,尝试一下,大概修改,只怕用在你们的选用中。

    赞 收藏 评论

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

    关于小编:njuyz

    新葡亰496net 5

    (今日头条新浪:@njuyz) 个人主页 · 作者的文章 · 11

        选取点语法更新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"))

    新葡亰496net 6新葡亰496net 7

        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");
          };
    新葡亰496net地方数据库,Web应用中的离线数据存款和储蓄。  新扩充三个页面:
        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 内置浏览器都不扶持。
    新葡亰496net地方数据库,Web应用中的离线数据存款和储蓄。  5.tel 主假如一种供客户输入电话号码的文本框, 提供超薄键盘输入法。
      6.url 主若是一种输入UENCOREL 地址的文本框类型, 提供的输入法是网址输入法键盘。

      不是广阔扶植的 input 类型
        datetime 类型,日期和时间文本框(含时区)。
        datetime-local 类型,日期和岁月文本框(不含时区)。
        Time 类型,时间接选举拔器文本框。
        Date 类型, 日期选拔器文本框。
        Week 类型,年的周号接纳器。
        Month 类型,月份选取器。

    本文由新葡亰496net发布于新葡亰官网,转载请注明出处:新葡亰496net地方数据库,Web应用中的离线数据存

    关键词:

上一篇:完全指南,Flexbox布局学习笔记

下一篇:没有了