HTML5的本地存储

HTML5的存储方式

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

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

• cookie文件每次请求的时候都会发送到后台，消耗带宽

• cookie的大小被限制为4KB

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

1. 使用sessionStorage存储数据

   • 以key-value的形式存储数据

   • 保存的时间为一次回话，也就是说，和服务器端session类似，重启浏览器就会丢失

2. 使用localStorage存储数据

   • 以key-value 的形式存储数据

   • 保存时间无限制

   • 个人猜测，以上两种存储的方式，只能存储和取出相同域中的值。

3. 使用本地数据库存储数据

   • ○可以使用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数据库已经够用，所以还没有进行过使用测试，但是后期可以专门做一个分析文档。