HTML5

HTML5的改进

新元素
新属性
完全支持 CSS3
Video 和 Audio
2D/3D 制图
本地存储
本地 SQL 数据
Web 应用

HTML5应用

本地数据存储
访问本地文件
本地 SQL 数据
缓存引用
Javascript 工作者
XHTMLHttpRequest 2

HTML5浏览器支持

常见的浏览器有：Internet Explorer、Firefox、Chrome、Opera、Safari

谷歌/火狐/欧朋/safari浏览器都支持HTML5

• 现代的浏览器都支持 HTML5。
• 所有浏览器，包括旧的和最新的，对无法识别的元素会作为内联元素自动处理。正因为如此，你可以 "教会" 浏览器处理 "未知" 的 HTML 元素。

针对IE浏览器html5shiv 是比较好的解决方案。html5shiv主要解决HTML5提出的新的元素不被IE6-8识别，这些新元素不能作为父节点包裹子元素，并且不能应用CSS样式。

IE9以下版本兼容HTML5的方法：

<!--[if lt IE 9]>
    <script src="http://cdn.static.runoob.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
<![endif]-->

载入后，初始化新标签的CSS

/*html5*/
article,aside,dialog,footer,header,section,nav,figure,menu{display:block}

<canvas>标签的使用

HTML5 <canvas> 元素用于图形的绘制，通过脚本 (通常是JavaScript)来完成.

<canvas> 标签只是图形容器，您必须使用脚本来绘制图形。

你可以通过多种方法使用 canvas 绘制路径,盒、圆、字符以及添加图像。
canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成

canvas坐标

canvas 是一个二维网格。

canvas 的左上角坐标为 (0,0)

canvas 路径

moveTo(x,y) 定义线条开始坐标
lineTo(x,y) 定义线条结束坐标
用stroke画线

canvas画圆

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();

canvas文本

font - 定义字体
fillText(text,x,y) - 在 canvas 上绘制实心的文本
strokeText(text,x,y) - 在 canvas 上绘制空心的文本

canvas 渐变

渐变可以填充在矩形, 圆形, 线条, 文本等等, 各种形状可以自己定义不同的颜色。
有两种方式的渐变：
1、createLinearGradient(x,y,x1,y1) - 创建线条渐变
2、createRadialGradient(x,y,r,x1,y1,r1) - 创建一个径向/圆渐变
当我们使用渐变对象，必须使用两种或两种以上的停止颜色。

addColorStop()方法指定颜色停止，参数使用坐标来描述，可以是0至1.

使用渐变，设置fillStyle或strokeStyle的值为 渐变，然后绘制形状，如矩形，文本，或一条线。
比如线性渐变：

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
 
// 创建渐变
var grd=ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
 
// 填充渐变
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);

径向/圆渐变

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
 
// 创建渐变
var grd=ctx.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
 
// 填充渐变
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);

canvas 图像

drawImage(image,x,y)

SVG

SVG和canvas之间的区别

SVG 是一种使用 XML 描述 2D 图形的语言。

Canvas 通过 JavaScript 来绘制 2D 图形。

SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。

在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。

Canvas 是逐像素进行渲染的。在 canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。

SVG	canvas
依赖分辨率	不依赖分辨率
不支持事件处理器	支持事件处理器
弱的文本渲染能力	最适合带有大型渲染区域的应用程序（比如谷歌地图）
能够以 .png 或 .jpg 格式保存结果图像	复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）
最适合图像密集型的游戏，其中的许多对象会被频繁重绘	不适合游戏应用

HTML5 MathML

HTML5 可以在文档中使用 MathML 元素，对应的标签是 <math>...</math> 。

MathML 是数学标记语言，是一种基于XML（标准通用标记语言的子集）的标准，用来在互联网上书写数学符号和公式的置标语言。

例：a的平方加b的平方等于c的平方

     <math xmlns="http://www.w3.org/1998/Math/MathML">
        
         <mrow>
            <msup><mi>a</mi><mn>2</mn></msup>
            <mo>+</mo>
                
            <msup><mi>b</mi><mn>2</mn></msup>
            <mo>=</mo>
                
            <msup><mi>c</mi><mn>2</mn></msup>
         </mrow>
            
      </math>

