HTML 5中的存储及离线应用（三）

最新推荐文章于 2018-09-04 23:26:20 发布
最新推荐文章于 2018-09-04 23:26:20 发布
阅读量3.5k 收藏
点赞数
分类专栏： Android移动开发 HTML5/CSS/JavaScript 文章标签： html 存储 function javascript button input

最后我们来看一下Indexed DB。


  1. Indexed DB使用Key-Value的数据库存储；
  2. 被Firefox4/Chrome 11以上支持；
  3. 限制较多；

好吧，由于不支持“file://”URL我放弃了，目前看起来还是一个toy而已，真的不是很好用，代码简单看一下。。。

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<!-- 
    indexedDB.html by Bill Weinman 
    <http://bw.org/contact/>
    created 2011-04-16

    Copyright (c) 2011 The BearHeart Group, LLC
    This file may be used for personal educational purposes as needed. 
    Use for other purposes is granted provided that this notice is
    retained and any changes made are clearly indicated as such. 
-->

<head>
    <title>
        indexedDB storage example
    </title>
    <link rel="stylesheet" type="text/css" href="../CSS/main.css">
    <script language="javascript" src="../Javascript/bwH5LS.js"></script>
    <script language="javascript">
        var db;
        var dbVersion = '1.0';
        openDB();

        // Check if this browser supports indexedDB
        function getIndexedDB() {
            try {
                if( ! window.indexedDB ) window.indexedDB = window.mozIndexedDB || window.webkitIndexedDB;
                if( !! window.indexedDB ) return window.indexedDB;
                else return undefined;
            } catch(e) {
                return undefined;
            }
        }

        // global error handler for indexedDB
        function dbErrorHandler(event) {
            dispError( 'Database error: ' + event.target.errorCode );
        }

        function openDB () {
            var iDB = getIndexedDB();
            if(!iDB) {
                dispError('IndexedDB not supported.');
                return;
            } else {
                try {
                    var request = iDB.open('travelDB', 'demo travel database');
                    request.onerror = function(event) { errorDisplay('Failed to open IndexedDB database.'); }
                    request.onsuccess = function(event) {
                        db = request.result;    // set the global db variable
                        db.onerror = dbErrorHandler;
                        if(db.version != dbVersion) {
                            var vReq = db.setVersion(dbVersion);
                            vReq.onerror = function(event) { alert('version error: ' + event.target.errorCode); }
                            vReq.onsuccess = function(event) {
                                alert('Creating the object store');
                                var objectStore = db.createObjectStore('oTravel', { keyPath: 'id', autoIncrement: true });
                                objectStore.createIndex('traveler', 'ciTraveler', { unique: false });
                            }
                        }
                    }
                } catch(e) {
                    dispError( 'Browser supports IndexedDB but didn\'t open the database. (' + e.message + ')');
                }
            }
        }

        // Create the Edit and Delete buttons for a row
        function rowButtons( id, traveler ) {
            return '<form><input type="button" value="Edit" onClick="javascript:editGo(' + id + ')"/>' +
                '<input type="button" value="Delete" onClick="javascript:deleteGo(' + id + ', "' + traveler + '")"/></form>';
        }

        // sometimes the database takes a moment to open
        // provides a retry for the dispResults() function
        var retryCount = 0;
        function retryDisp() {
            if( ++retryCount > 5 ) {
                errorDisp('Cannot open the database after 5 retries');
                dispResults();
            }
            setTimeout('dispResults()', 100);
        }

        // Main display function
        function dispResults() {
            if(errorMessage) {
                element('results').innerHTML = errorMessage;
                return;
            }

            if(db) {
                var bwt = new bwTable();
                bwt.setHeader(['Traveler', 'Destination', 'Transportation', '']);
                var count = 0;
                var objectStore = db.transaction(['oTravel']).objectStore('oTravel');
                var indexTraveler = objectStore.index("traveler");
                indexTraveler.openCursor().onsuccess = function(event) {
                    var cursor = event.target.result;
                    if(cursor) {
                        var v = cursor.value;
                        bwt.addRow([v.traveler, v.destination, v.transportation, rowButtons(v.id, v.traveler)]);
                        count++;
                        cursor.continue();
                    } else {    // the cursor is done
                        element('rowCount').innerHTML = count;
                        element('results').innerHTML = bwt.getTableHTML();
                        element('travelForm').elements['traveler'].focus();
                    }
                }
            } else { 
                // There's been no error, so the databaes is probably still opening
                retryDisp();
            }
        }

        // add or update rows in the table
        function dbGo() {
            if(errorMessage) return;
            var f = element('travelForm');
            var action = f.elements['inputAction'].value;
            var traveler = f.elements['traveler'].value;
            var destination = f.elements['destination'].value;
            var transportation = f.elements['transportation'].value;
            var key = f.elements['key'].value;

            switch(action) {
            case 'add': 
                if(! (traveler || destination || transportation)) break;
                curRec = { traveler: traveler, destination: destination, transportation: transportation,
                    ciTraveler: traveler.toLowerCase() };
                db.transaction(['oTravel'], IDBTransaction.READ_WRITE).objectStore('oTravel').add(curRec);
                break;
            case 'update':
                if(! (traveler || destination || transportation)) break;
                curRec = { traveler: traveler, destination: destination, transportation: transportation,
                    ciTraveler: traveler.toLowerCase() };
                var objectStore = db.transaction("oTravel", IDBTransaction.READ_WRITE).objectStore("oTravel");
                objectStore.delete(key).onsuccess = function(event) {
                    objectStore.add(curRec);
                };
                break;
            }
            resetTravelForm();
            dispResults();
        }

        // update the edited row
        function editGo(id) {
            db.transaction("oTravel").objectStore("oTravel").get(id).onsuccess = function(event) {
                rec = event.target.result;
                if(rec) {
                    var f = element('travelForm');
                    f.elements['traveler'].value = rec.traveler;
                    f.elements['destination'].value = rec.destination;
                    f.elements['transportation'].value = rec.transportation;
                    f.elements['goButton'].value = 'Update';
                    f.elements['inputAction'].value = 'update';
                    f.elements['key'].value = rec.id;
                    f.elements['traveler'].focus();
                    f.elements['traveler'].select();
                }
            }
        }

        // confirm and delete a row
        function deleteGo(id, traveler) {
            if(confirm('Delete ' + traveler + ' (ID: ' + id + ')?')) {
                db.transaction("oTravel", IDBTransaction.READ_WRITE).objectStore("oTravel").delete(id);
                resetTravelForm();
                dispResults();
            }
        }

        // clear all the form fields and reset the button and action elements
        function resetTravelForm() {
            var f = element('travelForm');
            for( var n in [ 'traveler', 'destination', 'transportation', 'key' ] ) {
                f.elements[n].value = '';
            }
            f.elements['inputAction'].value = 'add';
            f.elements['goButton'].value = 'Add';
        }

        // delete all the recs in the store
        function clearDB() {
            if(confirm('Clear the entire table?')) {
                db.transaction("oTravel", IDBTransaction.READ_WRITE).objectStore("oTravel").clear();
                resetTravelForm();
                dispResults();
            }
        }

        function initDisp() {
            dispResults();
        }

        window.onload = function() {
            initDisp();
        }
    </script>
