浏览器的indexedDB的用法

最新推荐文章于 2024-08-08 10:00:07 发布

海涛高软

最新推荐文章于 2024-08-08 10:00:07 发布

阅读量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>