添加一些运算符：

 <math xmlns="http://www.w3.org/1998/Math/MathML">
        
         <mrow>         
            <mrow>
                
               <msup>
                  <mi>x</mi>
                  <mn>2</mn>
               </msup>
                    
               <mo>+</mo>
                    
               <mrow>
                  <mn>4</mn>
                  <mo>⁢</mo>
                  <mi>x</mi>
               </mrow>
                    
               <mo>+</mo>
               <mn>4</mn>
                    
            </mrow>
                
            <mo>=</mo>
            <mn>0</mn>
                 
         </mrow>
      </math>

结果是：x 2 + 4 ⁢ x + 4 = 0

HTML5 拖放 （drag drop）

拖放是一种常见的特性，即抓取对象以后拖到另一个位置。

在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。

例：来回拖放图片

 <div class="clearfix" style="margin-bottom: 50px">
        <p>拖放 grag grop</p>
        <br>
        <!--draggable="true" 设置元素可拖动-->
        <!--ondragstart：拖动什么，ondragover：放到何处-->
        <!--drag(event) 规定被拖动的数据-->
        <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
            <img src="http://img08.tooopen.com/20181122/tooopen_sy_124247424777430.jpg" draggable="true" ondragstart="drag(event)" id="drag1" width="200" height="150">
        </div>
        <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
    </div>
    <script>
        function allowDrop(ev)
        {
            ev.preventDefault();
        }

        // 被拖动的元素的事件 设置被拖数据的数据类型和值，在这个例子中，
        // 数据类型是 "Text"，值是可拖动元素的 id ("drag1")，被拖数据是被拖元素的 id ("drag1")
        function drag(ev)
        {
            ev.dataTransfer.setData("Text",ev.target.id);
        }

        // 把拖动物放入该容器，如果需要设置允许放置，我们必须阻止对元素的默认处理方式。
        // ev.preventDefault(); 避免浏览器对数据的默认处理（drop 事件的默认行为是以链接形式打开）
        function drop(ev)
        {
            ev.preventDefault();
            var data=ev.dataTransfer.getData("Text");
            ev.target.appendChild(document.getElementById(data));
        }
    </script>

HTML5 Geolocation (地理定位)

HTML5 Geolocation API 用于获得用户的地理位置。

鉴于该特性可能侵犯用户的隐私，除非用户同意，否则用户位置信息是不可用的。
例子：

<p id="demo">点击按钮获取您当前坐标（可能需要比较长的时间获取）：</p>
        <button onclick="getLocation()">点我</button>
        <script>
            var x=document.getElementById("demo");
            function getLocation()
            {
                if (navigator.geolocation)
                {
                    navigator.geolocation.getCurrentPosition(showPosition,showError);
                }
                else
                {
                    x.innerHTML="该浏览器不支持定位。";
                }
            }
            function showPosition(position)
            {
                x.innerHTML="纬度: " + position.coords.latitude +
                    "<br>经度: " + position.coords.longitude;
            }
            function showError(error)
            {
                switch(error.code)
                {
                    case error.PERMISSION_DENIED:
                        x.innerHTML="用户拒绝对获取地理位置的请求。"
                        break;
                    case error.POSITION_UNAVAILABLE:
                        x.innerHTML="位置信息是不可用的。"
                        break;
                    case error.TIMEOUT:
                        x.innerHTML="请求用户地理位置超时。"
                        break;
                    case error.UNKNOWN_ERROR:
                        x.innerHTML="未知错误。"
                        break;
                }
            }
        </script>

分析：

• 检测是否支持地理定位
• 如果支持，则运行 getCurrentPosition() 方法。如果不支持，则向用户显示一段消息。
• 如果getCurrentPosition()运行成功，则向参数showPosition中规定的函数返回一个coordinates对象
• showPosition() 函数获得并显示经度和纬度

HTML5 <video>

直到现在，仍然不存在一项旨在网页上显示视频的标准。

今天，大多数视频是通过插件（比如 Flash）来显示的。然而，并非所有浏览器都拥有同样的插件。

HTML5 规定了一种通过 video 元素来包含视频的标准方法。
video> 元素提供了 播放、暂停和音量控件来控制视频。

同时 <video> 元素也提供了 width 和 height 属性控制视频的尺寸.如果设置的高度和宽度，所需的视频空间会在页面加载时保留。如果没有设置这些属性，浏览器不知道大小的视频，浏览器就不能再加载时保留特定的空间，页面就会根据原始视频的大小而改变。

