HTML5中数据存储

1.web Stroage存储介绍

   (1) sessionStroage：保存会话数据；该方式保存的数据时间短暂，数据实质上是保存在session对象中的，一旦关闭浏览器sessionStorage对象保存的数据将全部丢失。

       sessionStorage.setItem(key,value);

       sessionStorage.getItem(key);

   (2) localStorage:可以长期保存数据在客户端，直至人工清除

      localStorage.setItem(key,value);

      localStorage.getItem(key);

     清除数据：localStorage.removeItem(key);

     清空数据：localStorage.clear();

     遍历数据：使用for循环，localStorage.length

     获取key值：localStorage.key(index);//index是下标

2.Web SQL数据库基础

   WebDB可以实现数据的本地存储，支持多浏览器的并发操作，并且也不会发生存储时的冲突；

   (1) 打开和创建数据库的API是openDatabase

        openDatabase(DBName, DBVersion, DBDescribe, DBSize, Callback());

        参数的意义分别是：数据库名，数据库版本号，对数据库的描述，数据库的大小单位是字节，最后一个参数就是打开或者创建之后习性的一个回调函数；

     以上代码正确，并且能正确的创建数据表；页面展示如下：

   (2) 插入数据

      tx.executeSql("insert into StuInfo values (?,?,?,?)",["123456","张三","男",0])

     案例：

      页面结果：

   (3)数据管理

       主要实现增删改查，代码量有点大，不在这个贴出，附上我自己的写的一个代码链接。HTML5本地数据库案例；

       案列截图如下：

       初始数据就是我在前面（2）插入数据的时候插入的；

     查询：在输入框中输入需要查询的用户ID

      增加：点击增加按钮，录入正确的信息；

     编辑：点击编辑按钮，修改信息；

     删除：点击删除ID为985736的用户，页面自动刷新；