HTML5技术

HTML5笔记3——Web Storage和本地数据库 - 邹琼俊

字号+ 作者:H5之家 来源:H5之家 2017-06-07 16:00 我要评论( )

上一篇:HTML5笔记2HTML5音/视频标签详解 Web Storage概述 在HTML5中,除了Canvas元素之外,另一个新增的非常重要的功能是可以再客户端本地保存数据的Web Storage功能,之前可以使用Cookies在客户端 保存诸如用户名等简单用户信息,但通过长期使用,人们发现

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

Web Storage概述

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

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

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

Web Storage功能。

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

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

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

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

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

开发工具我使用HBuilder.exe

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

saveSessiontorage(id) { document.getElementById(id); targat.value; sessionStorage.setItem(, str); } function getSessionStorage(id) { document.getElementById(id); ); targat.innerHTML = msg; } function saveLocalStorage(id) { document.getElementById(id); targat.value; localStorage.setItem(, str); } function getLocalStorage(id) { document.getElementById(id); ); targat.innerHTML = msg; }

View Code

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

作为简单数据库来利用

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

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

addUser () { Object; data.name).value; data.phone).value; data.address).value; JSON.stringify(data); localStorage.setItem(data.name,str); alert(); } function search (txt) { document.getElementById(txt).value; localStorage.getItem(filed); JSON.parse(str); data.address document.getElementById(result; } 用户名:电话号码:地址:用户名:

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,代码如下:

// db.transaction(function(tx) { // tx.executeSql("") //(){});

HTML5 indexedDB数据库

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

新建IndexedDBTest.html,代码如下:

window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB; window.IDBTransaction window.webkitIDBTransaction || window.msIDBTransaction; window.IDBKeyRange window.webkitIDBKeyRange || window.msIDBKeyRange; function connDB () { ; ; var idb; indexedDB.open(dbName,dbVersion); dbConnect.onsuccess=function (e) { idb=e.target.result; alert() } dbConnect.onerror=function(e){ alert(); } }

View Code

数据库的版本更新

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

新建versionUpdate.html,代码如下:

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • WebSocket+MSE——HTML5 直播技术解析 - 又拍云

    WebSocket+MSE——HTML5 直播技术解析 - 又拍云

    2017-06-07 17:00

  • Html5语义化标签详解及其兼容性处理 - catEatBird

    Html5语义化标签详解及其兼容性处理 - catEatBird

    2017-06-02 12:07

  • 电子书 html5与css3基础教程第8版.pdf - pdfbook

    电子书 html5与css3基础教程第8版.pdf - pdfbook

    2017-05-31 16:11

  • HTMLcanvas矩形阵雨 - 学习笔记 - 唯爱小面包

    HTMLcanvas矩形阵雨 - 学习笔记 - 唯爱小面包

    2017-05-27 10:01

网友点评
o