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学习笔 ...
随机推荐
- Spring（三）实例化Bean以及注入对象
使用xml实例化bean 在xml中实例化bean的三种方式 <bean id="springService" class="com.zhiyou100.crm.t ...
- win10下正确使用Sublime Text搭建python调试环境
pycharmt等IDE虽然用着爽,但毕竟在速度.资源上还是比较让人不爽的. 使用IDE无非是图个方便省事,特别是像我这种有些记性差的来说. IDE说起来方便于的几个地方就是: 1.语法颜色高亮 ...
- UVa-156 Ananagrams 反片语【map】【vector】
题目链接:https://vjudge.net/contest/211547#problem/D 题目大意: 输入一些单词,找出所有满足以下条件的单词:该单词不能通过字母重排,得到输入文本中的另外一些 ...
- metasploit支持利用的CVE
因为需要添加许多漏洞的流量检测,所以需要模拟很多漏洞的利用过程,简单来说,就是抓漏洞利用过程的流量. 一个脚本对metasploit中的module中包含的cve字段进行提取,而后去重,得出metas ...
- iOS APP提交上架流程
转载自CocoaChina,链接地址:http://www.cocoachina.com/bbs/read.php?tid=330302 后面问题我也遇到了,参考该文章解决的 转自http://blo ...
- BZOJ.4558.[JLOI2016]方(计数 容斥)
BZOJ 洛谷 图基本来自这儿. 看到这种计数问题考虑容斥.\(Ans=\) 没有限制的正方形个数 - 以\(i\)为顶点的正方形个数 + 以\(i,j\)为顶点的正方形个数 - 以\(i,j,k\) ...
- Python3基础-高级用法
写在前面:本文主要是python高级练习部分,介绍了一些高级用法,这些都是零散的小知识,这些可以与函数式编程合在一起使用. 函数式编程1:Python中提供的函数式编程主要有: map(函数,可迭代式 ...
- error :expected initializer before
很可能头文件或者前面的某个定义少了个:
- yii2 配合bootstrap添加按钮
新增一个按钮 1.bootstrap 官网:http://getbootstrap.com/ 2.bootstrap 中文官网:http://v3.bootcss.com/ 在视图文件中: <? ...
- python 绘图pylab
绘图 1.绘图主要通过代码来进行认知 demo: import pylab #绘图库 pylab.figure(1) #创建图一 pylab.plot([1,2,3,4],[1,2,3,4]) #在图 ...