今回は、H5 オフライン アプリケーションとクライアント ストレージの使用について詳しく説明します。H5 オフライン アプリケーションとクライアント ストレージを使用する際の 注意事項 は何ですか?実際の事例を見てみましょう。
オフライン Web アプリケーション開発のサポートは、HTML5 のもう 1 つの焦点です。いわゆるオフライン Web アプリケーションは、デバイスがインターネットにアクセスできない場合でも実行できるアプリケーションです。
オフライン Web アプリケーションの開発には、いくつかの手順が必要です。 1 つ目は、次に正しいアクションを実行できるように、デバイスがインターネットにアクセスできるかどうかをアプリが認識していることを確認することです。次に、アプリケーションが適切に動作するには、特定のリソース (画像、
Javascript、CSS など) にもアクセスできる必要があります。最も良いのは、ユーザーがデータを保存するためのローカル領域が必要であり、インターネットにアクセスできるかどうかに関係なく、読み取りと書き込みが妨げられないことです。
HTML5 とその関連 API により、オフライン アプリケーションの開発が現実になります。
オフライン検出
デバイスがオンラインかオフラインかを知るために、HTML5 は navigator.onLine 属性を定義します。値が true の場合はデバイスがインターネットにアクセスできることを示し、値が false の場合はデバイスがインターネットにアクセスできることを示します。オフラインです。
if (navigator.onLine) {
// 正常工作
} else {
// 执行离线状态时的任务
}ログイン後にコピー
navigator.onLine との特定の互換性の問題のため、ネットワークが利用可能かどうかをより適切に判断するために、HTML5 では navigator.onLine 属性に加えて、オンラインとオフラインの 2 つのイベントも定義されています。
これら 2 つのイベントは、ネットワークがオフラインとオンラインの間で切り替わるときに、ウィンドウ オブジェクトでトリガーされます:
window.addEventListener('online', function() {
// 正常工作
});
window.addEventListener('offline', function() {
// 执行离线状态时的任务
});ログイン後にコピー
実際のアプリケーションでは、ページがロードされた後に navigator.onLine を通じて初期状態を取得するのが最善です。次に、上記 2 つのイベントを使用して、ネットワーク接続ステータスが変化したかどうかを判断します。上記のイベントがトリガーされると、navigator.onLine プロパティの値も変更されますが、ネットワーク ステータスの変化を検出するには、このプロパティを手動でポーリングする必要があります。
アプリケーション キャッシュ
HTML5 のアプリケーション キャッシュ (略して appcache) は、オフライン Web アプリケーションの開発用に特別に設計されています。 Appcache は、ブラウザのキャッシュから分離されたキャッシュ領域です。このキャッシュにデータを保存するには、ダウンロードしてキャッシュするリソースをリストしたマニフェスト ファイルを使用できます。説明ファイルの例:
CACHE MANIFEST
# Comment
file.js
file.css
ログイン後にコピー
HTML で参照される:
<html manifest="./xxx.manifest">
ログイン後にコピー
xxx.manifest ファイルの MIME タイプは text/cache-manifest である必要があります。
この API の中核は applicationCache オブジェクトです。このオブジェクトには status 属性があり、アプリケーション キャッシュの次の現在のステータスを示します。
- 0: キャッシュなし。ページに関連するアプリケーション キャッシュはありません
1 -
4: 更新が完了しました。つまり、アプリケーション キャッシュがリソースを更新し、すべてのリソースがダウンロードされ、swapCache() を通じて使用できるようになります
- 5: 放棄されました。つまり、アプリケーション キャッシュの記述ファイルが存在しなくなったので、ページはアプリケーション キャッシュにアクセスできなくなりました
-
関連イベント:
-
チェック: ブラウザが更新を探すときにトリガーされますアプリケーションキャッシュの場合
-
error: 更新のチェック中またはリソースのダウンロード中にエラーが発生したときにトリガーされます
noupdate: 説明ファイルをチェックし、ファイルに変更がないことが判明したときにトリガーされます
-
downloading: 次のときにトリガーされますアプリケーション キャッシュ リソースのダウンロードを開始します
-
progress:
ファイル ダウンロード- アプリケーション キャッシュのプロセス中に継続的にトリガーされます。
- updateready: ページの新しいアプリケーション キャッシュがダウンロードされ、swapCache() を通じて使用できるようになったときにトリガーされます。
- cached: アプリケーション キャッシュが完全に利用可能になったときにトリガーされます
一般的に、これらのイベントはページの読み込み時にトリガーされます。上記のシーケンスは順番にトリガーされます。上記のイベントは、update() メソッドを呼び出して手動でトリガーすることもできます。
-
データストレージ
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 包括：
名称： 一个唯一确定 cookie 的名称。必须被 URL 编码。
值： 存储在 cookie 中的字符串值。必须被 URL 编码。
域： cookie 对于哪个域是有效的。
路径： 对于指定域中的那个路径，应该向服务器发送 cookie。
失效时间： 表示 cookie 何时应该被删除的时间戳。
安全标志： 指定后，cookie 只有在使用 SSL 连接的时候才发送到服务器。
复制代码
代码如下:
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);
}
};ログイン後にコピー
使用方法：
// 设置 cookie
CookieUtil.set('name', 'lai');
CookieUtil.set('sex', 'man');
// 读取 cookie
CookieUtil.get('name'); // 'lai'
CookieUtil.get('sex'); // 'man'
// 删除 cookie
CookieUtil.unset('name');
CookieUtil.unset('sex');
// 设置 cookie，包括它的路径、域、失效日期
CookieUtil.set('name', 'lai', '/', 'www.laixiangran.cn', new Date());ログイン後にコピー
大小限制
Web Storage
Web Storage 主要定义了两种对象：sessionStorage 和 localStorage，是 Storage 对象的实例，这两个对象区别如下：
Storage 类型有如下方法：
clear()： 删除所有值。
getItem(name)： 根据指定的名字 name 获取对应的值。
key(index)： 获取 index 位置处的值的名字。
removeItem(name)： 删除由 name 指定的键值对。
setItem(name, value)： 为指定的 name 设置一个对应的值，值为字符串。
对 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);
};
}
}ログイン後にコピー
限制
和 Web Storage类似，只能由同源（相同协议、域名和端口）页面操作，因此不能跨域共享信息。
Firefox 大小上限为 50M，移动端的 Firefox 大小上限为 5M，不允许本地文件访问。
Chrome 大小上限为 5M，允许本地文件访问。
相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
webpack打包压缩js与css步骤详解
加载移除js与css文件步骤详解
以上がH5 オフライン アプリケーションとクライアント ストレージの使用状況の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
