html5 浏览器端数据库

分享到:

一、为什么使用浏览器端数据库

   随着浏览器的处理能力不断增强,越来越多的网站开始考虑,将大量数据储存在客户端,这样可以减少用户等待从服务器获取数据的时间。

二、使用IndexedDB的原因

      现有的浏览器端数据储存方案,都不适合储存大量数据:cookie不超过4KB,且每次请求都会发送回服务器端;Window.name属性缺乏安全性,

 且没有统一的标准;localStorage在2.5MB到10MB之间(各家浏览器不同)。所以,需要一种新的   解  决方案,这就是IndexedDB诞生的背景。

三、什么是IndexedDB

        通俗地说,IndexedDB就是浏览器端数据库,可以被网页脚本程序创建和操作。它允许储存大量数据,提供查找接口,还能建立索引。

  这些都是localStorage所不具备的。就数据库类型而言,IndexedDB不属于关系型数据库(不支持SQL查询语   句),更接近NoSQL数据库。

四、IndexedDB的特点。

(1)      键值对储存。 IndexedDB内部采用对象仓库(object store)存放数据。所有类型的数据都可以直接存入,包括JavaScript对象。在对象仓库中,

        数据以“键值对”的形式保存,每一个数据都有对应的键名,键名是独一无二的,不能有重复,否则会抛出一个错误。

(2)异步。 IndexedDB操作时不会锁死浏览器,用户依然可以进行其他操作,这与localStorage形成对比,后者的操作是同步的。异步设计是为了防止大量数据的读写,拖慢网页的表现。

(3)支持事务。 IndexedDB支持事务(transaction),这意味着一系列操作步骤之中,只要有一步失败,整个事务就都取消,数据库回到事务发生之前的状态,不存在只改写一部分数据的情况。

(4)同域限制 IndexedDB也受到同域限制,每一个数据库对应创建该数据库的域名。来自不同域名的网页,只能访问自身域名下的数据库,而不能访问其他域名下的数据库。

(5)储存空间大 IndexedDB的储存空间比localStorage大得多,一般来说不少于250MB。IE的储存上限是250MB,Chrome和Opera是剩余空间的某个百分比,Firefox则没有上限。

(6)支持二进制储存。 IndexedDB不仅可以储存字符串,还可以储存二进制数据。

目前,Chrome 27+、Firefox 21+、Opera 15+和IE 10+支持这个API,但是Safari完全不支持。

 

昵    称:
验证码:

相关文档:

  • IE(IE6/IE7/IE8)支持HTML5标签--20150216
    让IE(ie6/ie7/ie8)支持HTML5元素,我们需要在HTML头部添加以下JavaScript,这是一个简单的document.createElement声明,利用条件注释针对IE来调用...
  • html5(六) 地理位置
    http://www.cnblogs.com/lhb25/archive/2012/07/10/html5-geolocation-api-demo.html http://www.w3school.com.cn/html5/html_5_geolocation.asp...
  • [html5/css3]html5本地化存储Web storage
    <!DOCTYPEhtml> <html> <headlang="en"> <metacharset="UTF-8"> <title>html5本地化存储WebStorage</title> <scripttype="...
  • html script的async属性
    一般网页加载的script标签时,没有带async属性,浏览器渲染时会从上至下依次进行,当某一个script解析缓慢会影响后续的网页的渲染,在h...
  • Html5 Web Workers
    web worker 是运行在后台的 JavaScript,不会影响页面的性能。web worker 是运行在后台的 JavaScript,独立于其他脚本,不会影响页面的性能。您可以继续做任何愿意做的事情:点击、选取内容等等,而此时 web worker 在后台运行。...
  • php文件下载
    1<?php 2//对函数的说明 3//参数说明$file_name文件名 4//$file_sub_dir:下载文件的子路径'"/xxx/xxx/" 5functiondown_file($file_name,$file_sub_dir){ 6//死去活...
  • HTML6 展望
    HTML5概述 HTML5是HTML语言最受欢迎的版本之一,它支持音频和视频、离线存储、移动端、和标签属性等等。还提供了<article>,<section>...
  • HTMl5的sessionStorage和localStorage
    文章来源:http://www.cnblogs.com/yuzhongwusan/archive/2011/12/19/2293347.html感谢分享! html5中的WebStorage包括了两种存储方式:sessionStorage和localStorage...
  • html5 拖放到购物车
    <!doctypehtml> <html> <head> <metacharset="utf-8"> <title>无标题文档</title> <style> *{ margin:0px; padding:0px;...
  • HTML5 桌面提示
    <!DOCTYPEhtml> <html> <head> <metacharset="utf-8"/> <title>DesktopNotification</title> </head> <body>...
  • placeholder属性改变默认字体颜色(浅灰色)
    html5为input添加了原生的占位符属性placeholder,高级浏览器都支持这个属性,例如: <inputtype="text"placeholder="博客园"value="">...
  • html5(四) canvas
    http://www.cnblogs.com/Gyoung/archive/2013/04/08/2994515.html...
  • head 头标签(转发)
    HTMLhead头标签 paddingme|04Oct2014...
  • 学习使用easelJS类库控制HTML5游戏角色的移动和跳跃
    ...
  • html5 css3 +zepto 做动画
    刚解除别人的案例,感觉像一座大山,如何才能啃完这座大山呢,可能到了山顶的时候,回头看看也许并没有想象中的可怕。现在看,真...
  • html5 阴影设置
    <body><canvasid="c1"width="400"height="400"></canvas><scripttype="text/javascript">window.onload=function(){varoC=document.get...
  • Flash学习初总结
    话说尝试了一周多的Flash编程,有些理解为什么很多程序员都不喜欢用Flash编程了。 首先,就是没有编程的难度,想要编好Flash,也就是...
  • html5页面开发中,模拟滚动条。
    第一次做手机端页面,遇到一个很奇葩的问题,做好的页面由于内容超出产生了滚动条,测试反馈给我说,页面在安卓系统中,有卡顿的...
  • html5 在移动端的缩放控制
    viewport语法介绍: 01 <!--htmldocument-->...
  • Html5的等学习
    看了w3c感觉是说明文档,没有详细的说明,然后就去看其他的 html5其实就是在html的基础上做了一些改变,感觉html5的推广还是需要时间的...