HTML 5浏览器端数据库

时间:2022-06-12 06:29:51

HTML 5浏览器端数据库
为什么要使用浏览器端数据库:随着浏览器处理能力的增强,越来越多的双喜鸟网站开始考虑在客户端存储大量的数据,这可以减少用户从服务器获取数据的等待时间。

1。本地存储-本地存储可以长时间存储数据而不受时间限制。

可以存储:数组、JSON数据、图片、脚本、样式文件

复制代码
功能测试()。{
如果(窗口。localstorage)//确定浏览器是否支持localstorage
var ls=窗口。本地存储;
LSsetitem(“name”,“zhang san”);和//设置值
var名称=ls。getItem(“name”);值
LSremoveitem(“name”);//删除数据
}否则{
alert(“浏览器不支持本地存储”);
}
}
复制代码
限制:存储数据不能在子域名之间共享;超出存储范围,可以使用LRU和FIFO技术进行处理;

2。会话存储生命周期是当前窗口或选项卡。一旦窗口或选项卡永久关闭,通过会话存储存储存储的所有数据将被清空。

索引数据库

1。使用indexeddb的原因

现有的浏览器端数据存储方案不适合存储大量数据:cookie不超过4KB,每个请求都将被发送回服务器;windows.name属性不安全。

没有统一的标准,本地存储在2.5MB到10MB之间(不同的浏览器)。因此需要一种新的解决方案,这就是indexeddb的背景。

2。什么是索引数据库

一般来说,indexeddb是一个浏览器端数据库,可以由Web脚本创建和操作。它允许存储大量数据,提供查找接口,还可以索引。

这些是本地存储没有的。就数据库类型而言,indexeddb不是关系数据库(它不支持SQL查询语句),而是更接近于nosql数据库。

三。索引数据库的特性。

(1)键值对存储。indexeddb使用对象存储来存储数据。所有类型的数据都可以直接存储,包括javascript对象。在对象仓库中,

数据以“键值对”的形式存储。每个数据都有其对应的键名。密钥名是唯一的,不能重复,否则将引发错误。

(2)异步性。indexeddb操作不会锁定浏览器,与同步的本地存储不同,用户仍然可以执行其他操作。异步设计的目的是防止大量数据的读写,降低网页的性能。

(3)支持服务。indexeddb支持事务,这意味着在一系列操作步骤中,只要一个步骤失败,整个事务就会被取消。数据库返回到事务发生之前的状态,并且不存在只重写部分数据的情况。

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

(5)indexeddb的存储空间比本地存储大得多,一般不小于250MB。IE的存储容量为250MB,Chrome和Opera占剩余空间的百分比,而Firefox则没有容量限制。

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

目前,Chrome27+、火狐21+、Opera15+和IE10+支持这个API,但Safari根本不支持它。

4。使用

a.确定浏览器是否支持索引数据库

查看代码
B.创建/打开数据库

查看代码
c.关闭数据库

查看代码
D.数据操作

在对新数据库执行任何操作之前,事务需要启动一个事务。在事务中,需要指定存储事务跨度的对象。
交易有三种模式
只读:只读,不能修改数据库数据,可以同时执行
读写:读写,允许你读写
版本更改:VerionChange

D1。添加数据

查看代码
D2。按键获取数据

查看代码
D3。读取集合

查看代码
D4。更新数据

查看代码
D5。删除数据

查看代码
D6。空数据

查看代码

好文章应该引起我的注意。