HTML学习笔记二

最新推荐文章于 2024-11-01 07:00:00 发布

追风少年zgxy

最新推荐文章于 2024-11-01 07:00:00 发布

阅读量145

点赞数

本文链接：https://blog.youkuaiyun.com/zgxy666/article/details/73478446

版权

1、什么是 HTML5 Web 存储?

使用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 事件指的是网页自动获取来自服务器的更新。

以前也可能做到这一点，前提是网页不得不询问是否有可用的更新。通过服务器发送事件，更新能够自动到达。