场景中编辑的模型会很多,而且文件会很大,使用浏览器本身的数据库存放这些数据是一个好方法,相比于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.' );
};
}
};
};