html5
html5HTML/XhtmlCSSXML/XSLTDreamweaver教程Frontpage教程心得技巧

Web Storage概述和本地数据库

发布时间：2022-05-17 发布网站：脚本宝典
脚本宝典收集整理的这篇文章主要介绍了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页面，代码如下：

Web Storage概述和本地数据库

Web Storage概述和本地数据库

<html><head><tITle></title><;meta charset="UTF-8" /><script tyPE="text/javascript">function saveSessiontorage(id) {VAR targat = document.getElementById(id);var str = targat.value;
                sessionStorage.setItem("msg", str);
            }function getSessionStorage(id) {var targat = document.getElementById(id);var msg = sessionStorage.getItem("msg");
                targat.innerHTML = msg;
            }function saveLocalStorage(id) {var targat = document.getElementById(id);var str = targat.value;
                localStorage.setItem("msg", str);
            }function getLocalStorage(id) {var targat = document.getElementById(id);var msg = localStorage.getItem("msg");
                targat.innerHTML = msg;
            }</script></head><body><p id="msg"></p><input type="text" id="txt" /><input type="button" value="存储数据" onclick="saveSessiontorage(&#39;txt')" /><input type="button" value="读取数据" onclick="getSessionStorage('msg')" /><p id="msg1"></p><p>    <input type="text" id="txt1" /></p><input type="button" value="Local存储数据" onclick="saveLocalStorage('txt1')" /><input type="button" value="Local读取数据" onclick="getLocalStorage('msg1')" /></body></html>
View Code

Web Storage概述和本地数据库

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

作为简单数据库来利用

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

新建Register.html页面，代码如下：

Web Storage概述和本地数据库

Web Storage概述和本地数据库

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><script type="application/javascript">function addUser () {var data=new Object;
                data.name=document.getElementById("txtName").value;
                data.phone=document.getElementById("txtPhone").value;
                data.address=document.getElementById("txtAddress").value;var str=JSON.stringify(data);
                localStorage.setItem(data.name,str);
                alert("注册成功");
            }function seArch (txt) {var filed=document.getElementById(txt).value;var str=localStorage.getItem(filed);var data=JSON.parse(str);var result="用户名："+data.name+"</br>"+"电话："+data.phone+"</br>"+"地址："+data.address
                document.getElementById("txtMsg").innerHTML=result;
            }</script></head><body><div>用户名:<input type="text" id="txtName" /></div><div>电话号码:<input type="text" id="txtPhone" /></div><div>地址:<input type="text" id="txtAddress" /></div><div><input type="button" value="注册" onclick="addUser()"></div><br /><div>用户名：<input type="text" id="txtSearch"><input type="button" value="Search" onclick="search('txtSearch')"/></div><div id="txtMsg"></div></body></html>
View Code

Web Storage概述和本地数据库

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，代码如下：

Web Storage概述和本地数据库

Web Storage概述和本地数据库

<!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 connDB () {var dbName="indexedDBTest";var dbVersion=1;var idb;var dbConnect=indexedDB.open(dbName,dbVersion);
                    dbConnect.onsuccess=function (e) {
                        idb=e.target.result;
                        alert("数据库连接成功！")
                    }
                    dbConnect.onerror=function(e){
                        alert("数据库连接失败！");
                    }
                }</script></head><body><input type="button" value="连接数据库"  onclick="connDB()"/></body></html>
View Code

Web Storage概述和本地数据库

数据库的版本更新

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

新建versionUpdate.html，代码如下：

Web Storage概述和本地数据库

Web Storage概述和本地数据库

<!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 VersionUpdate () {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 ts=e.target.transaction;var oldVersion=e.oldVersion;var newVersion=e.newVersion;
                        alert("数据库更新成功！旧版本号:"+oldVersion+"------新版本号："+newVersion);
                    }
                }</script></head><body><input type="button" value="更新数据库" onclick="VersionUpdate()" /></body></html>
View Code

Web Storage概述和本地数据库

Web Storage概述和本地数据库

创建对象仓库

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

新建createStorge.html，代码如下：

Web Storage概述和本地数据库

Web Storage概述和本地数据库

<!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>
View Code

以上就是Web Storage概述和本地数据库的详细内容，更多请关注脚本宝典其它相关文章！

脚本宝典总结

以上是脚本宝典为你收集整理的Web Storage概述和本地数据库全部内容，希望文章能够帮你解决Web Storage概述和本地数据库所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。
标签：h5StorageStorageweb数据库数据库本地本地
猜你在找的html5相关文章
其他相关热搜词更多
phpjavapython程序员loadpost-format-gallerydivString参数开发ListcapMapClass工具安装SQL数据库资源this
全站导航更多
html5HTML/XhtmlCSSXML/XSLTDreamweaver教程Frontpage教程心得技巧JavaScriptASP.NETPHP编程正则表达式AJAX相关ASP编程JSP编程编程10000问CSS/HTMLFlexvbsDOS/BAThtahtcpythonperl游戏相关VBA远程脚本ColdFusionMsSqlMysqlmariadboracleDB2mssql2008mssql2005SQLitePostgreSQLMongoDB星外虚拟主机华众虚拟主机Linuxwin服务器FTP服务器DNS服务器Tomcatnginxzabbix云和虚拟化bios系统安装系统系统进程Windows系列LINUXRedHat/CentosUbuntu/DebianFedoraSolaris红旗Linux建站经验微信营销网站优化网站策划网络赚钱网络创业站长故事alexa域名photoshop教程摄影教程Fireworks教程CorelDraw教程Illustrator教程Painter教程Freehand教程IndesignSketch笔记本主板内存CPU存储显卡显示器光存储鼠标键盘平板电脑安全教程杀毒防毒安全设置病毒查杀脚本攻防入侵防御工具使用业界动态Exploit漏洞分析
最新html5教程
热门html5教程