开发者社区> 技术mix呢> 正文

HTML5笔记3——Web Storage和本地数据库

简介:
+关注继续查看

上一篇:HTML5笔记2——HTML5音/视频标签详解

Web Storage概述

在HTML5中,除了Canvas元素之外,另一个新增的非常重要的功能是可以再客户端本地保存数据的Web Storage功能,之前可以使用Cookies在客户端

保存诸如用户名等简单用户信息,但通过长期使用,人们发现使用Cookies存储永久数据存在几个问题。

  • 大小:Cookies的大小被限制在4KB
  • 带宽:Cookies是随HTTP失误一起被发送的,因此会浪费一部分发送Cookies时使用的带宽
  • 复杂性:要正确的操纵Cookies是很困难的。

针对以上问题,HTML5中,重新提供了一中在客户端本地保存数据的功能,他就是Web Storage。

Web Storage功能。

顾名思义,Web Storage功能就是在Web上存储数据的功能,这里的存储是针对客户端本地而言的。具体分为两种:

sessionStorage:将数据保存在session对象中。session是指用户在浏览某个网站时,从进入网站到浏览器关闭所经过的这段时间,也就是用户浏

览这个网站所花费的时间。session对象可以用来保存在这段时间内所要保存的任何数据。

localStorage:将数据保存在客户端本地的硬件设备(硬盘)中,即使浏览器被关闭了,该数据仍然存在,下一次打开浏览器访问网站时仍然可以

继续使用。localstorage 是通过键值对来存储的。

开发工具我使用HBuilder.exe

新建Test.html页面,代码如下:

 View Code

localStorage关闭浏览器之后再打开,读取数据依旧存在,而sessionStorage关闭浏览器之后再打开读取数据就不见了。

作为简单数据库来利用

 将Web Storage作为简易数据库,如果能解决数据检索,对列进行管理,就可以将Web Storage作为数据库来利用了。

新建Register.html页面,代码如下:

 View Code

HTML5 本地数据库

在HTML5中,大大丰富了客户端本地可以存储的内容,添加了很多功能将原本必须要保存在服务器上的数据转为保存在客户端本地,从而大大提高了Web应用程序性能,减轻了服务器的负担,使用Web时代重新回到了“客户端为重、服务器端为轻”的时代。在HTML5中内置了两种本地数据库,一种为SQLLite,一种为indexedDB。

用executeSql来执行查询
1.transaction.executeSql(sqlquery,[],dataHandler,errorHandler);
2.function dataHandler(transaction,results);
3.function errorHandler(transaction,errmsg);
4.rows.length获取记录的条数

新建SqlTest.html,代码如下:

复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <script type="application/javascript">
            var db=openDatabase("mydb","1.0","test db",1024*100); //参数分别为:(数据库名称,版本号,描述,大小) 如果数据库不存在则创建
//            db.transaction(function(tx) {
//                tx.executeSql("")
//            })
            transaction.executeSql("CREATE TABLE IF NOT EXISTS MsgData(name TEXT,msg,TEXT,createtime INTERGER)",[],function(){},function(){});
            //参数:(sql语句,sql参数数组,执行成功的回调函数,执行失败的回调函数)
        </script>
    </body>
</html>
复制代码

HTML5 indexedDB数据库

在HTML5中,新增了一种被称为“indexedDB”的数据库,该数据库是一种存储在客户端本地的NoSQL数据库。

新建IndexedDBTest.html,代码如下:

 View Code

数据库的版本更新

只是成功链接数据库,我们还不能执行任何数据操作,我们还应该创建相当于关系型数据库中数据表的对象仓库与用于检索数据的索引。

新建versionUpdate.html,代码如下:

 View Code

创建对象仓库

对于创建对象仓库与索引的操作,我们只能在版本更新事务内部进行,因为在indexedDB API中不允许数据库中的对象仓库在同一个版本中发生改变。

新建createStorge.html,代码如下:

复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
            <script type="application/javascript">
            //统一IndexedDB在不同浏览器的实现
            window.indexedDB = window.indexedDB ||
                window.mozIndexedDB ||
                window.webkitIndexedDB ||
                window.msIndexedDB;
            window.IDBTransaction = window.IDBTransaction ||
                window.webkitIDBTransaction ||
                window.msIDBTransaction;
            window.IDBKeyRange = window.IDBKeyRange ||
                window.webkitIDBKeyRange ||
                window.msIDBKeyRange;
                
                function CreateStorge () {
                    var dbName="indexedDBTest";
                    var dbVersion=2;
                    var idb;
                    var dbConnect=indexedDB.open(dbName,dbVersion);
                    dbConnect.onsuccess=function (e) {
                        idb=e.target.result;
                        alert("数据库连接成功!")
                    }
                    dbConnect.onerror=function(e){
                        alert("数据库连接失败!");
                    }
                    dbConnect.onupgradeneeded=function(e){
                        idb=e.target.result;
                        var name="user";
                        var optionParams={keyPath:"userid",autoIncrement:false};
                        var store=idb.createObjectStore(name,optionParams);
                        alert("对象仓库创建成功!");
                    }
                }
        </script>
    </head>
    <body>
        <input type="button" value="创建对象仓库" onclick="CreateStorge()" />
    </body>
</html>
复制代码

 本文转自邹琼俊博客园博客,原文链接:http://www.cnblogs.com/jiekzou/p/6938887.html,如需转载请自行联系原作者

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
从远程Oracle服务器上同步复制数据到本地备份库
create or replace PROCEDURE "SYNC_DATA_FROM_DBLINK_DB" AS BEGIN DECLARE CURSOR c_TabNames IS SELECT TNAME FROM TAB; v_TabName c_TabNames%ROWTYPE; v_SQL VARCHAR2(500); v_rowcount NUMB
1654 0
eclipse部署web项目至本地的tomcat但在webapps中找不到
一、发现问题 在eclipse中新建Dynamic Web Project,配置好本地的tomcat并写好代码后选择Run on Server,但运行后发现在tomcat的安装目录下的webapps并没有出现所建立的工程名字。   二、验证 很明显项目并没有自动部署到Tomcat的Webapps中而是部署在了别的容器中。在内置浏览器中输入http://localhost:8080/
1305 0
HTML标签 -base标签|学习笔记
快速学习HTML标签 -base标签
43 0
WebService |学习笔记
快速学习 WebService
42 0
HTML标签- 锚点定位|学习笔记
快速学习HTML标签- 锚点定位
53 0
WEB 调试|学习笔记
快速学习 WEB 调试
15 0
HTML标签- 图像标签|学习笔记
快速学习HTML标签- 图像标签
35 0
+关注
2968
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
OceanBase 入门到实战教程
立即下载
阿里云图数据库GDB,加速开启“图智”未来.ppt
立即下载
实时数仓Hologres技术实战一本通2.0版(下)
立即下载