<video> 与</video> 标签之间插入的内容是提供给不支持 video 元素的浏览器显示的。

<video> 元素支持多个 <source> 元素. <source> 元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式：

视频格式与浏览器的支持

浏览器	MP4	WebM	ogg
Internet Explorer	yes	no	no
Chrome	yes	yes	yes
FireFox	yes	yes	yes
Safari	yes	no	no
Opera	yes (从 Opera 25 起)	yes	yes

<video> 使用DOM进行控制

HTML5 <video> 和 <audio> 元素同样拥有方法、属性和事件。

<video> 和 <audio>元素的方法、属性和事件可以使用JavaScript进行控制.

其中的方法用于播放、暂停以及加载等。其中的属性（比如时长、音量等）可以被读取或设置。其中的 DOM 事件能够通知您，比方说，<video> 元素开始播放、已暂停，已停止，等等。

HTML5 <audio>

音频格式及浏览器支持
目前, <audio>元素支持三种音频格式文件: MP3, Wav, 和 Ogg:

浏览器	MP3	Wav	ogg
Internet Explorer	yes	no	no
Chrome	yes	yes	yes
FireFox	yes	yes	yes
Safari	yes	yes	no
Opera	yes (从 Opera 25 起)	yes	yes

HTML5 <input>

HTML5 拥有多个新的表单输入类型。这些新特性提供了更好的输入控制和验证。
color
date
datetime
datetime-local
email
month
number
range
search
tel
time
url
week
注意:并不是所有的主流浏览器都支持新的input类型，不过您已经可以在所有主流的浏览器中使用它们了。即使不被支持，仍然可以显示为常规的文本域。

• type = "color"
  选取颜色

• type = "date"
  日期

• type = "datetime"
  日期和时间(本地时间)

• type = "datetime-local"
  日期和时间 (无时区)

• type = "email"
  在提交表单时，会自动验证 email 域的值是否合法有效
  提示: iPhone 中的 Safari 浏览器支持 email 输入类型，并通过改变触摸屏键盘来配合它（添加 @ 和 .com 选项）。

• type = "month"
  定义月与年 (无时区)

• type = "number"
  定义一个数值输入域(可以限定输入值)

使用下面的属性来规定对数字类型的限定：

属性	描述
disabled	规定输入字段是禁用的
max	规定允许的最大值
maxlength	规定输入字段的最大字符长度
min	规定允许的最小值
pattern	规定用于验证输入字段的模式
readonly	规定输入字段的值无法修改
required	规定输入字段的值是必需的
size	规定输入字段中的可见字符数
step	规定输入字段的合法数字间隔
value	规定输入字段的默认值

• type = "range"
  1、range 类型用于应该包含一定范围内数字值的输入域。
  2、range 类型显示为滑动条。

请使用下面的属性来规定对数字类型的限定：
max - 规定允许的最大值
min - 规定允许的最小值
step - 规定合法的数字间隔
value - 规定默认值

• type = "search"
  应用于搜索域

• type = "tel"
  定义输入电话号码字段

• type = "time"
  允许你选择一个时间

• type = "url"
  url 类型用于应该包含 URL 地址的输入域。
  在提交表单时，会自动验证 url 域的值。

• type = "week"
  选择周和年

HTML5 <datalist>

<datalist> 元素规定输入域的选项列表。

<datalist> 属性规定 form 或 input 域应该拥有自动完成功能。当用户在自动完成域中开始输入时，浏览器应该在该域中显示填写的选项：

使用 <input> 元素的列表属性与 <datalist> 元素绑定.

<input>元素使用<datalist>元素预定义值

<input list="browsers">
 
<datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>

HTML5 <keygen>

• <keygen> 元素的作用是提供一种验证用户的可靠方法。

• <keygen>标签规定用于表单的密钥对生成器字段。

• 当提交表单时，会生成两个键，一个是私钥，一个公钥。

• 私钥（private key）存储于客户端，公钥（public key）则被发送到服务器。公钥可用于之后验证用户的客户端证书（client certificate）。

<form action="#" method="get">
  用户名: <input type="text" name="usr_name">
  加密: <keygen name="security">
  <input type="submit">
</form>

HTML5 <output>

<output> 元素用于不同类型的输出，比如计算或脚本输出.
例：滑动range时展示value值

 <form action="#" oninput="x.value=c.value">
    <input type="range" id="c" value="50" min="0" max="100">
    <output name="x" for="c">50</output>
