开发web app初探-HTML5本地存储

2020-03-24 17:11:29

字体：大中小

来源：转载

供稿：网友

html5带给我们的不仅仅是更多语义丰富的标签，还有更多更牛逼的特性，比如离线存储。对于台式电脑来说，或者它并没有带来什么惊喜，但是对于移动设备来说离线存储简直就是一个神迹。对于任何拥有支持离线存储浏览器的移动设备，比如iphone，ipod touch，离线存储使得web前端工程师可以很容易的针对它们开发应用程序。前面吹嘘了一段，不过说实在的，html5本地存储就目前来说还是很受限的。其一，浏览器限制，目前只有 Safari 3.1 and later, and in iPhone OS 2.0 and later. 提供了javascript database 原生支持，不过也有 Taffy DB 可以曲线救国。(还没有用过，不敢妄下结论。)。其二，服务器端需要修改配置，旦如果是自己的服务器就很简单了。下面就以一个简单的offline web app－note book 为例，记录一下为iphone/ipod touch开发web app的过程。不是经验，只是初探。建立适合 iphone/ipod touch 的UI 数据的本地存储文件的本地存储完善这个app (不打算完善它了，有时间做一个实用的app专门介绍 iphone web app 的开发吧)首先，适合iphone/ipod touch 的UI 它并不是本文的重点，有兴趣的同学可以移步这里。这里只强调一点：你默认做的页面，放到iphone看会变的很窄，字很小。这是因为iphone用它320px宽的屏幕显示了一个默认980px宽的页面，你的内容被按比例缩小了。要解决这个问题很简单，只要在html的head区域加一个meta标记，具体语法请看这里。也就是这样：这个问题解决之后我们就可以肆意的使用html5和css3来打造界面了，（针对设备开发可以不考虑兼容性，真是畅快淋漓呀。）我大概做了个丑陋的界面：html代码， CSS代码 (其实你可以不用看，最后有打包的代码)完成了UI，我们就需要对数据进行处理了。在开始数据的本地存储之前，我们先来了解一下client-side database storage API:the client-side database storage API allows web applications to store structured data locally using a medium many web developers are already familiar with SQL.－－webkit blog目前只有webkit核心的浏览器支持这一特性。你甚至都不能在w3c的html5工作草案中找到（cs-db）client-side database 的详细描述。首先我们要尝试建立一个数据库链接：try { if(!window.openDatabase){ //检测浏览器是否支持cs-db alert('not supported cs-db!'); } else { var shortName = 'noteDB'; var version = '1.0'; var displayName = 'Note book database'; var maxSize = 65536; //创建一个数据库 var db = openDatabase(shortName,version,displayName,maxSize);} catch(e){ //尝试捕获错误 if (e == 2){ alert('Invalid database version.'); } else { alert( Unknown error +e+ . }如果以上代码无误，你就会在safair或者chrome的开发者工具中看到这个数据库：在右侧区域可以直接执行一些sql查询，但是我总是得到发生意外错误 0 。这样的结果，不知道是不是RP的问题。接下来就是创建表，以及执行一些sql语句进行增删改查。js执行sql的基本语法大致是这样的：db.transaction( function (transaction){ transaction.executeSql(sqlquery,[],dataHandler, errorHandler););其中transaction.executeSql中参数依次为：sql查询字符串，传递给sql查询的参数，数据处理句柄，错误处理句柄。其中只有第一项为必选，其余都为可选项。第二个参数的用法大致是这样的：transaction.executeSql( UPDATE people set age=? where name=?; ,[ age, name ]);查询字符串中的？会被后面数组中的变量依次替换。注意：以上我用了大致这个词，因为没有官方的文档（W3C-web database），只是从一些其它文献以及自己判断得来，若有错误还请指正。下面我们创建一张用来存储note的表：db.transaction( function (transaction){ transaction.executeSql( 'CREATE TABLE IF NOT EXISTS notes (id INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT,titel TEXT, note TEXT NOT NULL, date DATE);',errorHandler););errorHandler是这样的：function errorHandler(transaction, error){ alert('Error was: '+ error.message +'(Code:'+ error.code +')'); var fatal_error = true; if(fatal_error){ return true; return false;}error.message 是一段错误描述，error.code 是错误代码 (详情)再看看如果从db中检索出数据并显示到页面上：db.transaction( function (transaction){ transaction.executeSql( SELECT * from notes; ,[],dataHandler, errorHandler);function dataHandler(transaction, results){ var string = for (var i = 0; i + row['titel'] +
}可以看出，基本上和php之类后端语言操作大同小异。
更多代码可查看示例程序，不再一一罗列。完成了数据的本地存储，就要将文件存储也搞定。为了实现文件的本地存储，html5搞了一个叫 manifest 的文件，这个文件就是一个缓存清单，把需要缓存在客户端的文件告诉浏览器。manifest是一个mimetype为 text/cache-manifest 的纯文本文件。注意，这点很重要。下面是一个manifest文件的例子：NETWORK, CACHE, FALLBACK 都是可选的。manifest文件必须以 CACHE MANIFEST 开头其后需要下载并缓存的文件使用相对或绝对路径皆可，每个资源一行。NETWORK段表明一些在线资源所在的域，所有这个域下的资源都不会被缓存，即使客户端处于离线状态，也会尝试去请求基于这些域的资源。CACHE段还不是很明白FALLBACK段下面每行都包含两部分内容，用空格分隔。后半部分是当前半部分路径不能访问时的备选路径（很拗），如上图就是，如果demoimages目录不能访问时，尝试访问images目录。manifest文件介绍就到这里，下面创建我们自己的manifest文件：我们只需要缓存两个文件即可，nbStyle.css 和 nbScript.js。还有index.html 本身，由于manifest文件会默认缓存引用自己的文件，所以index.html 不能在缓存列表中写出来：CACHE MANIFEST# version: 2010-01-20 22:30nbStyle.cssnbScript.js就是这么简单了，我们将他保存为 notebook.manifest 文件，并和其它文件一起放在根目录。最后一个问题，如果将notebook.manifest的mimetype标识为 text/cache-manifest 类型呢？我知道有两种方法：1. 在站点根目录建立 .htaccess 文件，在其中声明.manifest 的mimetype ，这个需要修改下服务器的配置文件，我没有尝试成功。2. php环境在apache目录寻找一个为 mime.types 的配置文件，在其最后添加一行：text/cache-manifest manifest然后在index.html文件引用它：

搞定了这些东西，你就可以尝试用webkit访问你的应用，然后离线，再尝试使用它，程序应该也可以照常运行。至此，html5的离线存储基本介绍完了，下面附上打包的代码，代码本身没有什么难度，只是我写的太烂了:代码下载其实还远没有完，缓存下来的文件如果被更新了怎么办呢？如何通知客户端更新缓存其实也有api，慢慢的再探索吧。非常期待与大家探讨html5相关的问题。html教程

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

上一篇：HTML 网页头部代码全清楚

下一篇：HTML中id和class属性之间的区别是什么？