h5的存储方式有如下几种

1、web storage

• 本地存储local storage
• 本地存储session storage

2、离线缓存（application cache）
3、Web SQL
4、IndexedDB

1、web storage

存储形式：key-->value
存储内容：数组、json、图片、脚本、样式等可以序列化为字符串的内容
使用场景：利用本地数据，减少网络传输，弱网高延迟低带宽，尽量数据本地化
大小限制：每个域名5M

** 本地存储local storage - 没有时间限制的数据存储 **

域内安全、永久保存，除非手动删除

if(typeof(Storage) !== "undefined") {

          // localStorage.setItem(键名，键值)      存储数据信息到本地
          // localStorage.getItem(键名)      读取本地存储的信息
          // localStorage.removeItem(键名)   删除本地存储的信息
          // localStorage.clear()        清空所有存储的信息
    var value = "张三";
    //存储
    localStorage.setItem("key", value);
    //取值
    var name = localStorage.getItem("key");
    console.log(name);
    //删除
    localStorage.removeItem("key");
    //清空localStorage信息
    localStorage.clear()
} else {

    console.log("浏览器不支持web Storage")
}

** 本地存储session storage - 针对一个 session 的数据存储 **

短期保存，重启浏览器、关闭页面或新开页面时失效

if(typeof(Storage) !== "undefined") {

 //sessionStorage.setItem(键名，键值)       存储数据信息到本地
 //sessionStorage.getItem(键名)       读取本地存储的信息
 //sessionStorage.removeItem(键名)    删除本地存储的信息
 //sessionStorage.clear ()        清空所有存储的信息

    var value = "张三";
    //存储
    se.setItem("key", value);
    //取值
    var name = localStorage.getItem("key");
    console.log(name);
    //删除
    localStorage.removeItem("key");
    //清空localStorage信息
    localStorage.clear()
} else {

    console.log("浏览器不支持web Storage")
}

2、离线缓存（application cache）

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

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

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

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

所有主流浏览器均支持应用程序缓存，除了 Internet Explorer。

未完待续...

请参考
http://www.w3school.com.cn/html5/html_5_app_cache.asp

3、Web SQL

Web SQL 数据库可以在最新版的 Safari, Chrome 和 Opera 浏览器中工作

核心方法：

• openDatabase：这个方法使用现有的数据库或者新建的数据库创建一个数据库对象。
• transaction：这个方法让我们能够控制一个事务，以及基于这种情况执行提交或者回滚。
• executeSql：这个方法用于执行实际的 SQL 查询。

打开数据库：

  var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024,fn);
  //openDatabase() 方法对应的五个参数分别为：数据库名称、版本号、描述文本、数据库大小、创建回调

执行查询操作：

  var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
  db.transaction(function (tx) { 
     tx.executeSql('CREATE TABLE IF NOT EXISTS WIN (id unique, name)');
  });

插入数据：

  var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
  db.transaction(function (tx) {
     tx.executeSql('CREATE TABLE IF NOT EXISTS WIN (id unique, name)');
     tx.executeSql('INSERT INTO WIN (id, name) VALUES (1, "winty")');
     tx.executeSql('INSERT INTO WIN (id, name) VALUES (2, "LuckyWinty")');
  });

读取数据：

  db.transaction(function (tx) {
     tx.executeSql('SELECT * FROM WIN', [], function (tx, results) {
        var len = results.rows.length, i;
        msg = "<p>查询记录条数: " + len + "</p>";
        document.querySelector('#status').innerHTML +=  msg;
 
        for (i = 0; i < len; i++){
           alert(results.rows.item(i).name );
        }
 
     }, null);
  });

具体代码可参考我的另一篇关于数据库文章
链接如下：
http://www.jianshu.com/p/ba69532c0b00

4、IndexedDB

http://www.cnblogs.com/dolphinX/p/3415761.html
http://www.cnblogs.com/dolphinX/p/3416889.html

H5之前

主要使用cookies

数据大小：作为存储容器，cookie的大小限制在4KB左右。
安全性问题：由于在HTTP请求中的cookie是明文传递，有安全性隐患。
网络负担：cookie会被附加在每个HTTP请求中，在HttpRequest 和HttpResponse的header中都是要被传输的，所以无形中增加了一些不必要的流量损失。

兼容问题：

本地存储是H5的新贵，但是对于老、旧的浏览器来说怎么办？那就不用老古董浏览器呗，或者使用cookie作为替代。因为大多使用localStorage是用来存储字符串的，在其他编译型的语言看来，存储字符串能做些什么，但在JavaScript身上，旧大放光彩，可以存储JSON格式的字符串来扩展应用，可以存储类名变量值等等信息再通过eval()来感受使用JS的快感。既然localStorage是存储字符串的，那么在老古董浏览器上，可以通过使用Cookies来做替代方案并做好域内安全。