前端之js-本地存储-localStorage && IndexedDB

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);