場景中編輯的模型會很多，而且文件會很大，使用瀏覽器本身的數據庫存放這些數據是一個好方法，相比於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.' );
};
}
};
};