一：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. Linux 文件夹相关常用命令

    Linux 文件夹相关常用命令 查看 ls -la -l 列出详细信息 -a 列出全部,包括.和.. 删除 rm <folder> -rf  -r  就是向下递归,不管有多少级目录,一并删 ...

  2. 阿里 EasyExcel 使用及避坑

    github地址:https://github.com/alibaba/easyexcel 原本在项目中使用EasyPoi读取excel,后来为了统一技术方案,改用阿里的EasyExcel.EasyE ...

  3. vim编辑器第二天

    编辑模式的进入: i  :在光标所在的字符前插入 a :在光标所在的字符后插入 o :在光标所在的行的下面一行插入 I  : 在光标所在的行的行首插入,如果行首有空格则在空格后面开始插入 A :在光标 ...

  4. codeforces723----C. Polycarp at the Radio

    //AC代码...表示很晕 #include <iostream> using namespace std; ],b[]; int main() { int n,m,cnt; cin &g ...

  5. java菜鸟之微信分享

    前言:我终于理解了什么叫做教科书:教科书就是把一些简单容易的知识写成一堆谁都看不懂的书,这,就简称“教科书” 这些天接触到微信分享以及回调的问题,因为之前没接触过,所以这次做这个分享,碰了一点点壁,特 ...

  6. MySQL中文排序

    按照汉字的拼音排序,用的比较多是在人名的排序中,按照姓氏的拼音字母,从A到Z排序: 如果存储姓名的字段采用的是GBK字符集,那就好办了,因为GBK内码编码时本身就采用了拼音排序的方法(常用一级汉字37 ...

  7. 2018-6-20-随笔-SQL Server中乱码

    SQL Server中乱码解决方案: 在Sql Server2005英文版中,如果未对Varchar类型的字段进行设置,那么很多朋友会发现向数据库中插入记录时,如果对应的varchar类型字段 的值为 ...

  8. Java代码优化小结（三）

    (35)对资源的close()建议分开操作虽然有些麻烦,却能避免资源泄露.我们想,如果没有修改过的代码,万一XXX.close()抛异常了,那么就进入了catch块中了,YYY.close()不会执行 ...

  9. Linux vi/vim命令高效助记图

    图片来源网上,如有侵权,请告知,我会删除掉,谢谢~ 常用编辑按键: 1 vi +[num] file 打开文件,并将光标置于第n行首 2 vi + file 打开文件,并将光标置于最后一行首 3 vi ...

  10. pythonweb服务器编程（二）

    Web静态服务器-1-显示固定的页面 #coding=utf-8 import socket from multiprocessing import Process def handleClient( ...