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学习笔 ...
随机推荐
- beautiful number 数位dp
题意: 求高位往低位递减且 高位%低位==0(相邻) 数字数量 唯一要注意的就是前导零!!!!!!(正因为这个前导零 一开始的pre设置为0 ) 比如 11 10 09 08 ...
- 第K人||约瑟夫环（链表）
http://oj.acm.zstu.edu.cn/JudgeOnline/problem.php?id=4442 很容易超时 通过数组来记录,删除 //数组从1开始好像不行 后面一些数字就乱码了,因 ...
- [ 低危 ] mt网CRLF
漏洞: xxx.meituan.com/%0d%0aevilheadername:%20inject_by_whoamisb 原理猜测: 收到xxx二级域名的时候,会location跳转到该域名(这是 ...
- XamarinSQLite教程创建数据表
XamarinSQLite教程创建数据表 新创建的数据库没有任何表.开发者需要手动添加数据表,并添加测试所需的数据. 1.创建数据表 为了存储数据,开发者需要添加自己的表,并设计表的结构.操作步骤如下 ...
- [iOS]有关开发过程中，代码之外的一些东西。
1.访问相册的权限 Privacy - Photo Library Usage Description //访问相册Privacy - Photo Library Additions Usage De ...
- 2018-6-25-随笔-MVC
向IIS中注册.net框架版本:安装的IIS因为是先安装了VS所以它里面的应用程序池的.net框架还是系统自带的框架,Win7是2.0,需要将VS的.net框架版本注册 注册方法:在开始菜单找到VS2 ...
- Python快速入门
Python快速入门 一.基础概要 命名:h.py Linux命令行运行:python h.py 注释.数字.字符串: 基本类型只有数字与字符串 #python注释是这样写的 ''' 当然也可以这样 ...
- Android应用程序结构
综述:Android应用程序包含哪些部分? assets 可以出发一些随程序打包的文件,应用程序运行时可以动态读取到这些文件的内容. 如果使用到webview加载本地网页的功能,所有网页相关的文件都存 ...
- [BZOJ3683]Falsita
[BZOJ3683]Falsita 题目大意: 一个\(n(n\le3\times10^5)\)个结点的树,每个结点有一个权值\(w_i\),\(m(m\le3\times10^5)\)次操作,操作包 ...
- （转）java程序员进入名企需要掌握哪些，立一个flag
想要成为合格的Java程序员或工程师到底需要具备哪些专业技能,在面试之前到底需要准备哪些东西呢?面试时面试官想了解你的什么专业技能,以下都是一个合格Java软件工程师所要具备的. 一.专业技能 熟练的 ...