</form>

HTML5 表单属性

<form>新属性：

• autocomplete
• novalidate

<input>新属性：

autocomplete
autofocus
form
formaction
formenctype
formmethod
formnovalidate
formtarget
height 与 width
list
min 与 max
multiple
pattern (regexp)
placeholder
required
step

HTML5 <form>,<input>的autocomplete属性

autocomplete 属性规定 form 或 input 域应该拥有自动完成功能。

当用户在自动完成域中开始输入时，浏览器应该在该域中显示填写的选项。

提示: autocomplete 属性有可能在 form元素中是开启的，而在input元素中是关闭的。

注意: autocomplete 适用于 <form> 标签，以及以下类型的 <input> 标签：text, search, url, telephone, email, password, datepickers, range 以及 color。

例子：form 中开启 autocomplete (一个 input 字段关闭 autocomplete )

<form action="#" autocomplete="on">
  First name:<input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  E-mail: <input type="email" name="email" autocomplete="off"><br>
  <input type="submit">
</form>

HTML5 novalidate属性

novalidate 属性是一个 boolean(布尔) 属性.

novalidate 属性规定在提交表单时不应该验证 form 或 input 域。

<form action="demo-form.php" novalidate>
  E-mail: <input type="email" name="user_email">
  <input type="submit">
</form>

<input> autofocus 属性

autofocus 属性是一个 boolean 属性.

autofocus 属性规定在页面加载时，域自动地获得焦点。

<input> form 属性

form 属性规定输入域所属的一个或多个表单。

提示:如需引用一个以上的表单，请使用空格分隔的列表。

<form action="#" id="form1">
First name: <input type="text" name="fname"><br>
<input type="submit" value="提交">
</form>
​
<p> "Last name" 字段没有在 form 表单之内，但它也是 form 表单的一部分。</p>
​
Last name: <input type="text" name="lname" form="form1">
​
<p><b>注意:</b> IE 不支持 form 属性</p>

<input> formaction 属性

The formaction 属性用于描述表单提交的URL地址.

The formaction 属性会覆盖<form> 元素中的action属性.

注意: The formaction 属性用于 type="submit" 和 type="image".

<form action="demo-form.php">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  <input type="submit" value="提交"><br>
  <input type="submit" formaction="demo-admin.php"
  value="提交">
</form>

<input> formenctype 属性

formenctype 属性描述了表单提交到服务器的数据编码 (只对form表单中 method="post" 表单)

formenctype 属性覆盖 form 元素的 enctype 属性。

主要: 该属性与 type="submit" 和 type="image" 配合使用。

<form action="demo-post_enctype.php" method="post">
  First name: <input type="text" name="fname"><br>
  <input type="submit" value="提交">
  <input type="submit" formenctype="multipart/form-data"
  value="以 Multipart/form-data 提交">
</form>

<input> formmethod 属性，重新定义表单提交方式

formmethod 属性定义了表单提交的方式。

formmethod 属性覆盖了 <form> 元素的 method 属性。

注意: 该属性可以与 type="submit" 和 type="image" 配合使用。

<form action="demo-form.php" method="get">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  <input type="submit" value="提交">
  <input type="submit" formmethod="post" formaction="demo-post.php"
  value="使用 POST 提交">
</form>

<input> formnovalidate 属性

novalidate 属性是一个 boolean 属性.

novalidate属性描述了 <input> 元素在表单提交时无需被验证。

formnovalidate 属性会覆盖 <form> 元素的novalidate属性.

注意: formnovalidate 属性与type="submit一起使用

<form action="demo-form.php">
  E-mail: <input type="email" name="userid"><br>
  <input type="submit" value="提交"><br>
  <input type="submit" formnovalidate value="不验证提交">
</form>

<input> formtarget 属性

formtarget 属性指定一个名称或一个关键字来指明表单提交数据接收后的展示。

The formtarget 属性覆盖 <form>元素的target属性.

注意: formtarget 属性与type="submit" 和 type="image"配合使用.

<form action="demo-form.php">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  <input type="submit" value="正常提交">
  <input type="submit" formtarget="_self" value="提交到一个新的页面上">
</form>

<input> height 和 width 属性

height 和 width 属性规定用于 image 类型的 <input> 标签的图像高度和宽度。

注意: height 和 width 属性只适用于 image 类型的<input> 标签。

