HTML5使用了HTTP机制的Cookie，用于在客户端存储结构化数据以及克服以下缺点。

每个HTTP请求中都包含Cookies，从而导致传输相同的数据减缓我们的Web应用程序。

每个HTTP请求中都包含Cookies，从而导致发送未加密的数据到互联网上。

Cookies只能存储有限的4KB数据，不足以存储所需的数据。这两种存储方式是会话存储和本地存储，它们将用于处理不同的情况。

几乎所有最新版本的浏览器都支持HTML5存储，包括IE浏览器。

会话存储

_会话存储_被设计为用户使用单个事务的场景，但是同时可以在不同的窗口中执行多个事务。

示例

如果，该网站使用cookie跟踪用户购买的机票，当用户在窗口中点击页面时，从一个窗口到另一个时当前已经购买的机票会“泄漏”，这可能导致用户购买同一航班的两张机票而没有注意。

HTML5会话存储属性，此网站可以将数据添加到会话存储中，用户仍然可以在打开的持有该会话的窗口中访问同一站点的任意页面，当关闭窗口时，会话也会丢失。

下面的代码将会设置一个会话变量，然后访问该变量：

XML / HTML代码将内容复制到文本

<！DOCTYPE HTML >  

< html >  

<身体>  

  

  <脚本类型= “ text / javascript” >   

    if（sessionStorage.hits）{   

       sessionStorage.hits  = 数字（sessionStorage.hits）+1;   

    }其他{   

       sessionStorage.hits  =  1 ;   

    }   

    document.write（“总点击数：” + sessionStorage.hits）;   

  </脚本>  

  < p >刷新页面以增加点击数。</ p >  

  < p >关闭窗口，然后再次打开并检查结果。</ p >  

  

</ body >  

</ html >  

本地是

_出于性能原因，Web应用程序可能希望在客户端存储百万字节的用户数据，例如用户撰写的整个文档或者是用户的邮箱。

Cookies并不能很好的处理这种情况，因为每个请求都会传输。

示例

HTML5发布了localStorage属性，可以用于访问页面的本地存储区域而没有时间限制，无论何时我们使用这个页面的时候本地存储都是可用的。

下面的代码设置了一个本地存储变量，每次访问该页面时都可以访问该变量，甚至是下次打开窗口时：

XML / HTML代码将内容复制到文本

<！DOCTYPE HTML >  

< html >  

<身体>  

  

  <脚本类型= “ text / javascript” >   

    if（localStorage.hits）{   

       localStorage.hits  = 数字（localStorage.hits）+1;   

    }其他{   

       localStorage.hits  =  1 ;   

    }   

    document.write（“总点击数：” + localStorage.hits）;   

  </脚本>  

  < p >刷新页面以增加点击数。</ p >  

  < p >关闭窗口，然后再次打开并检查结果。</ p >  

  

</ body >  

</ html >  

方便学习上述概念-请进行在线练习。

删除Web存储

在本地机器上存储敏感数据可能是危险的，可能会留下安全隐患。

_会话存储数据_在会话终止之后将由浏览器立即删除。

要清除本地存储设置需要调用localStorage.remove（'key'）；这个'key'就是我们想要删除的值对应的键。如果想要清除所有设置，需要调用localStorage.clear（）方法。

下面的代码会完全清除本地存储：

XML / HTML代码将内容复制到文本

<！DOCTYPE HTML >  

< html >  

<身体>  

  

  <脚本类型= “ text / javascript” >   

    localStorage.clear（）;   

  

    //重置点击数。   

    if（localStorage.hits）{   

       localStorage.hits  = 数字（localStorage.hits）+1;   

    }其他{   

       localStorage.hits  =  1 ;   

    }   

    document.write（“总点击数：” + localStorage.hits）;   

  </脚本>  

  < p >刷新页面不会增加点击计数器。</ p >  

  < p >关闭窗口，然后再次打开并检查结果。</ p >  

  

</ body >  

</ html >  

Web SQL数据库

Web SQL数据库API并不是HTML5规范的一部分，但是它是一个独立的规范，而是使用了SQL操作客户端数据库的API。核心方法下面是规范中定义的三个核心方法。也会涵盖在本教程中：

 

的openDatabase：这个方法使用现有的数据库或者新建的数据库创建一个数据库对象的事务：这个方法让我们能够控制一个事务，以及基于这种情况执行提交或者回滚。的ExecuteSQL：这个方法用于执行实际的SQL查询。开启数据库如果数据库已经存在，openDatabase方法负责开启数据库，如果不存在，这个方法会创建它。

 

 

 

使用以下的代码可以创建并开启一个数据库：

JavaScript代码将内容复制到

var  db = openDatabase（'mydb' ，  '1.0' ，  'Test DB' ，2 * 1024 * 1024）;  

上面的方法接受以下五个参数：

