一：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. day 61 Django part-1 django的安装,以及初学者三件套(以及settings中的mysql配置)

    我们的django到底是什么东西呢? 我们的代码都是在后台写的,包括我们的pycharm都是属于后台的工具,但是我们的后端开发说到底是需要开发完了之后拿到用户面前的,让我们的用户看到我们的东西,首先要 ...

  2. miniui格式化日期的方法

    <div field="InsertTime" renderer="ondayRenderer" headerAlign="center&quo ...

  3. windows系统nexus3安装和配置

    一.前言 为什么要在本地开发机器上安装nexus?首先声明公司内部是有自己的nexus仓库,但是对上传jar包做了限制,不能畅快的上传自己测试包依赖.于是就自己在本地搭建了一个nexus私服,即可以使 ...

  4. webstorm离线装载Material Theme UI

    首先说说需求,由于直接用webstorm听说VS挺火的,但是初恋的感觉是其他任何编辑器无法替代的 瞎说了一些话,新公司内网开发,用的是vscode,但是我还是喜欢用webstorm,连不上网,所以不能 ...

  5. SpringBoot使用LomBok

    Lombok是什么?它是一个能帮我们消除那些必须要写但是重复的代码,比如setter,getter,构造函数之类的方法. 首先先简单说一下idea安装lombok,有2种方法: 1.直接从http:/ ...

  6. 利用nginx，腾讯云免费证书制作https

    之前一直在研究,https怎么弄.最近看到了腾讯云提供的免费得ssl证书,寻思把网站弄成https. 首先先去腾讯云购买一个免费得证书. 点击后填写内容, 然后下载证书 解压证书就可以看到,提供四种方 ...

  7. XamarinAndroid组件教程RecylerView适配器动画动画种类

    XamarinAndroid组件教程RecylerView适配器动画动画种类 本节将讲解RecylerView适配器动画,其中包含动画种类和如何使用动画. 动画种类 RecylerViewAnimat ...

  8. 潭州课堂25班：Ph201805201 django框架 第四课 模板常用标签，模板继承与引用，自定义过渡器 (课堂笔记)

    if 语句 判断传入的 name 值 建好这些文件后,对 url 进行配置 在浏览器中访问 for 循环 页面跳转: 通过  name 跳转时要在 urls 文件中为该 path 设置 name 带参 ...

  9. GPIO知识点整理

    //GPIO的作业,抄两次,注意:本文件是知识点的整理不是可以直接运行的程序. //STM32必须包含的头文件 #include "stm32f10x.h" //GPIO相关头文件 ...

  10. CodeForce VKcup C 树形dp

    题意: 给出一棵树,一个人可以在树上跳,每次最多跳k(1≤k≤5)个点定义f(s,t)为从顶点ss跳到顶点tt最少需要跳多少次求∑(s<t)f(s,t) 链接: 点我 dp[i][j]表示以i点 ...