当前位置:Gxlcms > 数据库问题 > Html5的Web存储和WebSql

Html5的Web存储和WebSql

时间:2021-07-01 10:21:17 帮助过:3人阅读

使用HTML5可以在本地存储用户的浏览数据。

早些时候,本地存储使用的是cookies。但是Web 存储需要更加的安全与快速. 这些数据不会被保存在服务器上,但是这些数据只用于用户请求网站数据上.它也可以存储大量的数据,而不影响网站的性能.

数据以 键/值 对存在, web网页的数据只允许该网页访问使用。

 

本地存储的背景

 众所周知Html4时代Cookie的大小、格式、存储数据格式等限制,网站应用如果想在浏览器端存储用户的部分信息,那么只能借助于Cookie。但是Cookie的这些限制,也就导致了Cookie只能存储一些ID之类的标识符等简单的数据,复杂的数据就更别扯了。

下面是Cookie的限制:

  1. 1, 大多数浏览器支持最大为 4096 字节的 Cookie。
  2. 2, 浏览器还限制站点可以在用户计算机上存储的 Cookie 的数量。大多数浏览器只允许每个站点存储 20 个 Cookie;如果试图存储更多 Cookie,则最旧的 Cookie 便会被丢弃。
  3. 3, 有些浏览器还会对它们将接受的来自所有站点的 Cookie 总数作出绝对限制,通常为 300 个。
  4. 4, Cookie默认情况都会随着Http请求发送到后台服务器,但并不是所有请求都需要Cookie的,比如:js、css、图片等请求则不需要cookie。

Html5的设计者们,一开始就为Html5能成为富客户端做好了准备。为了破解Cookie的一系列限制,Html5通过JS的新的API就能直接存储大量的数据到客户端浏览器,而且支持复杂的本地数据库,让JS简直就是逆天了。Html5支持两种的WebStorage,一种是永久性的本地存储(localStorage),另外一种是会话级别的本地存储(sessionStorage)。

 

代码加注释来了......

  1. <span style="font-family: ‘Microsoft YaHei‘;"><span style="color: #008000;">/*</span><span style="color: #008000;">*
  2. * sessionStorage,localStorage统一的操作方法:
  3. * (1)setItem(key,value):添加本地存储数据。
  4. * (2)getItem(key):通过key获取相应的Value。
  5. * (3)removeItem(key):通过key删除本地数据。
  6. * (4)clear():清空数据。
  7. </span><span style="color: #008000;">*/</span>
  8. <span style="color: #008000;">/*</span><span style="color: #008000;">*
  9. * 会话级别的本地存储:sessionStorage
  10. </span><span style="color: #008000;">*/</span><span style="color: #000000;">
  11. sessionStorage.setItem(</span>11,"a"<span style="color: #000000;">);
  12. </span><span style="color: #0000ff;">var</span> numLocal = sessionStorage.getItem(11<span style="color: #000000;">);
  13. console.info(</span>"sessionStorage会话级别的本地存储"+<span style="color: #000000;">numLocal);
  14. sessionStorage.setItem(</span>22,"b"<span style="color: #000000;">);
  15. console.info(</span>"sessionStorage会话级别的本地存储个数:"+<span style="color: #000000;">sessionStorage.length);
  16. sessionStorage.removeItem(</span>22<span style="color: #000000;">);
  17. console.info(</span>"sessionStorage会话级别的本地存储个数:"+<span style="color: #000000;">sessionStorage.length);
  18. </span><span style="color: #008000;">//</span><span style="color: #008000;">sessionStorage.clear();</span>
  19. console.info("sessionStorage会话级别的本地存储个数:"+<span style="color: #000000;">sessionStorage.length);
  20. </span><span style="color: #008000;">/*</span><span style="color: #008000;">*
  21. * 永久本地存储:localStorage
  22. </span><span style="color: #008000;">*/</span><span style="color: #000000;">
  23. localStorage.setItem(</span>"a",11<span style="color: #000000;">);
  24. </span><span style="color: #0000ff;">var</span> numLocal = localStorage.getItem("a"<span style="color: #000000;">);
  25. console.info(</span>"localStorage永久本地存储"+<span style="color: #000000;">numLocal);
  26. localStorage.setItem(</span>"b",22<span style="color: #000000;">);
  27. console.info(</span>"localStorage本地存储个数:"+<span style="color: #000000;">localStorage.length);
  28. localStorage.removeItem(</span>"a"<span style="color: #000000;">);
  29. console.info(</span>"localStorage本地存储个数:"+<span style="color: #000000;">localStorage.length);
  30. </span><span style="color: #008000;">//</span><span style="color: #008000;">localStorage.clear();</span>
  31. console.info("localStorage本地存储个数:"+localStorage.length);</span>

 

