H5 오프라인 애플리케이션 및 클라이언트 스토리지 사용량에 대한 자세한 설명-HTML 튜토리얼-php.cn

이번에는 H5 오프라인 애플리케이션 및 클라이언트 스토리지 사용에 대한 자세한 설명을 가져왔습니다. H5 오프라인 애플리케이션 및 클라이언트 스토리지 사용 시 주의사항은 무엇인가요?

오프라인 웹 애플리케이션 개발 지원은 HTML5의 또 다른 초점입니다. 소위 오프라인 웹 애플리케이션은 장치가 인터넷에 접속할 수 없는 경우에도 계속 실행할 수 있는 애플리케이션입니다.

오프라인 웹 애플리케이션을 개발하려면 여러 단계가 필요합니다. 첫 번째는 기기가 인터넷에 액세스할 수 있는지 여부를 앱이 인식하여 다음에 올바른 조치를 취할 수 있도록 하는 것입니다. 그런 다음 애플리케이션이 제대로 작동하려면 특정 리소스(이미지, Javascript, CSS 등)에도 액세스할 수 있어야 합니다. 무엇보다 사용자가 데이터를 저장할 수 있는 로컬 공간이 있어야 하며, 인터넷 접속 여부에 관계없이 읽고 쓰는 데 방해가 되지 않습니다.

HTML5 및 관련 API를 사용하면 오프라인 애플리케이션 개발이 현실이 됩니다.

오프라인 감지

기기가 온라인인지 오프라인인지 확인하기 위해 HTML5는 navigator.onLine 속성을 정의합니다. true 값은 기기가 인터넷에 액세스할 수 있음을 나타내고 false 값은 기기가 인터넷에 액세스할 수 있음을 나타냅니다. 오프라인 상태입니다.

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

로그인 후 복사

navigator.onLine의 특정 호환성 문제로 인해 navigator.onLine 속성 외에도 네트워크 사용 가능 여부를 더 잘 판단하기 위해 HTML5에서는 온라인과 오프라인의 두 가지 이벤트도 정의합니다.

이 두 이벤트는 네트워크가 오프라인과 온라인 사이를 전환할 때 창 개체에서 트리거됩니다.

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

로그인 후 복사

실제 응용 프로그램에서는 페이지가 로드된 후 navigator.onLine을 통해 초기 상태를 얻는 것이 가장 좋습니다. 그런 다음 위의 두 이벤트를 사용하여 네트워크 연결 상태가 변경되는지 확인합니다. 위 이벤트가 발생하면 navigator.onLine 속성 값도 변경되지만, 네트워크 상태 변화를 감지하려면 이 속성을 수동으로 폴링해야 합니다.

애플리케이션 캐시

HTML5의 애플리케이션 캐시, 줄여서 appcache는 오프라인 웹 애플리케이션 개발을 위해 특별히 설계되었습니다. Appcache는 브라우저의 캐시와 분리된 캐시 영역입니다. 이 캐시에 데이터를 저장하려면 다운로드하고 캐시할 리소스를 나열하는 매니페스트 파일을 사용하세요. 설명 파일 예:

CACHE MANIFEST
# Comment
file.js
file.css

로그인 후 복사

HTML에서 참조:

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

로그인 후 복사

xxx.manifest 파일의 MIME 유형은 text/cache-manifest여야 합니다.

이 API의 핵심은 applicationCache 개체입니다. 이 개체에는 상태 속성이 있으며, 이 속성의 값은 다음과 같은 애플리케이션 캐시 상태를 나타내는 상수입니다.

0: 캐시 없음. 페이지와 관련된 애플리케이션 캐시가 없습니다
1

파일 다운로드
애플리케이션 캐시
updateready: 페이지의 새 애플리케이션 캐시가 다운로드되고 swapCache()를 통해 사용할 수 있을 때 트리거됨
cached: 애플리케이션 캐시를 완전히 사용할 수 있을 때 트리거됩니다.

쿠키

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

로그인 후 복사

大小限制

每个域的 cookie 总数是有限，不同浏览器之间所有不同，IE6 以下是最多 20 个，IE7 以上最多 50 个，Firefox最多 50 个，Opera 最多 30 个，Safari 和 Chrome 不限制。
cookie 的尺寸也有限制，大多数浏览器有大约 4096B。

Web Storage

Web Storage 的目的是克服由 cookie 带来的一些限制，当数据需要被严格控制在客户端上时，无须持续地将数据发回服务器。Web Storage 的两个主要目标是：
提供一种在 cookie 之外存储会话数据的路径。
提供一种存储大量可以跨会话存在的数据的机制。

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

sessionStorage：存储特定于某个会话的数据，也就是该数据只保持到浏览器关闭。存储数据大小大多数限制在 2.5M，少数浏览器限制在 5M 或者不限制。
localStorage：数据保存到通过 JavaScript 删除或者是用户清除浏览器缓存。存储数据大小大多数限制在 5M，少数浏览器限制在 2.5M 或者不限制。

Storage 类型有如下方法：

clear()：删除所有值。
getItem(name)：根据指定的名字 name 获取对应的值。
key(index)：获取 index 位置处的值的名字。
removeItem(name)：删除由 name 指定的键值对。
setItem(name, value)：为指定的 name 设置一个对应的值，值为字符串。

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

domain：发生变化的存储空间的域名。
key：设置或者删除的键名。
newValue：如果是设置值，则是新值；如果是删除键，则是null。
oldValue：键被更改之前的值。

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

로그인 후 복사

限制