html5学习笔记3——高级特性
一：Web存储
数据以 键/值 对存在, web网页的数据只允许该网页访问使用。
web存储有两种；
- localStorage - 没有时间限制的数据存储，存于浏览器缓存
- sessionStorage - 针对一个 session 的数据存储，绘画关闭就清理
if(typeof(Storage)!=="undefined")//检查是否支持web存储
{
// Yes! localStorage and sessionStorage support!
localStorage.key = value //创建内容
localStorage.key //获取内容
sessionStorage.key = value //创建内容
sessionStorage.key //获取内容 }
else
{
// Sorry! No web storage support..
}
二：Web应用缓存
HTML5 引入了应用程序缓存，这意味着 web 应用可进行缓存，并可在没有因特网连接时进行访问。
应用程序缓存为应用带来三个优势：
- 离线浏览 - 用户可在应用离线时使用它们
- 速度 - 已缓存资源加载得更快
- 减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。
1:启用 应用程序缓存
<!DOCTYPE HTML>
<html manifest="demo.appcache">
...
</html>
2: 编写manifest
manifest 文件是简单的文本文件：
- CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存
- NETWORK - 在此标题下列出的文件需要与服务器的连接，且不会被缓存
- FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面（比如 404 页面）
CACHE MANIFEST
# 2012-02-21 v1.0.0 注解
/theme.css
/logo.gif
/main.js NETWORK:
login.php FALLBACK:
/html/ /offline.html
3:注意
一旦文件被缓存，则浏览器会继续展示已缓存的版本，即使您修改了服务器上的文件。为了确保浏览器更新缓存，您需要更新 manifest 文件。
浏览器对缓存数据的容量限制可能不太一样（某些浏览器设置的限制是每个站点 5MB）
三：异步运行脚本
当在 HTML 页面中执行脚本时，页面的状态是不可响应的，直到脚本已完成。
web worker 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 在后台运行。
//一个js文件 var i=0; function timedCount()
{
i=i+1;
postMessage(i);
setTimeout("timedCount()",500);
} timedCount();
<script>
var w; function startWorker()
{
if(typeof(Worker)!=="undefined")//检查是否支持web worker
{
if(typeof(w)=="undefined")
{
w=new Worker("demo_workers.js"); //创建一个web worker，用一个需要后台运行的js文件作为初始化参数，并运行该文件
}
w.onmessage = function (event) {//监听worker的执行结果
document.getElementById("result").innerHTML=event.data;
};
}
else
{
document.getElementById("result").innerHTML="Sorry, your browser does not support Web Workers...";
}
} function stopWorker() //停止运行
{
w.terminate();
}
</script>
四：接受服务器推送
Server-Sent 事件指的是网页自动获取来自服务器的更新。
以前也可能做到这一点，前提是网页不得不询问是否有可用的更新。
而现在，通过服务器发送事件，更新能够自动到达，类似于移动App的推送一样。
EventSource 对象用于接收服务器发送事件通知：
if(typeof(EventSource)!=="undefined")
{
// Yes! Server-sent events support!
var source=new EventSource("接收更新的页面文件");
source.onmessage=function(event)
{
//每当有推送更新，则调用该事件。
}
else
{
// Sorry! No server-sent events support..
}
五：web sql
Html5数据库API是以一个独立规范形式出现，它包含三个核心方法：
1、openDatabase：这个方法使用现有数据库或创建新数据库创建数据库对象。
2、transaction：这个方法允许我们根据情况控制事务提交或回滚。
3、executeSql：这个方法用于执行真实的SQL查询。
<script type="text/javascript">
var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024); //参数分别为：数据库名、版本号、描述、数据库大小
var msg;
db.transaction(function (tx) {
tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');
tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "foobar")');
tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "logmsg")');
}); db.transaction(function (tx) {
tx.executeSql('SELECT * FROM LOGS', [], function (tx, results) {
var len = results.rows.length, i;
msg = "<p>Found rows: " + len + "</p>";
document.querySelector('#status').innerHTML += msg;
for (i = 0; i < len; i++){
msg = "<p><b>" + results.rows.item(i).log + "</b></p>";
document.querySelector('#status').innerHTML += msg;
}
}, null);
});
</script>
html5学习笔记3——高级特性的更多相关文章
- python学习笔记(三)高级特性
一.切片 list.tuple常常截取某一段元素,截取某一段元素的操作很常用 ,所以python提供了切片功能. L=['a','b','c','d','e','f'] #取索引0,到索引3的元素,不 ...
- Python学习笔记4 高级特性_20170618
# 切片(获取list / tuple / 字符串 中指定的元素) l = list(range(10)) l[0:3] l[:3] # 0可以省略 l[:] # 全部 l[3:] # 最后的可以省略 ...
- html5学习笔记一
HTML5学习笔记 <video>标记:定义视频,Ogg.MPEG4.WebM三种格式 <video src=”movie.ogg” controls=”controls”> ...
- Hadoop学习笔记(7) ——高级编程
Hadoop学习笔记(7) ——高级编程 从前面的学习中,我们了解到了MapReduce整个过程需要经过以下几个步骤: 1.输入(input):将输入数据分成一个个split,并将split进一步拆成 ...
- Python:笔记(4)——高级特性
Python:笔记(4)——高级特性 切片 取一个list或tuple的部分元素是非常常见的操作.Python提供了切片操作符,来完成部分元素的选取 除了上例简单的下标范围取元素外,Python还支持 ...
- Html5学习笔记1 元素 标签 属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- matlab学习笔记9 高级绘图命令_2 图形的高级控制_视点控制和图形旋转_色图和颜色映像_光照和着色
一起来学matlab-matlab学习笔记9 高级绘图命令_2 图形的高级控制_视点控制和图形旋转_色图和颜色映像_光照和着色 觉得有用的话,欢迎一起讨论相互学习~Follow Me 参考书籍 < ...
- matlab学习笔记9 高级绘图命令_1 图形对象_根对象,轴对象,用户控制对象,用户菜单对象
一起来学matlab-matlab学习笔记9 高级绘图命令_1 图形对象_根对象,轴对象,用户控制对象,用户菜单对象 觉得有用的话,欢迎一起讨论相互学习~Follow Me 参考书籍 <matl ...
- HTML5学习笔记之表格标签
HTML5学习笔记之表格标签 其他HTML5相关文章 HTML5学习笔记之HTML5基本介绍 HTML5学习笔记之基础标签 HTML5学习笔记之表格标签 HTML5学习笔记之表单标签 HTML5学习笔 ...
随机推荐
- Python 枚举 enum
Python 枚举 enum enum 标准模块在 3.4 版本才可以使用,3.3 以下版本需要独立安装:https://pypi.python.org/pypi/enum34#downloads,官 ...
- --mysql 导出数据时， 数字类型的列如果位数过长，变为科学计数法问题
--mysql 导出数据时, 数字类型的列如果位数过长,变为科学计数法问题在字段前加上\t即可select concat('\t',a.IDCARD_NO) from xxx a
- Java中的不同遍历方式
已知一个Person类: public class Person implements Comparable<Person>{ String name; String id; public ...
- Activity插件化解决方案
--摘自<android插件化开发指南> 1.宿主App加载插件中的类 2.最简单的插件化方案就是在宿主的androidmanifest.xml中申明插件中的四大组件 把插件dex合并到宿 ...
- go编译go-gtk,出现invalid flag in pkg-config --libs: -Wl,-luuid提示
go编译go-gtk 使用go编译go-gtk,直接编译会出现错误: pkg-config --cflags -- gdk-2.0 gthread-2.0 pkg-config --l ...
- Effective前端2---加快页面打开速度
1.避免head标签JS阻塞 所有放在head标签里的JS和CSS都会阻塞页面渲染.如果这些CSS和JS需要记在时间比较久,中间页面会存在一个空白期,严重影响到用户体验. 例如以下代码:在head标签 ...
- shell && and ||
2013-04-08 17:40:47 shell中&&和||的使用方法 &&运算符: command1 && command2 & ...
- linux 学习笔记三
用户管理篇章 useradd 建立用户 一般用法 #useradd mysql 含义 创建 mysql用户 特殊用户 > #useradd -d /usr/cjh -m cjh 含义 创建 cj ...
- 通用图片加载组件UniversalImageLoader
通用图片加载组件UniversalImageLoader UniversalImageLoader是一款通用图片加载组件.该组件支持多种图片来源,如网络.SD卡.Assets文件夹等.在网络请求的 ...
- 块级元素或者行内元素在设置float属性之后是否改变元素的性质？
块级元素使用float属性后,将其属性变成inline-block,不能改变其块级元素的性质,只是能有块级元素的特性,不独占一行,宽度不会占满父元素,和行内元素排列成一行 行内元素使用float属性后 ...