您的位置：首页 > 数据库

HTML5本地、离线、缓存、存储、数据库、文件

2014-10-05 17:49 363 查看

ApplicationCache（[b]应用缓存、本地缓存、离线缓存、离线存储）[/b]
应用可以向浏览器指定需要缓存的文件，使得离线时可以使用这些文件，在线时也不会重新请求这些文件。

一、定义manifest 文件

manifest 文件（缓存清单）是简单的文本文件，它告知浏览器被缓存的内容以及不缓存的内容。

manifest 文件可分为四个部分：

1、CACHE MANIFEST，指定需要缓存的资源

CACHE MANIFEST

/theme.css

/logo.gif

/main.js

2、NETWORK，指定不缓存的文件，可以用星号来表示其他所有资源

NETWORK:

login.asp

NETWORK:

*

3、FALLBACK，指定如果无法建立因特网连接，则用 "offline.html" 替代 /html5/ 目录中的所有文件

FALLBACK:

/html5/ /404.html

4、注释，以#号开头的行

二、使用manifest 文件

<html manifest="demo.appcache">，demo.appcache为manifest 文件，其MIME-type需要配置为"text/cache-manifest"。

三、更新manifest 文件

缓存清单上的文件一旦被缓存，浏览器会持续使用已缓存的版本，即使服务器上的对应的文件已经修改。为了让浏览器更新缓存，需要更新 manifest 文件，如修改一行注释。

Web Storage（[b]Web 存储、DOM存储）[/b]
一、localStorage（本地存储）
本地存储类似于cookie，也是键值对。window.localStorage是全局对象，改变localStorage对象的内容，即改变了本地存储的内容。本地存储除非清空，否则永久有效。
保存数据：localStorage.key="value"; 或localStorage.setItem(key,value);

读取数据：localStorage.key
或localStorage.getItem(key);

删除单个数据：localStorage.removeItem(key);

删除所有数据：localStorage.clear();

二、sessionStorage（会话存储）

会话存储也是键值对。window.sessionStorage是全局对象，改变sessionStorage对象的内容，即改变了会话存储的内容。用户关闭浏览器窗口后，数据会被删除。对数据的操作和本地存储一样。
本地数据库
一、Web SQL Database
本地的SQL数据库。

二、IndexedDB
本地的NoSQL数据库。
本地文件
一、File API
操作用户选中或拖入的文件，参考
https://developer.mozilla.org/zh-CN/docs/Using_files_from_web_applications 二、File System API
操作本地文件系统

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航