</head>

<body>

<div id="content">

    <h1> 
        indexedDB storage example
    </h1>
    
    <div id="form">
        <form id="travelForm">
            <table class="form">
                <tr><td class="label"> Traveler </td><td> <input type="text" name="traveler" /> </td></tr>
                <tr><td class="label"> Destination </td><td> <input type="text" name="destination" /> </td></tr>
                <tr><td class="label"> Transportation </td><td> <input type="text" name="transportation" /> </td></tr>
                <tr><td colspan="2" class="button">
                    <input id="formSubmit" type="button" name="goButton" value="Add" onClick="javascript:dbGo()" />
                </td></tr>
            </table>
        <input id="inputAction" type="hidden" name="action" value="add" />
        <input id="inputKey" type="hidden" name="key" value="0" />
        </form>
    </div>
    
    <p id="rcp" class="message">
        There are <span id="rowCount">_</span> rows in the table.
        <input type="button" value="Empty" onClick="javascript:clearDB()" />
    </p>

    <div id="results">
    <!-- results show here -->
    </div>
    
</div>
</body>
</html>





Soloman
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html5离线缓存简单demo
09-13
该资源包含了一个使用html5使用离线缓存的简单demo，具体可以参考博客http://blog.csdn.net/mockingbirds/article/details/48412967
使用HTML5开发离线应用
01-31
Web2.0技术鼓励个人的参与，每个人都是Web内容的撰写者。如果Web应用能够提供离线的功能，让用户在没有网络的地方...HTML5离线功能中的离线资源缓存、在线状态检测、本地数据存储等内容，并举例说明了如何使用HTML5
HTML 5中的存储及离线应用（一）
「行到水穷处,坐看云起时」
08-21 1515
本系列来源于Lynda.Com.HTML5.Local.Storage.And.Offline.Applications.In.Depth，我仅做了整理的工作。 先来点知识点讲解，HTML 5提供了以下几种存储方式： Local Storage；Session Storage；Web SQL Storage；Indexed database（IndexedDB）； 前两种
HTML 5中的存储及离线应用（五）
「行到水穷处,坐看云起时」
08-22 1719
最后咱们再来看看离线应用： 离线应用需要有一个缓存的Manifest文件： 文件类型(MIME-type)是：text/cache-manifest，这份工作应该在web server上进行；文件以“CACHE MANIFEST”开头；文件中有如下节：CACHE，表示缓存的文件，这个是默认节，如果未指明节的情况下默认是CACHE；NETWORK，表示不能被缓存的文件；FALLB
关于HTML5中使用地理信息（二）
「行到水穷处,坐看云起时」
08-13 1537
之前已经给了一个小例子展现跟踪坐标信息，这里我们将分解动作： 显示浏览器是否支持（实际上是显示手机是否支持）： <!-- detecting.html by Bill Weinman created 2011-07-20 Copyright (c) 2011 The BearHeart Group, LLC This file
HTML5离线应用与客户端存储的实现
12-14
支持离线 Web 应用开发是 HTML5 的另...HTML5 及其相关的 API让开发离线应用成为现实。 离线检测 要知道设备是否在线还是离线，HTML5 定义了一个 navigator.onLine 属性，这个属性值为 true 表示设备能上网，值为 false
HTML5 离线应用之打造零请求、无流量网站的解决方法
09-28
今天Web应用程序已经很复杂了，以现在的发展，会将越来越复杂，但他有一个致命缺点，不能脱离internet链接，因此在HTML中新增了一API，它使用一个本地存储机制很好地解决了这个问题，为离线web应用铺平了道路
使用HTML5数据库和离线功能
03-03
有了离线功能和本地持久存储特性，您不管是在线还是离线状态都可以交付同样丰富的用户体验，这些体验以前只可在专用的桌面应用程序开发框架中获得。在本文中，您将了解如何利用HTML5的离线功能和本地持久存储特性。...
验证html5应用在线升级DEMO_new
06-20
离线应用DEMO，该示例代码介绍了HTML5的新特性离线应用的升级。
HTML5新特性之离线缓存技术
热门推荐
u013084331的博客
04-12 2万+
一、离线缓存的起因： HTML5之前的网页，都是无连接，必须联网才能访问，这其实也是web的特色，这其实对于PC是时代问题并不大，但到了移动互联网时代，设备终端位置不再固定， 依赖无线信号，网络的可靠性变得降低，比如坐在火车上，过了一个隧道（15分钟），便无法访问网站，这对于web的伤害很大。而离线web应用允许我们在脱机时与网站进行交互。 二、什么是离线Web应程序？为什么要开发离
前端HTML5几种存储方式的总结
weixin_33694172的博客
07-24 571
接下来要好好总结一些知识，秋招来啦。。。虽然有好多知识都不大会，但是还是要努力一下，运气这种东西，谁知道呢~ 总体情况 h5之前，存储主要是用cookies。cookies缺点有在请求头上带着数据，大小是4k之内。主Domain污染。 主要应用：购物车、客户登录 对于IE浏览器有UserData，大小是64k,只有IE浏览器支持。 目标 解决4k的大小问题 解决请求头常带存...
html5离线应用流程介绍 （含 apache2下部署的配置离线应用搭建实例）
weixin_30471561的博客
07-12 154
离线应用中浏览器与服务器的交互过程 Ø 首次访问 抓包结果： 和流程有点出入 Ø 再次访问如果服务器没有更新 返回304表示该文件没有改动 抓包结果： Ø 再次访问如果服务器有更新 抓包结果： 实例 搭建环境 Windowsxp+apache2+safari...
Android的webview支持HTML5的离线应用功能详细配置
林大夏的专栏
10-09 1405
Android的webview支持HTML5的离线应用功能详细配置
HTML的xmlns的作用
斜阳雨陌
07-26 5342
作用：由于xml允许定义自己的标记，但你定义的标记和其他人定义的标记有可能相同，但表示不同的含义。当文档交换或者共享的时候就容易产生错误。为避免这种错误产生，xml采用名字空间声明，允许你通过一个网址来识别你的标记。
浅谈HTML5离线存储
筱葭的博客
02-28 4188
在用户没有与因特网连接时，可以正常访问站点或应用；在用户与因特网连接时，更新用户机器上的缓存文件。 原理： HTML5的离线存储是基于一个新建的.appcache文件的缓存机制(不是存储技术)，通过这个文件上的解析清单离线存储资源，这些资源就会像cookie一样被存储了下来。之后当网络在处于离线状态下时，浏览器会通过被离线存储的数据进行页面展示。 如何使用： ①　页面头部像下面一样加入一个
神奇的HTML5离线存储（应用程序缓存）
weixin_30872671的博客
10-20 1360
声明：本文为原创文章，如需转载，请注明来源并保留原文链接前端小尚，谢谢！ 前言 使用 HTML5，通过创建 cache manifest 文件，可以轻松地创建 web 应用的离线版本。 HTML5引入了应用程序缓存，这意味着 web 应用可进行缓存，并可在没有因特网连接时进行访问。 应用程序缓存为应用带来三个优势： 离线浏览 - 用户可在应用离线时使用它们 速度 - 已缓存资源加载得更快 减...
HTML5离线存储原理及实现
htong521的博客
09-04 3315
使用 HTML5，通过创建 cache manifest 文件，可以轻松地创建 web 应用的离线版本。 HTML5引入了应用程序缓存，这意味着 web 应用可进行缓存，并可在没有因特网连接时进行访问。 应用程序缓存为应用带来三个优势： 离线浏览 – 用户可在应用离线时使用它们 速度 – 已缓存资源加载得更快 减少服务器负载 – 浏览器将只从服务器下载更新过或更改过的资源。 原理和环境 上...
HTML5的离线存储有几种方式？
weixin_30291791的博客
09-05 645
localStorage长期存储数据，浏览器关闭后数据不丢失； sessionStorage数据在浏览器关闭后自动删除。 转载于:https://www.cnblogs.com/luckyXcc/p/5843487.html
html5 离线存储
最新发布
10-19
HTML5的离线存储是一项强大的Web技术，它允许网页应用程序在离线状态下仍能够正常运行。通过离线存储，开发者可以将网页的资源（如HTML、CSS、JavaScript文件、图像等）缓存到用户的设备上，使得用户在没有网络连接的情况下仍然能够访问和使用应用程序。HTML5提供了一种称为离线储存(offline storage)的功能，它允许Web应用程序在浏览器离线时继续访问相关资源，以提高Web应用程序的性能和用户体验。离线储存是通过在客户端(浏览器)中缓存Web应用程序的数据和文件来实现的。一旦缓存，Web应用程序将像普通应用程序一样在离线状态下继续运行。离线存储的工作原理是将网页的资源缓存到用户的设备上，当用户在离线状态下访问该网页时，浏览器会从本地缓存中读取资源，而不是从服务器上获取。这样可以提高网页的加载速度，减少对服务器的请求，同时也可以提高用户的体验。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值