cari
Rumahhujung hadapan webTutorial H5HTML5中Web Sql的学习小结

HTML5中Web Sql的学习小结

Nov 13, 2018 am 09:35 AM
html5

本篇文章给大家带来的内容是介绍HTML5的Web Sql学习小结,让大家了解一些Web Sql的相关知识。有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。

在web系统或应用中,经常需要在本地存储一些数据,最早的在客户端存储数据用的是cookie(当然cookie主要还是用来保存用户的状态,业余可以干点保存本地数据的活),事实它并不适合用于保存客户端的本地数据,有以下几个原因:

1、每次请求服务器的时候都会增加不必要的流量消耗,因为每次请求服务器是都会讲cookie发送至服务器。

2、cookie的数据存储数据的规则,并不那么好用,结构也不够清晰。

3、最重要的一点是cookie的存储容量极小,每个cookie的长度不能超过4kb,超过时最早存储cookie的数据会被截掉超出的大小,显然是不太够用的。

随着HTML5的发展,后来又出现了localStorage与sessionStorage:

localStorage:永久存储,无论多久再次进入页面或者页面所在站点(可以使用clearI或removeItem方法删除),都能获取到存储的数据。

sessionStorage:临时存储,当关闭页面的时候会自动清除保存的数据。

事实上在平时工作或开发自己项目的时候,这两个用的是最多,至少目前这两个对象还是可以满足大部分项目本地存储的需求,虽然储存结构依然不够清晰,查询本地存储的数据上依然过于简单。

现在主要是总结一下,HTML5中新增的API-->Web Sql本地数据库技术,Web Sql数据库API实际上不是HTML5规范的组成部分,它是一个独立的规范,它可以使用与sql语言基本一致的语法做到本地数据库的增删改查,所以有后端开发经验的开发者很容易上手(需要指出的是,HTML5已经放弃了Web Sql Database数据库,该规范的指定工作已经停止),即便如此,基本上已经得到了大多数浏览器的支持。现在我们来介绍一下它的使用:

创建一个WebSql数据库:

openDatabase(数据库名,数据库版本号,描述,数据库大小,数据库创建成功的回调);
var mydb = openDatabase('myTeatDatabase',1,'this a Web Sql Database',1024*1024,function(){
     //数据库创建成功的回调,可省略
});

注:该方法返回一个数据库访问对象,当创建的数据库已经存在的时候,该 方法直接打开这个数据库。

创建一个事务:

mydb.transaction(function(tx){
    //该方法有一个事务对象参数供使用,该对象上有一系列为数据库增删改查的方法。
});

 执行一段操作:

tx.executeSql(执行数据库操作的sql语句,参数,数据库操作执行成功的回调,数据库操作执行失败的回调);

具体的数据库操作:

创建一个数据表:

tx.executeSql('create table if not exists table1 (id unique,name)', [], function(tx, result) { 
	//成功回调
	},function(error){
         //失败回调
	});

注:这条语句的意思是创建一个数据表table1,当数据库中不存在这张表的时候,如果语句中不加上"if not exists"的话,当想要创建的数据表在数据库中已经存在的时候会报错。

删除一个数据表:

tx.exexcteSql('drop table table1',[],function(tx,result){
      //删除成功时的回调
      },function(error){ 
         //删除失败时的回调
      });

在数据表中添加一条数据:

tx.executeSql('insert into table1 (id,name) values (1,'小明')',[],function(tx,result){
            //添加数据成功时的回调
            },function(error){
                  //添加数据失败时的回调
            });

删除数据表中的一条或多条数据:

tx.executeSql('delete from table1 where id=1',[],function(tx,result){
//删除成功时的回调
},function(error){
    //删除失败时的回调
});

或:

tx.executeSql('delete from table1 where id=?',[1],function(tx,result){
//删除成功时的回调
},function(error){
    //删除失败时的回调
});

更新数据库表里面的一条数据:       

tx.executeSql('updata table1 set name="小红" where id=1',[],function(tx,result){
   //数据更新成功时的回调
   },function(error){
       //数据更新失败时的回调
   });

查询满足查询条件的数据:     

tx.executeSql('select * from table',[],function(tx,result){
//查询成功时的回调
},function(error){
  //查询失败时的回调
});

注:查询成功的时候可以通过回调函数中的result参数的rows属性使用查询返回的数据。

这个例子只是最简单的一种查询语句,如果有更多复杂查询的需求的话可以参考sql语句。

总结:

  简单的总结一下,其实这个数据库API是比较简单,所有的增删改查都需要创建一个事务,在事务对象上执行所有操作,目前该API暂时不支持删除整个数据库,但是我们可以通过删除那个数据库里面的所有数据表来清空该数据库,以达到类似效果。

Atas ialah kandungan terperinci HTML5中Web Sql的学习小结. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan
Artikel ini dikembalikan pada:博客园. Jika ada pelanggaran, sila hubungi admin@php.cn Padam
Dekonstruktur Kod H5: Tag, Elemen, dan AtributDekonstruktur Kod H5: Tag, Elemen, dan AtributApr 18, 2025 am 12:06 AM

Kod HTML5 terdiri daripada tag, elemen dan atribut: 1. Tag mentakrifkan jenis kandungan dan dikelilingi oleh kurungan sudut, seperti. 2. Unsur terdiri daripada tag permulaan, kandungan dan tag akhir, seperti kandungan. 3. Atribut menentukan pasangan nilai utama dalam tag permulaan, meningkatkan fungsi, seperti. Ini adalah unit asas untuk membina struktur web.

