浏览器的indexedDB的用法

最新推荐文章于 2024-05-16 21:03:20 发布

海涛高软

最新推荐文章于 2024-05-16 21:03:20 发布

阅读量1.3k

点赞数 1

分类专栏： CesiumJS

本文链接：https://blog.csdn.net/qq_15267341/article/details/113770763

版权

CesiumJS 专栏收录该内容

74 篇文章 2 订阅

订阅专栏

IndexedDB和LocalStorage都是用来在浏览器里存储数据，但它们使用不同的技术，有不同的用途，你需要根据自己的情况适当的选择使用哪种。LocalStorage是用key-value键值模式存储数据，但跟IndexedDB不一样的是，它的数据并不是按对象形式存储。它存储的数据都是字符串形式。如果你想让LocalStorage存储对象，你需要借助JSON.stringify()能将对象变成字符串形式，再用JSON.parse()将字符串还原成对象。但如果要存储大量的复杂的数据，这并不是一种很好的方案。毕竟，localstorage就是专门为小数量数据设计的，它的api是同步的。

IndexedDB很适合存储大量数据，它的API是异步调用的。IndexedDB使用索引存储数据，各种数据库操作放在事务中执行。IndexedDB甚至还支持简单的数据类型。IndexedDB比localstorage强大得多，但它的API也相对复杂。

对于简单的数据，你应该继续使用localstorage，但当你希望存储大量数据时，IndexedDB会明显的更适合，IndexedDB能提供你更为复杂的查询数据的方式。

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <title>Document</title>
    <style>

    </style>
</head>

<body>

<script>
	var Storage = function () {

		var indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;

		if (indexedDB === undefined) {

			console.warn( 'Storage: IndexedDB not available.' );
			return {
				init: function () {
				}, get: function () {
				}, set: function () {
				}, clear: function () {
				}
			};

		}
		var name = 'wangliping03';
		var version = 1;
		var database;
		return {
			init: function ( callback ) {
				//open方法两个参数：第一个参数是数据库，第二个参数是数据库的版本
				var request = indexedDB.open( name, version );
				request.onupgradeneeded = function ( event ) {
					console.log("数据库第一次创建的时候，会被触发 ");
					var db = event.target.result;
					if (db.objectStoreNames.contains( 'person' ) === false) {
						//新增一张叫做states的表格,主键是id
                        //autoIncrement设置自增长
						db.createObjectStore( 'person' );
					}
				};
				//打开数据库成功
				request.onsuccess = function ( event ) {
					console.log("数据库打开成功");
					database = event.target.result;
					//打开成功之后会回调这个方法
					callback();
				};
				//打开数据库失败
				request.onerror = function ( event ) {
					console.log("数据库打开失败");
					console.error( 'IndexedDB', event );
				};
			},

			get: function ( callback ) {
				//插入数据，需要开启一个事务，并且要指定表格名称和操作模式（只读或读写)
				var transaction = database.transaction( [ 'person' ], 'readwrite' );
				var objectStore = transaction.objectStore( 'person' );
				var request = objectStore.get( 0 ); //可以看出异步回调
				request.onsuccess = function ( event ) {
					callback( event.target.result );
				};
			},

			set: function ( data, callback ) {
				var start = performance.now();
				var transaction = database.transaction( [ 'person' ], 'readwrite' );
				var objectStore = transaction.objectStore( 'person' );
				var request = objectStore.put( data, 0 );  //可以看出异步回调
				request.onsuccess = function ( event ) {
					callback();
					console.log( '[' + /\d\d\:\d\d\:\d\d/.exec( new Date() )[0] + ']', '保存用时：' + ( performance.now() - start ).toFixed( 2 ) + 'ms' );
				};
			},

			clear: function () {

				if (database === undefined) return;

				var transaction = database.transaction( [ 'person' ], 'readwrite' );
				var objectStore = transaction.objectStore( 'person' );
				var request = objectStore.clear();
				request.onsuccess = function ( event ) {

					console.log( '[' + /\d\d\:\d\d\:\d\d/.exec( new Date() )[0] + ']', 'Cleared IndexedDB.' );

				};

			}

		};

	};

	var sto = new Storage();
	sto.init( function () {
        //注意添加和获取信息代码写在init的回调里
		sto.set( {id:5,name:"xuhaitao-hunk"}, function () {
			console.log( "保存数据成功" );
		} );
		sto.get( function ( result ) {
			console.log( "获取数据结果：", result );
		} );

	} );

</script>
</body>

</html>

IndexedDB 具有以下特点。

（1）键值对储存。 IndexedDB 内部采用对象仓库（object store）存放数据。所有类型的数据都可以直接存入，包括 JavaScript 对象。对象仓库中，数据以"键值对"的形式保存，每一个数据记录都有对应的主键，主键是独一无二的，不能有重复，否则会抛出一个错误。

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

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

（4）同源限制 IndexedDB 受到同源限制，每一个数据库对应创建它的域名。网页只能访问自身域名下的数据库，而不能访问跨域的数据库。

（5）储存空间大 IndexedDB 的储存空间比 LocalStorage 大得多，一般来说不少于 250MB，甚至没有上限。

（6）支持二进制储存。 IndexedDB 不仅可以储存字符串，还可以储存二进制数据（ArrayBuffer 对象和 Blob 对象）。

FR:徐海涛（hunk Xu)
QQ技术交流群：386476712

海涛高软

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
浏览器的indexedDB的用法

<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>Document</title> <style> </style></head&gt.
复制链接

扫一扫