提示:图像通常会同时指定高度和宽度属性。如果图像设置高度和宽度，图像所需的空间 在加载页时会被保留。如果没有这些属性， 浏览器不知道图像的大小，并不能预留 适当的空间。图片在加载过程中会使页面布局效果改变 （尽管图片已加载）。

<form action="demo-form.php">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  <input type="image" src="img_submit.gif"  alt="Submit" width="48" height="48">
</form>

<input> list 属性

list 属性规定输入域的 datalist。datalist 是输入域的选项列表。

<input list="browsers">

<datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>

<input> min 和 max 属性

min、max 和 step 属性用于为包含数字或日期的 input 类型规定限定（约束）。

**注意: **min、max 和 step 属性适用于以下类型的 <input> 标签：date pickers、number 以及 range。
例子：限定最大值和最小值

Enter a date before 1980-01-01:
<input type="date" name="bday" max="1979-12-31">

Enter a date after 2000-01-01:
<input type="date" name="bday" min="2000-01-02">

Quantity (between 1 and 5):
<input type="number" name="quantity" min="1" max="5">

<input> multiple 属性

multiple 属性是一个 boolean 属性.

multiple 属性规定<input> 元素中可选择多个值。

注意: multiple 属性适用于以下类型的 <input> 标签：email 和 file:
例子：上传多个文件

Select images: <input type="file" name="img" multiple>

<input> pattern 属性

pattern 属性描述了一个正则表达式用于验证 <input> 元素的值。

注意:pattern 属性适用于以下类型的 <input> 标签: text, search, url, tel, email, 和 password.
例子：只能包含三个字母的文本域（不含数字及特殊字符）

Country code: <input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code">

<input> placeholder 属性

placeholder 属性提供一种提示（hint），描述输入域所期待的值。

简短的提示在用户输入值前会显示在输入域上。

注意: placeholder 属性适用于以下类型的 <input> 标签：text, search, url, telephone, email 以及 password。

<input type="text" name="fname" placeholder="First name">

<input> required 属性

required 属性是一个 boolean 属性.

required 属性规定必须在提交之前填写输入域（不能为空）。

注意:required 属性适用于以下类型的 <input> 标签：text, search, url, telephone, email, password, date pickers, number, checkbox, radio 以及 file。
username不能为空

Username: <input type="text" name="usrname" required>

<input> step 属性

step 属性为输入域规定合法的数字间隔。

如果 step="3"，则合法的数是 -3,0,3,6 等

提示： step 属性可以与 max 和 min 属性创建一个区域值.

注意: step 属性与以下type类型一起使用: number, range, date, datetime, datetime-local, month, time 和 week.

例子：规定<input>的step步长为3

<input type="number" name="points" step="3">

HTML5 语义元素

一个语义元素能够清楚的描述其意义给浏览器和开发者。

HTML5中的语义元素

HTML5 提供了新的语义元素来明确一个Web页面的不同部分:

<header>
<nav>
<section>
<article>
<aside>
<figcaption>
<figure>
<footer>

语义元素 <header>

<header>元素描述了文档的头部区域

<header>元素主要用于定义内容的介绍展示区域.

在页面中你可以使用多个<header> 元素.

语义元素 <nav>

<nav> 标签定义导航链接的部分。

<nav> 元素用于定义页面的导航链接部分区域，但是，不是所有的链接都需要包含在 <nav> 元素中!

语义元素 <article>

<article> 标签定义独立的内容。

语义元素 <section>

<section> 标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。

语义元素 <aside>

<aside> 标签定义页面主区域内容之外的内容（比如侧边栏）。

aside 标签的内容应与主区域的内容相关.

语义元素 <footer>

<footer> 元素描述了文档的底部区域.

<footer> 元素应该包含它的包含元素

一个页脚通常包含文档的作者，著作权信息，链接的使用条款，联系信息等

文档中你可以使用多个 <footer>元素.

语义元素 <figure> 和 <figcaption>

<figure>标签规定独立的流内容（图像、图表、照片、代码等等）。

<figure> 元素的内容应该与主内容相关，但如果被删除，则不应对文档流产生影响。

<figcaption> 标签定义 <figure> 元素的标题.

<figcaption>元素应该被置于 "figure" 元素的第一个或最后一个子元素的位置。

<figure>
  <img src="flower.jpg" alt="beautiful flower" width="304" height="228">
  <figcaption>beautiful flower</figcaption>