Memahami Kod H5: Asas HTML5Memahami Kod H5: Asas HTML5Apr 17, 2025 am 12:08 AM

HTML5 adalah teknologi utama untuk membina laman web moden, menyediakan banyak elemen dan ciri -ciri baru. 1. HTML5 memperkenalkan unsur -unsur semantik seperti, dan lain -lain, yang meningkatkan struktur laman web dan SEO. 2. Sokongan unsur multimedia dan menanamkan media tanpa pemalam. 3. Borang meningkatkan jenis input baru dan sifat pengesahan, memudahkan proses pengesahan. 4. Menawarkan fungsi storan luar talian dan tempatan untuk meningkatkan prestasi laman web dan pengalaman pengguna.

Kod H5: Amalan Terbaik untuk Pemaju WebKod H5: Amalan Terbaik untuk Pemaju WebApr 16, 2025 am 12:14 AM

Amalan terbaik untuk kod H5 termasuk: 1. Gunakan pengisytiharan dan pengekodan watak yang betul; 2. Gunakan tag semantik; 3. Mengurangkan permintaan HTTP; 4. Gunakan pemuatan asynchronous; 5. Mengoptimumkan imej. Amalan ini dapat meningkatkan kecekapan, penyelenggaraan dan pengalaman pengguna halaman web.

H5: Evolusi piawaian dan teknologi webH5: Evolusi piawaian dan teknologi webApr 15, 2025 am 12:12 AM

Piawaian dan teknologi web telah berkembang dari HTML4, CSS2 dan JavaScript mudah setakat ini dan telah menjalani perkembangan yang ketara. 1) HTML5 memperkenalkan API seperti kanvas dan webstorage, yang meningkatkan kerumitan dan interaktiviti aplikasi web. 2) CSS3 menambah fungsi animasi dan peralihan untuk menjadikan halaman lebih berkesan. 3) JavaScript meningkatkan kecekapan pembangunan dan kebolehbacaan kod melalui sintaks moden node.js dan ES6, seperti fungsi anak panah dan kelas. Perubahan ini telah mempromosikan pembangunan pengoptimuman prestasi dan amalan terbaik aplikasi web.

Adakah H5 adalah singkat untuk HTML5? Meneroka butiranAdakah H5 adalah singkat untuk HTML5? Meneroka butiranApr 14, 2025 am 12:05 AM

H5 bukan sekadar singkatan HTML5, ia mewakili ekosistem teknologi pembangunan web moden yang lebih luas: 1. H5 termasuk HTML5, CSS3, JavaScript dan API dan Teknologi yang berkaitan; 2. Ia menyediakan pengalaman pengguna yang lebih kaya, interaktif dan lancar, dan boleh berjalan dengan lancar pada pelbagai peranti; 3. Menggunakan timbunan teknologi H5, anda boleh membuat laman web responsif dan fungsi interaktif yang kompleks.

H5 dan HTML5: Istilah yang biasa digunakan dalam pembangunan webH5 dan HTML5: Istilah yang biasa digunakan dalam pembangunan webApr 13, 2025 am 12:01 AM

H5 dan HTML5 merujuk kepada perkara yang sama, iaitu HTML5. HTML5 adalah versi kelima HTML, membawa ciri -ciri baru seperti tag semantik, sokongan multimedia, kanvas dan grafik, penyimpanan luar talian dan penyimpanan tempatan, meningkatkan ekspresi dan interaktiviti laman web.

Apa yang dirujuk oleh H5? Meneroka konteksApa yang dirujuk oleh H5? Meneroka konteksApr 12, 2025 am 12:03 AM

H5referstohtml5, apivotaltechnologyinwebdevelopment.1) html5introducesnewelementsandapisforrich, dynamicwebapplications.2) itsupp ortsmultimediawithoutplugins, enhancusexperienceaceacrossdevices.3) SemantikelementsImproveContentstructureandseo.4) H5'srespo

H5: Alat, Rangka Kerja, dan Amalan TerbaikH5: Alat, Rangka Kerja, dan Amalan TerbaikApr 11, 2025 am 12:11 AM

Alat dan kerangka yang perlu dikuasai dalam pembangunan H5 termasuk Vue.js, React dan Webpack. 1.vue.js sesuai untuk membina antara muka pengguna dan menyokong pembangunan komponen. 2. Leact mengoptimumkan rendering halaman melalui DOM maya, sesuai untuk aplikasi yang kompleks. 3.WebPack digunakan untuk pembungkusan modul dan mengoptimumkan beban sumber.

See all articles

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
1 bulan yang laluBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Tetapan grafik terbaik
1 bulan yang laluBy尊渡假赌尊渡假赌尊渡假赌
Akan R.E.P.O. Ada Crossplay?
1 bulan yang laluBy尊渡假赌尊渡假赌尊渡假赌

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

SecLists

SecLists

SecLists ialah rakan penguji keselamatan muktamad. Ia ialah koleksi pelbagai jenis senarai yang kerap digunakan semasa penilaian keselamatan, semuanya di satu tempat. SecLists membantu menjadikan ujian keselamatan lebih cekap dan produktif dengan menyediakan semua senarai yang mungkin diperlukan oleh penguji keselamatan dengan mudah. Jenis senarai termasuk nama pengguna, kata laluan, URL, muatan kabur, corak data sensitif, cangkerang web dan banyak lagi. Penguji hanya boleh menarik repositori ini ke mesin ujian baharu dan dia akan mempunyai akses kepada setiap jenis senarai yang dia perlukan.

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

Persekitaran pembangunan bersepadu PHP yang berkuasa