html5数据本地存储方式,html5本地数据库存储到哪了
本地存储
1.1 本地存储由来的背景
由于HTML4时代cookie的大小、格式和存储数据格式的限制，网站应用要想在浏览器中存储用户的一些信息，只能使用cookie。然而，由于cookie的这些限制，cookie只能存储一些简单的数据，如ID等标识符。
以下是Cookie的限制：
大多数浏览器支持最大4096字节的Cookie。
浏览器还限制了网站可以在用户计算机上存储的Cookie的数量。大多数浏览器只允许每个网站存储20个Cookie；如果您尝试存储更多的cookie，最旧的cookie将被丢弃。
有些浏览器还对从所有网站接受的Cookie总数有绝对限制，通常是300个。
默认情况下，cookie会随Http请求一起发送到后台服务器，但并非所有请求都需要cookie。比如js、css、图片等请求都不需要cookies。
为了破解Cookie的一系列限制，HTML5可以通过JS的新API直接将大量数据存储到客户端浏览器，并且它支持复杂的本地数据库，使得JS更加高效。
Html5支持两种web存储：
永久本地存储(本地存储)
会话级本地存储
1.2 永久性的本地存储：localStorage
最新JS的API中加入了localStorage对象，方便用户在Web端存储永久存储的数据。而且数据不会随Http请求一起发送到后台服务器，存储数据的大小基本不用考虑，因为Html5标准中要求浏览器至少支持4MB。所以这完全颠覆了Cookie的限制，为Web应用在本地存储复杂的用户轨迹数据提供了非常便捷的技术支持。接下来，将介绍本地存储的常用方法。
LocalStorage提供了四种方法来辅助我们操作本地存储。
SetItem(key，value)添加本地存储的数据。两个参数，很简单，就不说了。
GetItem(key)通过键获取对应的值。
removeItem(key)通过键删除本地数据。
Clear()清除数据。
代码如下：
Script type=text/javascript //将键值数据添加到session storage local storage . setitem( demo key ， http://www . shiyanlou . com )；//通过key获取valuevardt=local storage . getitem( demokey )；alert(dt)；//清空所有键值数据。//local storage . clear()；警报(local storage . length)；/script1.3 会话级别的本地存储：sessionStorage
在HTML5: sessionStorage中添加了一个Js对象；通过这个对象，可以直接操作浏览器中存储的会话级WebStorage。sessionStorage中存储的数据首先是键值形式的，它与浏览器的当前会话相关。当会话结束时，数据将被自动清除，类似于没有设置过期时间的Cookie。
SessionStorage提供了四种方法来辅助我们在本地存储上做相关操作。
SetItem(key，value)添加本地存储的数据。两个参数，很简单，就不说了。
GetItem(key)通过键获取对应的值。
通过键删除本地数据。
Clear()清除数据。
代码如下：
script type= text/JavaScript //Add key-value data to session storage . setitem( demo key ， http://blog . it jeek . com )；//通过key获取value vardt=session storage . getitem( demokey )；alert(dt)；//清空所有键值数据。//session storage . clear()；alert(会话存储.长度)；/script1.4 强大的本地数据
虽然HTML5已经提供了强大的localStorage和sessionStorage，但是两者都只能提供简单数据结构的数据，对于复杂Web应用的数据却无能为力。遗憾的是，HTML5提供了一个浏览器端的数据库支持，允许我们直接通过JS API在浏览器端创建一个本地数据库，并且支持标准的SQL CRUD操作，使得离线的Web应用更容易存储结构化数据。接下来，我将介绍本地数据的相关API和用法。
操作本地数据库的最基本的步骤是：
步骤1: openDatabase方法：创建一个对象来访问数据库。
步骤2:使用步骤1中创建的数据库访问对象来执行事务方法。通过这个方法，可以设置一个成功启动事务的事件响应方法，SQL可以在事件响应方法中执行。
步骤3:通过executeSql方法执行查询。当然，查询可以是：CRUD。
接下来分别介绍一下相关的方法的参数和用法。
1.4.1 openDatabase方法
//Demo:获取或创建一个数据库，如果数据库不存在，则创建它。
Var=开放数据库(" student "，" 1.0 "，" student table "，1024 * 1024，function(){ })；open方法打开一个现有的数据库，如果openDatabase不存在，它也可以创建一个数据库。几个参数的含义是：
数据库名称。
数据库的版本号，目前发一个1.0就可以了，当然可以留空；
数据库的描述。
设置分配的数据库的大小(kb)。
回调函数(可以省略)。
在第一次调用时创建数据库，然后建立连接。
1.4.2 db.transaction方法
您可以设置一个回调函数，该函数可以接受一个参数，该参数是我们启动的事务的对象。然后可以通过这个对象执行SQL脚本。
1.4.3 executeSql方法执行查询
Ts.executesql (sqlquery，[值1，值2.]，datahandler，errorhandler)参数描述：
QlQuery:要执行的sql语句，可以创建、选择、更新和删除；
[[值1，值2.]:SQL]:SQL语句中使用的所有参数的数组。在executeSql方法中，S语句中使用的参数前面带有“？”而是将这些参数的数组依次放在第二个参数中；
DataHandler:执行成功时调用的回调函数，通过它可以得到查询结果集；
ErrorHandler:执行失败时调用的回调函数；
1.5 综合实例
头脚本src= Scripts/jquery-1。5 .1 .js type= text/JavaScript /script脚本type= text/JavaScript 函数init database(){ var db=getCurrentDb()；//初始化数据库如果(!db) {alert(您的浏览器不支持HTML5本地数据库);返回；} db。交易(函数(trans){//启动一个事务，并设置回调函数//执行创建表的结构化查询语言脚本反式。执行SQL( create table if not exists Demo(uName text null，title text null，words text null)，[]，function (trans，result) { }，function (trans，message) {//消息的回调函数警报（消息);});},函数(trans，result) { }，函数(trans，message){ })；} $(function () {//页面加载完成后绑定页面按钮的点击事件初始化数据库()；$(#btnSave ).单击(function(){ var txt name=$( # txt name ).val()；var txtTitle=$(#txtTitle ).val()；var txtWords=$(#txtWords ).val()；var db=getCurrentDb()；//执行结构化查询语言脚本，插入数据db。事务(函数(trans){ trans。执行SQL( insert into Demo(uName，title，words)值(？) ，[txtName，txtTitle，txtWords]，function (ts，data) { }，function (ts，message){ alert(message)；});});showAllTheData()；});});函数getCurrentDb() { //打开数据库，或者直接连接数据库参数：数据库名称，版本，概述，大小//如果数据库不存在那么创建之var db=openDatabase(myDb ， 1.0 ，是为了保存演示数据!, 1024 * 1024);返回db；} //显示所有数据库中的数据到页面上去函数showAllTheData() { $(#tblData ).empty()；var db=getCurrentDb()；db。事务(函数(trans){ trans。执行SQL( select * from Demo ，[]，function (ts，data){ if(data){ for(var I=0；我数据行长度；I){ appendDataToTable(数据。行。第(一)项；//获取某行数据的数据对象} } },函数(ts，message){ alert(message)；var tst=message })；});}函数appendDataToTable(data) {//将数据展示到表格里面//uName，title，words var txt name=data . uName var txt title=data . title var words=data . words var strHtml=" "；strHtml= trstrHtml= TD txt name /TD ；strHtml= TD txt title /TD ；strHtml= TD words /TD ；strHtml=/tr ；$(#tblData ).append(strHtml)；}/脚本/头体表tr td用户名：/TD TD input type= text name= txt name id= txt name 必需//td /tr tr td标题：/TD TD input type= text name= txt title id= txt title 必需//td /tr tr td留言：/TD TD input type= text name= txt words id= txt words 必需//TD/tr/table input type= button value=保存id= BTN保存/HR/input type= button value=展示所哟数据onclick= showAllTheData()；/table id= TBL数据/table/body/html总结
以上所述是小编给大家介绍的HTML5本地存储和本地数据库实例详解，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。