</figure>

HTML5 Web存储

HTML5 web 存储,一个比cookie更好的本地存储方式。

什么是 HTML5 Web 存储?

使用HTML5可以在本地存储用户的浏览数据。

早些时候,本地存储使用的是 cookie。但是Web 存储需要更加的安全与快速. 这些数据不会被保存在服务器上，但是这些数据只用于用户请求网站数据上.它也可以存储大量的数据，而不影响网站的性能.

数据以 键/值 对存在, web网页的数据只允许该网页访问使用。

localStorage 和 sessionStorage

客户端存储数据的两个对象为：

• localStorage - 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去除。
• sessionStorage - 用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。
  在使用 web 存储前,应检查浏览器是否支持 localStorage 和sessionStorage:

if(typeof(Storage)!=="undefined")
{
    // 是的! 支持 localStorage  sessionStorage 对象!
    // 一些代码.....
} else {
    // 抱歉! 不支持 web 存储。
}

localStorage 对象

localStorage 对象存储的数据没有时间限制。第二天、第二周或下一年之后，数据依然可用。
例子：

<p id="author"></p>

<script>
   localStorage.author="小明";
   document.getElementById("author").innerHTML=localStorage.author;
</script>

例子解析：
使用 key="author" 和 value="小明" 创建一个 localStorage 键/值对。
检索键值为"sitename" 的值然后将数据插入 id="author"的元素中。

清除本地缓存

localStorage.removeItem("author");

例子：点一下按钮数字加1

<p><button onclick="clickCounter()" type="button">点我！</button></p>
        <div id="result"></div>
        <script>
            // 点击button
            function clickCounter()
            {
                // 如果浏览器支持本地缓存
                if(typeof(Storage)!=="undefined")
                {
                    if (localStorage.clickcount)
                    {
                        localStorage.clickcount=Number(localStorage.clickcount)+1;
                    }
                    else
                    {
                        localStorage.clickcount=1;
                    }
                    document.getElementById("result").innerHTML=" 你已经点击了按钮 " + localStorage.clickcount + " 次 ";
                }
                else
                {
                    document.getElementById("result").innerHTML="对不起，您的浏览器不支持 web 存储。";
                }
            }
        </script>

不管是 localStorage，还是 sessionStorage，可使用的API都相同，常用的有如下几个（以localStorage为例）：

• 保存数据：localStorage.setItem(key,value);
• 读取数据：localStorage.getItem(key);
• 删除单个数据：localStorage.removeItem(key);
• 删除所有数据：localStorage.clear();
• 得到某个索引的key：localStorage.key(index);

sessionStorage 对象

sessionStorage 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后，数据会被删除。

<p><button onclick="clickCounter()" type="button">点我！</button></p>
<div id="result"></div>
<script>
function clickCounter()
{
    if(typeof(Storage)!=="undefined")
    {
        if (sessionStorage.clickcount)
        {
            sessionStorage.clickcount=Number(sessionStorage.clickcount)+1;
        }
        else
        {
            sessionStorage.clickcount=1;
        }
        document.getElementById("result").innerHTML="在这个会话中你已经点击了该按钮 " + sessionStorage.clickcount + " 次 ";
    }
    else
    {
        document.getElementById("result").innerHTML="抱歉，您的浏览器不支持 web 存储";
    }
}
</script>

HTML5 Web SQL 数据库

Web SQL 数据库 API 并不是 HTML5 规范的一部分，但是它是一个独立的规范，引入了一组使用 SQL 操作客户端数据库的 APIs。

核心方法

以下是规范中定义的三个核心方法：
1、openDatabase：这个方法使用现有的数据库或者新建的数据库创建一个数据库对象。
2、transaction：这个方法让我们能够控制一个事务，以及基于这种情况执行提交或者回滚。
3、executeSql：这个方法用于执行实际的 SQL 查询。

HTML5 应用缓存

使用 HTML5，通过创建 cache manifest 文件，可以轻松地创建 web 应用的离线版本。

什么是应用程序缓存（Application Cache）？

HTML5 引入了应用程序缓存，这意味着 web 应用可进行缓存，并可在没有因特网连接时进行访问。

应用程序缓存为应用带来三个优势：

1、离线浏览 - 用户可在应用离线时使用它们
2、速度 - 已缓存资源加载得更快
3、减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。