数据库名称版本号描述文本数据库大小被创建的最后一个也是一个第五个参数，创建引用会在创建数据库后被调用。然而，甚至没有这个特性（功能），运行时仍会创建数据库以及正确的版本。

 

 

 

 

执行查询

执行查询需要使用database.transaction（）函数。这个函数需要一个参数，它是一个负责实际执行查询的函数，如下所示：

JavaScript代码将内容复制到

var  db = openDatabase（'mydb' ，  '1.0' ，  'Test DB' ，2 * 1024 * 1024）;   

db.transaction（函数 （tx）{     

   tx.executeSql（'如果不存在日志则创建表（id unique，log）' ）;   

}）;  

上面的查询语句会在'mydb'数据库中创建一个叫做的LOGS的表。

插入操作

为了在表中创建合并，我们在上面的示例中加入简单的SQL查询，如下所示：

JavaScript代码将内容复制到

var  db = openDatabase（'mydb' ，  '1.0' ，  'Test DB' ，2 * 1024 * 1024）;   

db.transaction（函数 （tx）{   

   tx.executeSql（'如果不存在日志则创建表（id unique，log）' ）;   

   tx.executeSql（'将日志插入（ID，日志）值（1，“ foobar”）' ）;   

   tx.executeSql（'将日志插入（ID，日志）值（2，“ logmsg”）' ）;   

}）;  

创建的时还可以传递如下所示的动态值：

JavaScript代码将内容复制到

var  db = openDatabase（'mydb' ，  '1.0' ，  'Test DB' ，2 * 1024 * 1024）;   

db.transaction（函数 （tx）{     

  tx.executeSql（'如果不存在日志则创建表（id unique，log）' ）;   

  tx.executeSql（'将日志插入日志   

                        （id，log）值（？，？' ），[e_id，e_log];   

}）;  

这里的e_id和e_log是外部变量，executeSql会映射数组参数中的每个对应给“？”。

读取操作

要读取已经存在的记录，我们可以使用替换来捕获结果，如下所示：

JavaScript代码将内容复制到

var  db = openDatabase（'mydb' ，  '1.0' ，  'Test DB' ，2 * 1024 * 1024）;   

db.transaction（函数 （tx）{   

   tx.executeSql（'如果不存在日志则创建表（id unique，log）' ）;   

   tx.executeSql（'将日志插入（ID，日志）值（1，“ foobar”）' ）;   

   tx.executeSql（'将日志插入（ID，日志）值（2，“ logmsg”）' ）;   

}）;   

db.transaction（函数 （tx）{   

   tx.executeSql（'SELECT * FROM LOGS' ，[]， 函数 （tx，结果）{   

   var  len = results.rows.length，i;   

   msg =  “ <p>找到的行：”  + len +  “ </ p>” ;   

   document.querySelector（'#status' ）.innerHTML + = msg;   

   对于 （i = 0; i <len; i ++）{   

      警报（results.rows.item（i）.log）;   

   }   

 }，为 null ）；   

}）;  

最终示例最后，然我们把这个例子放到如下所示的完整HTML5文档中，然后尝试在Safari浏览器中运行它：

JavaScript代码将内容复制到

<！DOCTYPE HTML>   

<html>   

<头>   

<script type = “ text / javascript” >   

var  db = openDatabase（'mydb' ，  '1.0' ，  'Test DB' ，2 * 1024 * 1024）;   

var  msg;   

db.transaction（函数 （tx）{   

  tx.executeSql（'如果不存在日志则创建表（id unique，log）' ）;   

  tx.executeSql（'将日志插入（ID，日志）值（1，“ foobar”）' ）;   

  tx.executeSql（'将日志插入（ID，日志）值（2，“ logmsg”）' ）;   

  msg =  '<p>已创建日志消息并插入行。</ p>' ;   

  document.querySelector（'#status' ）.innerHTML = msg;   

}）;   

  

db.transaction（函数 （tx）{   

  tx.executeSql（'SELECT * FROM LOGS' ，[]， 函数 （tx，结果）{   

   var  len = results.rows.length，i;   

   msg =  “ <p>找到的行：”  + len +  “ </ p>” ;   

   document.querySelector（'#status' ）.innerHTML + = msg;   

   对于 （i = 0; i <len; i ++）{   

     msg =  “ <p> <b>”  + results.rows.item（i）.log +  “ </ b> </ p>” ;   

     document.querySelector（'#status' ）.innerHTML + = msg;   

   }   

 }，为 null ）；   

}）;   

</ script>   

</ head>   

<身体>   

<div id = “状态”  name = “状态” >状态消息</ div>   

</ body>   

</ html>  

在浏览器中这会生成如下所示结果：

 

 

复制代码

代码如下：

 

创建日志消息并插入行。</ p> <p>找到的行：2 </ p> <p> foobar </ p> <p> logmsg