HTML5离线应用与客户端存储的实现

源码坊 · 发表于 2021-5-3 00:34:20

支持离线 Web 应用开发是 HTML5 的另一个重点。所谓离线 Web 应用，就是在设备不能上网的情况下依旧可以运行的应用。
开发离线Web 应用需要几个步骤。首先是确保应用知道设备是否能上网，以便下一步执行正确的操作。然后，应用还必须能访问一定的资源（图像、Javascript、CSS等），只有这样才能正常工作。最好，必须有一块本地空间用户保存数据，无论能否上网都不妨碍读写。
HTML5 及其相关的 API让开发离线应用成为现实。
离线检测
要知道设备是否在线还是离线，HTML5 定义了一个 navigator.onLine 属性，这个属性值为 true 表示设备能上网，值为 false 表示设备离线。

if (navigator.onLine) { // 正常工作} else { // 执行离线状态时的任务}

复制代码

由于 navigator.onLine 存在一定的兼容性问题，因此除了 navigator.onLine 属性之外，为了更好地确定网络是否可用，HTML5 还定义了两个事件 online 和 offline。
当网络在离线和在线之间切换时在 window 对象上触发这两个事件：

window.addEventListener('online', function() { // 正常工作});window.addEventListener('offline', function() { // 执行离线状态时的任务});

复制代码

在实际应用中，最好在页面加载后，最好先通过 navigator.onLine 取得初始的状态。然后通过上述两个事件来确定网络连接状态是否变化。当上述事件触发时，navigator.onLine 属性的值也会改变，不过必须要手工轮询这个属性才能检测到网络状态的变化。
应用缓存
HTML5 的应用缓存（application cache），或者简称为 appcache，是专门为开发离线 Web 应用而设计的。Appcache 就是从浏览器的缓存中分出来的一块缓存区。要想在这个缓存中保存数据，可以使用一个描述文件（manifest file），列出要下载和缓存的资源。描述文件示例：

CACHE MANIFEST# Commentfile.jsfile.css

复制代码

然后在 html 中引用：

<html manifest="./xxx.manifest">

复制代码

xxx.manifest 文件的 MIME 类型必须是 text/cache-manifest。
该 API 的核心是 applicationCache 对象，这个对象有一个 status 属性，属性的值是常量，表示应用缓存的如下当前状态：

相关事件：

一般来讲，这些事件会随着页面加载按上述顺序依次触发。也可以通过调用 update() 方法手动触发上述事件。
数据存储
Cookie
HTTP Cookie，通常直接叫做 cookie，是在客户端用于存储会话信息的。该标准要求服务器对任意 HTTP 请求发送 Set-Cookie HTTP 头信息作为响应的一部分，其中包含会话信息。服务器响应头示例：

HTTP/1.1 200 OK
Content-type: text/html
Set-Cookie: name=value
Other-header: other-header-value

然后浏览器 Set-Cookie 的会话信息，之后为每个请求添加 Cookie HTTP 头将信息发送回服务器，如下所示：

GET /index.html HTTP/1.1
Cookie: name=value
Other-header: other-header-value

发送回服务器的额外信息可以用于唯一验证客户来自于发送的哪个请求。
完整的 cookie 包括：

复制代码代码如下:Set-Cookie：name=value; domain=www.laixiangran.cn; path=/; expires=Mon, 29 Oct 2018 03:53:10 GMT; secure;
基本用法
在 JavaScript 中操作 cookie 有些复杂，这是因为 document.cookie 属性在不同的使用方式中表现出不同的行为。
当用来获取属性值时，document.cookie 返回当前页面可用的所有 cookie 字符串，一系列由分号隔开的键值对，如下所示：

document.cookie// name1=value1;name2=value2;name3=value3;

复制代码

当用来设置值时，document.cookie 属性会设置一个新的 cookie 字符串添加到现有的 cookie 集合中，并不会像普通对象设置属性一样覆盖原 cookie 的值，除非设置的 cookie 的名称已经存在，如下所示：

// cookie 的名称不存在document.cookie = 'name4=value4'// name1=value1;name2=value2;name3=value3;name4=value4;// 而不是 name4=value4;// cookie 的名称存在document.cookie = 'name3=value4'// name1=value1;name2=value2;name3=value4;

复制代码

从上面的代码我们可以看出，我们要读取或者修改或者删除指定 cookie 的值都不是很直观方便，因此我们可以封装一些方法，方便我们对 cookie 的操作：

var CookieUtil = { get: function (name) { var cookieName = encodeURIComponent(name) + "=", cookieStart = document.cookie.indexOf(cookieName), cookieValue = null, cookieEnd; if (cookieStart > -1) { cookieEnd = document.cookie.indexOf(";", cookieStart); if (cookieEnd == -1) { cookieEnd = document.cookie.length; } cookieValue = decodeURIComponent(document.cookie.substring(cookieStart + cookieName.length, cookieEnd)); } return cookieValue; }, set: function (name, value, expires, path, domain, secure) { var cookieText = encodeURIComponent(name) + "=" + encodeURIComponent(value); if (expires instanceof Date) { cookieText += "; expires=" + expires.toGMTString(); } if (path) { cookieText += "; path=" + path; } if (domain) { cookieText += "; domain=" + domain; } if (secure) { cookieText += "; secure"; } document.cookie = cookieText; }, unset: function (name, path, domain, secure) { this.set(name, "", new Date(0), path, domain, secure); }};

复制代码

使用方法：

// 设置 cookieCookieUtil.set('name', 'lai');CookieUtil.set('sex', 'man');// 读取 cookieCookieUtil.get('name'); // 'lai'CookieUtil.get('sex'); // 'man'// 删除 cookieCookieUtil.unset('name');CookieUtil.unset('sex');// 设置 cookie，包括它的路径、域、失效日期CookieUtil.set('name', 'lai', '/', 'www.laixiangran.cn', new Date());

复制代码

大小限制

Web Storage

Web Storage 主要定义了两种对象：sessionStorage 和 localStorage，是 Storage 对象的实例，这两个对象区别如下：

Storage 类型有如下方法：

对 sessionStorage 和 localStorage 进行操作都会触发 storage 事件，该事件对象有以下属性：

IndexedDB
Indexed Database API，简称为 IndexedDB，是在浏览器中保存结构化数据的一种数据库。其思想是创建一套 API，方便保存和读取 JavaScript 对象，同时还支持查询和搜索。
IndexedDB 设计的操作完全是异步进行的。因此，大多数操作会以请求方式进行。
基本用法

var indexedDB = window.indexedDB || window.msIndexedDB || window.mozIndexedDB || window.webkitIndexedDB, // 获取 indexedDB request, store, database, users = [ { username: "007", firstName: "James", lastName: "Bond", password: "foo" }, { username: "ace", firstName: "John", lastName: "Smith", password: "bar" } ];// 打开数据库request = indexedDB.open("example");// 注册 onerror 及 onsuccess 事件request.onerror = function (event) { alert("Something bad happened while trying to open: " + event.target.errorCode);};request.onsuccess = function (event) { database = event.target.result; // 操作数据库 initializeDatabase();};function initializeDatabase() { if (database.version != "1.0") { // 设置数据库版本号 request = database.setVersion("1.0"); request.onerror = function (event) { alert("Something bad happened while trying to set version: " + event.target.errorCode); }; request.onsuccess = function (event) { // 使用 users 创建对象存储空间 store = database.createObjectStore("users", {keyPath: "username"}); var i = 0, len = users.length; while (i < len) { // 插入新值 store.add(users[i++]); } alert("Database initialized for first time. Database name: " + database.name + ", Version: " + database.version); }; } else { alert("Database already initialized. Database name: " + database.name + ", Version: " + database.version); // transaction() 创建事务，objectStore() 将存储空间传入事务 request = database.transaction("users").objectStore("users").get("007"); request.onsuccess = function (event) { alert(event.target.result.firstName); }; }}

复制代码

限制

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持模板人源码语。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！模板人源码·版权声明

本网站所收集的部分公开资料来源于互联网，转载的目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。本站部分作品是由网友自主投稿和发布、编辑整理上传，对此类作品本站仅提供交流平台，不为其版权负责。如果您发现网站上有侵犯您的知识产权的作品，请与我们取得联系，我们会及时修改或删除。
本网站所提供的信息，只供参考之用学习交流，切勿用作非法用途。本网站不保证信息的准确性、有效性、及时性和完整性。本网站及其雇员一概毋须以任何方式就任何信息传递或传送的失误、不准确或错误，对用户或任何其他人士负任何直接或间接责任。在法律允许的范围内，本网站在此声明，不承担用户或任何人士就使用或未能使用本网站所提供的信息或任何链接所引致的任何直接、间接、附带、从属、特殊、惩罚性或惩戒性的损害赔偿。唯一网址: https://www.mubanren.com/thread-288-1-1.html

斗罗大陆带比比东宁荣荣+全新称号暗器等

HTML5离线应用与客户端存储的实现

相关帖子

最佳新人

活跃会员

热心会员

推广达人

宣传达人

灌水之王

突出贡献

优秀版主

荣誉管理

论坛元老

高级资源

游戏源码

游戏素材

VIP专区