HTML5 Web SQL 数据库

Web SQL 数据库 API 并不是 HTML5 规范的一部分,但是它是一个独立的规范,引入了一组使用 SQL 操作客户端数据库的 APIs。

如果你是一个 Web 后端程序员,应该很容易理解 SQL 的操作。

Web SQL 数据库可以在最新版的 Safari, Chrome 和 Opera 浏览器中工作。

 

代码加注释来了......

  1. <span style="font-family: ‘Microsoft YaHei‘;"><span style="color: #008000;">/*</span><span style="color: #008000;">*
  2. * 本地数据库
  3. * 操作本地数据库的最基本的步骤是:
  4. * 第一步:openDatabase方法:创建一个访问数据库的对象。
  5. * 第二步:使用第一步创建的数据库访问对象来执行transaction方法,通过此方法可以设置一个开启事务成功的事件响应方法,在事件响应方法中可以执行SQL.
  6. * 第三步:通过executeSql方法执行查询,当然查询可以是:CRUD。
  7. </span><span style="color: #008000;">*/</span>
  8. <span style="color: #0000ff;">function</span><span style="color: #000000;"> dataBaseCRUD(){
  9. </span><span style="color: #0000ff;">var</span> dataBase = openDatabase("school", "1.0", "学校数据库", 1024 * 1024, <span style="color: #0000ff;">function</span><span style="color: #000000;"> () {
  10. console.info(</span>"创建学校数据库成功!"<span style="color: #000000;">);
  11. });
  12. </span><span style="color: #008000;">/*</span><span style="color: #008000;">*
  13. * (1)openDatabase方法打开一个已经存在的数据库,如果数据库不存在,它还可以创建数据库。几个参数意义分别是:
  14. * 1,数据库名称。
  15. * 2,数据库的版本号,目前来说传个1.0就可以了,当然可以不填;
  16. * 3,对数据库的描述。
  17. * 4,设置分配的数据库的大小(单位是kb)。
  18. * 5,回调函数(可省略)。
  19. </span><span style="color: #008000;">*/</span>
  20. <span style="color: #0000ff;">if</span>(!<span style="color: #000000;">dataBase){
  21. console.info(</span>"当前浏览器不支持Html5本地数据库"<span style="color: #000000;">);
  22. </span><span style="color: #0000ff;">return</span> <span style="color: #0000ff;">false</span><span style="color: #000000;">;
  23. }</span><span style="color: #0000ff;">else</span><span style="color: #000000;">{
  24. </span><span style="color: #0000ff;">debugger</span><span style="color: #000000;">;
  25. dataBase.transaction(</span><span style="color: #0000ff;">function</span> (ts) {<span style="color: #008000;">//</span><span style="color: #008000;">启动一个事务,并设置回调函数</span>
  26. ts.executeSql("create table if not exists Student(id int,name text null,age int,sex text null)",[],<span style="color: #0000ff;">function</span><span style="color: #000000;">(ts,result){
  27. console.info(</span>"创建数据库成功"+<span style="color: #000000;">result);
  28. },</span><span style="color: #0000ff;">function</span><span style="color: #000000;">(ts,message){
  29. console.info(</span>"创建数据库失败"<span style="color: #000000;">,message);
  30. });
  31. });
  32. dataBase.transaction(</span><span style="color: #0000ff;">function</span><span style="color: #000000;"> (ts) {
  33. ts.executeSql(</span>"insert into Student(id,name,age,sex) values(?,?,?,?) ", [1,"小明", 21, "男"], <span style="color: #0000ff;">function</span><span style="color: #000000;"> (ts, result) {
  34. console.info(</span>"插入数据成功!"+<span style="color: #000000;">result);
  35. }, </span><span style="color: #0000ff;">function</span><span style="color: #000000;"> (ts, message) {
  36. console.info(</span>"插入数据失败!"+<span style="color: #000000;">message);
  37. });
  38. });
  39. dataBase.transaction(</span><span style="color: #0000ff;">function</span><span style="color: #000000;"> (ts) {
  40. ts.executeSql(</span>"insert into Student(id,name,age,sex) values(?,?,?,?) ", [2,"小红", 20, "女"], <span style="color: #0000ff;">function</span><span style="color: #000000;"> (ts, result) {
  41. console.info(</span>"插入数据成功!"+<span style="color: #000000;">result);
  42. }, </span><span style="color: #0000ff;">function</span><span style="color: #000000;"> (ts, message) {
  43. console.info(</span>"插入数据失败!"+<span style="color: #000000;">message);
  44. });
  45. });
  46. dataBase.transaction(</span><span style="color: #0000ff;">function</span><span style="color: #000000;"> (ts) {
  47. ts.executeSql(</span>"update Student set name = ? where id = ? ", ["小红s",2], <span style="color: #0000ff;">function</span><span style="color: #000000;"> (ts, result) {
  48. console.info(</span>"更新数据成功!"+<span style="color: #000000;">result);
  49. }, </span><span style="color: #0000ff;">function</span><span style="color: #000000;"> (ts, message) {
  50. console.info(</span>"更新数据失败!"+<span style="color: #000000;">message);
  51. });
  52. });
  53. dataBase.transaction(</span><span style="color: #0000ff;">function</span><span style="color: #000000;"> (ts) {
  54. ts.executeSql(</span>"delete from Student where id = ? ", [2], <span style="color: #0000ff;">function</span><span style="color: #000000;"> (ts, result) {
  55. console.info(</span>"删除数据成功!"+<span style="color: #000000;">result);
  56. }, </span><span style="color: #0000ff;">function</span><span style="color: #000000;"> (ts, message) {
  57. console.info(</span>"删除数据失败!"+<span style="color: #000000;">message);
  58. });
  59. });
  60. dataBase.transaction(</span><span style="color: #0000ff;">function</span><span style="color: #000000;"> (ts) {
  61. ts.executeSql(</span>"select * from Student ", [], <span style="color: #0000ff;">function</span><span style="color: #000000;"> (ts, result) {
  62. </span><span style="color: #0000ff;">if</span><span style="color: #000000;"> (result) {
  63. </span><span style="color: #0000ff;">for</span> (<span style="color: #0000ff;">var</span> i = 0; i < result.rows.length; i++<span style="color: #000000;">) {
  64. console.info((result.rows.item(i)));
  65. }
  66. }
  67. console.info(</span>"查询数据成功!"<span style="color: #000000;">);
  68. }, </span><span style="color: #0000ff;">function</span><span style="color: #000000;"> (ts, message) {
  69. console.info(</span>"查询数据失败!"+<span style="color: #000000;">message);
  70. });
  71. });
  72. }
  73. </span><span style="color: #008000;">/*</span><span style="color: #008000;">*
  74. * (2)db.transaction方法可以设置一个回调函数,此函数可以接受一个参数就是我们开启的事务的对象。然后通过此对象可以进行执行Sql脚本,跟下面的步骤可以结合起来。
  75. * (3)通过executeSql方法执行查询。
  76. * ts.executeSql(sqlQuery,[value1,value2..],dataHandler,errorHandler)
  77. * 参数说明:
  78. * 1,sqlQuery:需要具体执行的sql语句,可以是create、select、update、delete;
  79. * 2,[value1,value2..]:sql语句中所有使用到的参数的数组,在executeSql方法中,将s>语句中所要使用的参数先用“?”代替,然后依次将这些参数组成数组放在第二个参数中
  80. * 3,dataHandler:执行成功是调用的回调函数,通过该函数可以获得查询结果集;
  81. * 4,errorHandler:执行失败时调用的回调函数;
  82. *
  83. </span><span style="color: #008000;">*/</span><span style="color: #000000;">
  84. }
  85. dataBaseCRUD();</span></span>

 

Html5的Web存储和WebSql

标签:

人气教程排行