1.LocalStorage示例
var Config = function ( name ) {
//storage为空时，初始化的信息
var storage = {
'name': 'test',
'theme': 'css/light.css',
'project/renderer': 'WebGLRenderer',
'project/renderer/antialias': true,
'project/renderer/gammaInput': false,
'project/renderer/gammaOutput': false,
'project/renderer/shadows': true,
'project/vr': false,
'settings/history': false
};
//如果本地没有初始数据，则初始化localStroage[name]
if ( window.localStorage[ name ] === undefined ) {
window.localStorage[ name ] = JSON.stringify( storage );
}
//载入localstorage中名为‘name’的用户数据
else {
var data = JSON.parse( window.localStorage[ name ] );
for ( var key in data ) {
storage[ key ] = data[ key ];
}
}
//
return {
getKey: function ( key ) {
return storage[ key ];
},
setKey: function () { // key, value, key, value ...
for ( var i = 0, l = arguments.length; i < l; i += 2 ) {
storage[ arguments[ i ] ] = arguments[ i + 1 ];
}
window.localStorage[ name ] = JSON.stringify( storage );
console.log( '[' + /\d\d\:\d\d\:\d\d/.exec( new Date() )[ 0 ] + ']', 'Saved config to LocalStorage.' );
},
clear: function () {
delete window.localStorage[ name ];
}
};
}
运行示例，可在chrome的debug页面看到存储的数据：
2.IndexDB
var Storage = function () {
//使用IndexDB创建一个数据库，管理客户端上的大数据，基于事物，支持游标，异步
var indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;
//若该浏览器不支持IndexDB
if ( indexedDB === undefined ) {
console.warn( 'Storage: IndexedDB not available.' );
return { init: function () {}, get: function () {}, set: function () {}, clear: function () {} };
}
//浏览器支持IndexDB
var name = 'IndexDBTest';
var version = 1;
var database;
return {
init: function ( callback ) {
//请求——响应的模式,返回IDBOpenDBRequest
var request = indexedDB.open( name, version );
//只有当open的给定的数据库名称和版本的数据库不存在时。才会调用onupgradeneeded,onupgradeneeded是请求数据库版本变化句柄
request.onupgradeneeded = function ( event ) { var db = event.target.result; };
//捕获request对象的onsuccess事件,onsuccess:请求成功的回调函数句柄
request.onsuccess = function ( event ) {
database = event.target.result;
();
};
//onerror: 请求失败的回调函数句柄
request.onerror = function ( event ) {
console.error( 'IndexedDB', event );
};
},
};
运行示例之后，可在chrome的debug页面看到建立的IndexedDB数据库。
我们可以查看IndexDB详情：
var indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;
console.log(indexedDB);
查看IDBOpenDBRequest
var IDBOpenDBRequest = indexedDB.open( "indexDBTest", 2 );
console.log(IDBOpenDBRequest);