three.js 场景编辑器 源码解析（四）

      场景中编辑的模型会很多，而且文件会很大，使用浏览器本身的数据库存放这些数据是一个好方法，相比于localstring，浏览器本身的数据库支持大文件存储，支持事务，用起来更合适，编辑器使用了浏览器自带的indexDB数据库，代码如下：

//存储类（序列化类），使用的是浏览器数据库，这个数据库是否会拖慢编辑器的速度
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 = 'threejs-editor';
	var version = 1;

	//数据库句柄
	var database;

	return {
		//初始化
		init: function ( callback ) {
			//打开数据库
			var request = indexedDB.open( name, version );
			//数据库升级回调
			request.onupgradeneeded = function ( event ) {

				var db = event.target.result;

				if ( db.objectStoreNames.contains( 'states' ) === false ) {

					db.createObjectStore( 'states' );

				}

			};

			//数据库操作成功
			request.onsuccess = function ( event ) {

				database = event.target.result;

				callback();

			};

			//数据库操作错误
			request.onerror = function ( event ) {

				console.error( 'IndexedDB', event );

			};


		},

		//异步形式获取数据
		get: function ( callback ) {

			var transaction = database.transaction( [ 'states' ], 'readwrite' );
			var objectStore = transaction.objectStore( 'states' );
			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( [ 'states' ], 'readwrite' );
			var objectStore = transaction.objectStore( 'states' );
			//存放数据
			var request = objectStore.put( data, 0 );
			//数据陈工提示
			request.onsuccess = function ( event ) {

				console.log( '[' + /\d\d\:\d\d\:\d\d/.exec( new Date() )[ 0 ] + ']', 'Saved state to IndexedDB. ' + ( performance.now() - start ).toFixed( 2 ) + 'ms' );

			};

		},

		//清空数据
		clear: function () {

			if ( database === undefined ) return;

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

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

			};

		}

	};

};