使用HTML5可以在本地存储用户的浏览数据。早些时候,本地存储使用的是cookie。但是Web 存储需要更加的安全与快速. 这些数据不会被保存在服务器上,但是这些数据只用于用户请求网站数据上.它也可以存储大量的数据,而不影响网站的性能.
数据以 键/值 对存在, web网页的数据只允许该网页访问使用。
2、localStorage 和sessionStorage
localStorage - 没有时间限制的数据存储
sessionStorage - 针对一个 session 的数据存储
不管是 localStorage,还是 sessionStorage,可使用的API都相同,常用的有如下几个(以localStorage为例):
保存数据:localStorage.setItem(key,value);
读取数据:localStorage.getItem(key);
删除单个数据:localStorage.removeItem(key);
删除所有数据:localStorage.clear();
得到某个索引的key:localStorage.key(index);
3、HTML5 Web SQL 数据库
Web SQL 数据库 API 并不是 HTML5 规范的一部分,但是它是一个独立的规范,引入了一组使用 SQL 操作客户端数据库的 APIs。
以下是规范中定义的三个核心方法:
openDatabase:这个方法使用现有的数据库或者新建的数据库创建一个数据库对象。
var db = openDatabase('mydb', '1.0','Test DB', 2 * 1024 * 1024);
openDatabase() 方法对应的五个参数说明:数据库名称、版本号、描述文本、数据库大小、创建回调。
transaction:这个方法让我们能够控制一个事务,以及基于这种情况执行提交或者回滚。
执行操作使用 database.transaction() 函数:
var db = openDatabase('mydb', '1.0','Test DB', 2 * 1024 * 1024); db.transaction(function (tx) {tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)'); });
executeSql:这个方法用于执行实际的 SQL 查询。
在执行上面的创建表语句后,可以插入一些数据:
var db = openDatabase('mydb', '1.0','Test DB', 2 * 1024 * 1024);
db.transaction(function (tx)
{ tx.executeSql('CREATE TABLE IF NOTEXISTS LOGS (id unique, log)');
tx.executeSql('INSERT INTO LOGS (id,log) VALUES (1, "菜鸟教程")');
tx.executeSql('INSERT INTO LOGS (id,log) VALUES (2, "www.runoob.com")'); });
4、什么是应用程序缓存(Application Cache)?
HTML5 引入了应用程序缓存,这意味着 web 应用可进行缓存,并可在没有因特网连接时进行访问。manifest 文件需要配置正确的 MIME-type,即 "text/cache-manifest"。必须在 web 服务器上进行配置。manifest 文件是简单的文本文件,它告知浏览器被缓存的内容(以及不缓存的内容)。
manifest 文件可分为三个部分:
CACHEMANIFEST - 在此标题下列出的文件将在首次下载后进行缓存
NETWORK - 在此标题下列出的文件需要与服务器的连接,且不会被缓存
FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面(比如 404 页面)
一个完整的 Manifest 文件,CACHEMANIFEST,是必需的
CACHE MANIFEST //无论用户何时与因特网断开连接,这些资源依然是可用的
# 2012-02-21 v1.0.0
/theme.css
/logo.gif
/main.js
NETWORK:
login.php
FALLBACK:
/html/ /offline.html
5、什么是 Web Worker?
当在 HTML 页面中执行脚本时,页面的状态是不可响应的,直到脚本已完成。web worker 是运行在后台的 JavaScript,独立于其他脚本,不会影响页面的性能。您可以继续做任何愿意做的事情:点击、选取内容等等,而此时 web worker 在后台运行。由于 web worker 位于外部文件中,它们无法访问下例 JavaScript 对象:window 对象、document 对象、parent 对象
6、Server-Sent 事件 -单向消息传递
Server-Sent 事件指的是网页自动获取来自服务器的更新。
以前也可能做到这一点,前提是网页不得不询问是否有可用的更新。通过服务器发送事件,更新能够自动到达。