HTML5的存储方式

HTML5给我们提供了新的存取本地数据的方法。

在HTML5之前，存储主要是放在cookie文件中。但是cookie文件有其自身的局限性。

  • cookie文件每次请求的时候都会发送到后台，消耗带宽
  • cookie的大小被限制为4KB

这两种限制，是的使用cookie不但额外消耗带宽，而且携带的数据量还很有限。HTML5对于本地存储提供了新的方式：

  1. 使用sessionStorage存储数据
  • 以key-value的形式存储数据
  • 保存的时间为一次回话，也就是说，和服务器端session类似，重启浏览器就会丢失
  1. 使用localStorage存储数据
  • 以key-value 的形式存储数据
  • 保存时间无限制
  • 个人猜测，以上两种存储的方式，只能存储和取出相同域中的值。
  1. 使用本地数据库存储数据
  • ○可以使用sqllite来存取数据
  • 可以使用indexedDB来存取数据

sessionStorage和localStorage本身来说，和cookie很类似，都是key-value的形式来存取数据。在简单的应用的情况下，是比较好用的，但是涉及到复杂的使用场景的时候，就不太够用了。然后HTML5还给我们提供了数据库存储的方式。

SQLLite数据库

sqllite是比较轻型的数据库，占据的空间很小，并且支持sql语句，简单易用。对于浏览器的客户端来使用的话已经足够了。
创建SQLLite数据库

var db = openDatabase('mydb','1.0','Test DB',2*1024*1024)
四个参数：数据库名，版本号，数据库描述，数据库大小
使用数据库
db.transaction(function(tx){
        tx.executeSql('create table if not exists LOGS(id unique, log)'); 
    })
我们需要使用transaction，该函数用来执行事务处理。在我上面的实例中我创建了一个表。
关于executeSql方法一共有四个参数：
  • 执行的sql
  • sql中用到的参数数组
  • 执行成功时的回调函数
  • 执行sql语句出错时的回调函数
    目前据说HTML5中的SQLLite将要被放弃，所以最好还是学习IndexedDB

IndexedDB数据库

这是一个NoSQL数据库，目前我使用SQLLite数据库已经够用，所以还没有进行过使用测试，但是后期可以专门做一个分析文档。