一：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. 离线浏览 - 用户可在应用离线时使用它们
  2. 速度 - 已缓存资源加载得更快
  3. 减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。

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——高级特性的更多相关文章

  1. python学习笔记(三)高级特性

    一.切片 list.tuple常常截取某一段元素,截取某一段元素的操作很常用 ,所以python提供了切片功能. L=['a','b','c','d','e','f'] #取索引0,到索引3的元素,不 ...

  2. Python学习笔记4 高级特性_20170618

    # 切片(获取list / tuple / 字符串 中指定的元素) l = list(range(10)) l[0:3] l[:3] # 0可以省略 l[:] # 全部 l[3:] # 最后的可以省略 ...

  3. html5学习笔记一

    HTML5学习笔记 <video>标记:定义视频,Ogg.MPEG4.WebM三种格式 <video src=”movie.ogg”  controls=”controls”> ...

  4. Hadoop学习笔记(7) ——高级编程

    Hadoop学习笔记(7) ——高级编程 从前面的学习中,我们了解到了MapReduce整个过程需要经过以下几个步骤: 1.输入(input):将输入数据分成一个个split,并将split进一步拆成 ...

  5. Python:笔记(4)——高级特性

    Python:笔记(4)——高级特性 切片 取一个list或tuple的部分元素是非常常见的操作.Python提供了切片操作符,来完成部分元素的选取 除了上例简单的下标范围取元素外,Python还支持 ...

  6. Html5学习笔记1 元素 标签 属性

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. matlab学习笔记9 高级绘图命令_2 图形的高级控制_视点控制和图形旋转_色图和颜色映像_光照和着色

    一起来学matlab-matlab学习笔记9 高级绘图命令_2 图形的高级控制_视点控制和图形旋转_色图和颜色映像_光照和着色 觉得有用的话,欢迎一起讨论相互学习~Follow Me 参考书籍 < ...

  8. matlab学习笔记9 高级绘图命令_1 图形对象_根对象,轴对象,用户控制对象,用户菜单对象

    一起来学matlab-matlab学习笔记9 高级绘图命令_1 图形对象_根对象,轴对象,用户控制对象,用户菜单对象 觉得有用的话,欢迎一起讨论相互学习~Follow Me 参考书籍 <matl ...

  9. HTML5学习笔记之表格标签

    HTML5学习笔记之表格标签 其他HTML5相关文章 HTML5学习笔记之HTML5基本介绍 HTML5学习笔记之基础标签 HTML5学习笔记之表格标签 HTML5学习笔记之表单标签 HTML5学习笔 ...

随机推荐

  1. 五种UML工具

    ProcessOn是一款在线流程图软件(https://www.processon.com/),能够高效的完成在线流程图.UI原型图.UML以及组织图,网络拓扑图的构建.该软件最大的特点是,无需安装, ...

  2. The more, The Better

    The more, The Better依赖背包+树形dpf[x][j+1]=max(f[x][j+1],f[x][j+1-k]+f[i->n][k]);我的一个疑问就是这k个节点会不会选重复, ...

  3. switch反汇编

    以下总结为debug模式

  4. ubuntu安装虚拟环境

    首先 sudo pip install virtualenv sudo pip install virtualenvwrapper 然后进行配置 sudo gedit /.bashrc export ...

  5. 解决ant Design dva ajax跨越请求 （status=0）

    今天实现了antd作为前端展现,python flask作为后端的数据填充,完全两个独立的服务:过程中遇到ajax跨越请求问题,导致status一直等于0,原来是这么写的: xmlhttp.open( ...

  6. 56.两数之和.md

    描述 给一个整数数组,找到两个数使得他们的和等于一个给定的数 target. 你需要实现的函数twoSum需要返回这两个数的下标, 并且第一个下标小于第二个下标.注意这里下标的范围是 0 到 n-1. ...

  7. 在用UEditor往后台传数据写入数据库时，出现错误：从客户端(NewsContent="<p><img src="http://...")中检测到有潜在危险的 Request.。。。

    解决办法: 把传数据的方式换了一下,加上 [ValidateInput(false)]就不报错了. 建议看看这个:http://www.360doc.com/content/10/0521/15/46 ...

  8. 2017-9-17-Windows Live Writer常用快捷键

    Window Live Writer常用的快捷键: 将当前文章发布到博客:CTRL+SHIFT+P 打开新文章: CTRL+N 将草稿保存到计算机上: CTRL+S 切换到"普通" ...

  9. LINUX配置Django

    django项目: 依赖包[root@web01 ~]# yum install openssl-devel bzip2-devel expat-devel gdbm-devel readline-d ...

  10. acm--博弈入门2（P/N分析）--(HDU 1847 HDU 2188 HDU 3863）

    P/N理论 分析博弈时可以用P/N分析法 具体如下: P点:即必败点,某玩家位于此点,只要对方无失误,则必败: N点:即必胜点,某玩家位于此点,只要自己无失误,则必胜. 必败态:一定输 必胜态:一定赢 ...