一：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. JavaSE| 面向对象-类的五大成员

    面向对象 面向对象只是其中一种编程思想,还有很多其他的编程思想:面向过程.面向切面.面向服务编程... 面向过程的思维方式:注重步骤.过程,面向过程强调的是功能行为: 面向对象的思维方式:关注的是“对 ...

  2. 假设你正在爬楼梯。需要 n 阶你才能到达楼顶。 每次你可以爬 1 或 2 个台阶。你有多少种不同的方法可以爬到楼顶呢？

    假设你正在爬楼梯.需要 n 阶你才能到达楼顶. 每次你可以爬 1 或 2 个台阶.你有多少种不同的方法可以爬到楼顶呢? 注意:给定 n 是一个正整数. 示例 1: 输入: 2 输出: 2 解释: 有两 ...

  3. 使用 linux 的 epoll 的套接字

    1. 代码: import socket import selectors #IO多路复用的选择模块 epoll_selector = selectors.EpollSelector() 实例化一个和 ...

  4. Aladdin and the Flying Carpet（唯一分解定理）

    题目大意:给两个数a,b,求满足c*d==a且c>=b且d>=b的c,d二元组对数,(c,d)和(d,c)属于同一种情况: 题目分析:根据唯一分解定理,先将a唯一分解,则a的所有正约数的个 ...

  5. css3和html5

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. JavaEE 之 DBCP

    1.DBCP a.定义:DBCP(DataBase Connection Pool)数据库连接池,是java数据库连接池的一种,由Apache开发,通过数据库连接池,可以让程序自动管理数据库连接的释放 ...

  7. hdu 2553 n皇后问题【DFS递归解法】

    <题目链接> 题目大意: Problem Description 在N*N的方格棋盘放置了N个皇后,使得它们不相互攻击(即任意2个皇后不允许处在同一排,同一列,也不允许处在与棋盘边框成45 ...

  8. 转载：ThreadPoolExecutor 源码阅读

    前言 之前研究了一下如何使用ScheduledThreadPoolExecutor动态创建定时任务(Springboot定时任务原理及如何动态创建定时任务),简单了解了ScheduledThreadP ...

  9. 高效使用hibernate-validator校验框架

    一.前言 高效.合理的使用hibernate-validator校验框架可以提高程序的可读性,以及减少不必要的代码逻辑.接下来会介绍一下常用一些使用方式. 二.常用注解说明 限制 说明 @Null 限 ...

  10. ReentrantLock和condition源码浅析(一)

    转载请注明出处..... 一.介绍 大家都知道,在java中如果要对一段代码做线程安全操作,都用到了锁,当然锁的实现很多,用的比较多的是sysnchronize和reentrantLock,前者是ja ...