localStorage和sessionStorage

localStoage爲本地存儲，是一種永久性存儲，除非手動清除。sessionStorage是會話存儲，當瀏覽器關閉後，存儲數據會自動清除。兩種存儲方式幾乎都有相同的方法和屬性；

1.localStorage.length 和 sessionStorage.length : 返回本地存儲列表長度;需要說明的是可以通過localStorage對象獲取對應的存儲數據，比如已經存儲了一個鍵爲name的數據，使用localStorage.name獲取存儲數據；下面的方法都是基於localStorage 對象 或 sessionStorage 對象；

2.getItem( keyName )方法：通過鍵獲取存儲的數據；

3.setItem( keyName,value )方法：存儲數據，keyName爲存儲數據的鍵，value實際要存儲的數據（可以把keyName理解成 給要存儲的數據起的名字，便於管理）；

4.removeItem( keyName )方法： 將指定鍵名的數據刪除；

5.clear() 方法：清空所有的存儲數據；

6.key() 方法： 獲取鍵值，需要注意的是並不能返回指定布爾值需要作進一步處理，下面是針對兩種不同的存儲方式使用統一的函數方式實現，歡迎各位提出意見。

    /*  功能：拋出異常 , 調試使用
        @param msg , 異常信息
    */
    throwError : function( msg ){ // 調試使用
        throw new Error( msg );
    }

    /*  功能：設置和獲取數據
        @param key，存儲的鍵
        @param value，待存儲的數據
        @param boolean，區分對象sessionStorage和localStorage
    */
    setItem : function( key, value/*, boolean*/ ){
        var 
        args = arguments,
        len = args.length,
        storage;
        len == 0 && this.throwError('Not enough arguments to Storage.getItem.');
        if( args[len-1] == true ){// 是session
            storage = window.sessionStorage;
            len == 1 && this.throwError('Not enough arguments to Storage.getItem.');
            len >= 3 && storage.setItem( args[0], args[1] );
            if( len == 2 ) return storage.getItem( args[0] );
        }else{// 是local
            storage = window.localStorage;
            len >= 2 && storage.setItem( args[0], args[1] );
            if( len == 1 ) return storage.getItem( args[0] );

        }

    }

    /*  功能：刪除存儲數據
        @param key，待刪除的數據的鍵
        @param boolean，區分對象sessionStorage和localStorage
    */
    removeItem : function( key, boolean){ // 刪除指定 key 的存儲數據
        var storage;
        boolean ? 
            storage = window.sessionStorage : storage = window.localStorage;
        return storage.removeItem( key );
    }

    clearItem : function(/*boolean*/){// 清空所有存儲
        arguments[0] ?  window.sessionStorage.clear() : window.localStorage.clear();
    }

    /*  功能：判斷是否有某一鍵名的數據，若存儲數據存在返回true,否則返回false
        @param key，指定的鍵名
        @param boolean，區分對象sessionStorage和localStorage
        用這種方式判斷是否存儲了某個數據，應該會好於使用getItem()方法；
    */
    getKey : function( keyName/*boolean*/){ // 獲取數據存儲的鍵
        var 
        temp,
        args = arguments;
        len = args.length;
        args[len-1] == true ?  temp = window.sessionStorage : temp = window.localStorage;
        for(var i = 0; i < temp.length; i++)
            if( keyName == temp.key(i) ) 
                return true;
        return false;
    }

---

上面的封裝在使用的時候有點糾結，使用多次和時間長的時候自己也不知道是使用了seeeion還是使用了local，所謂實踐是檢驗真理的唯一標準

優化一下代碼，使用構造函數方式實現

/*
    @param way，存儲方式，指定是session或local存儲
*/
function Storage( way ){
    this.map = {
        'session' : window.sessionStorage,
        'local' : window.localStorage
    },
    this.getItem = function( key ){
        return this.map[way].getItem( key );
    },
    this.setItem = function( key, value ){
        this.map[way].setItem( key,value )
    },
    this.removeItem = function( key ){
        this.map[way].removeItem( key );
    },
    this.clear = function(){
        this.map[way].clear();
    },
    this.getKey = function( key ){
        //var len = map.way.length;
        return key in map[way];
    }
};

var local = new Storage('local');// 創建一個本地存儲的實例
    local.setItem('key','data');// 存儲數據
    local.getItem('key'); // 獲取本地存儲數據
    local.removeItem('key'); // 刪除鍵名爲key的存儲數據
    local.getKey('key'); // 判斷是否存在某一鍵的數據
    local.clear();// 清空本地存儲(刪除所有的本地存儲的數據)
    
var session = new Storage('session');// 創建一個session存儲的實例
    session.setItem('key','data');// 存儲數據
    session.getItem('key'); // 獲取session存儲數據
    session.removeItem('key'); // 刪除鍵名爲key的存儲數據
    session.getKey('key'); // 判斷是否存在某一鍵的數據
    session.clear();// 清空會話存儲(刪除所有的session存儲的數據)

繼續優化：(使用原型對象，共享屬性和方法)

function Storage( way ){
    this.way = way;
};
Storage.prototype.map = {
    'session' : window.sessionStorage,
    'local' : window.localStorage
};
Storage.prototype.setItem = function( key, value){
    this.map[this.way].setItem( key, value )
};
Storage.prototype.getItem = function( key ){
    return this.map[this.way].getItem( key );
};
Storage.prototype.removeItem = function( key ){
    this.map[this.way].removeItem( key )
};
Storage.prototype.clear = function(){
    this.map[this.way].clear();
};
Storage.prototype.getKey = function( key ){
    return key in this.map[this.way];
};

var local = new Storage('local');// 創建一個本地存儲的實例
    local.setItem('key','data');// 存儲數據
    local.getItem('key'); // 獲取本地存儲數據
    local.removeItem('key'); // 刪除鍵名爲key的存儲數據
    local.getKey('key'); // 判斷是否存在某一鍵的數據
    local.clear();// 清空本地存儲(刪除所有的本地存儲的數據)
    

再次優化代碼：(針對上面的寫法再來一次簡化)

function Storage( way ){
    this.way = way;
};
Storage.prototype = {
    map : {
        'session' : window.sessionStorage,
        'local' : window.localStorage
    },
    setItem : function( key, value ){
        this.map[this.way].setItem( key, value )
    },
    getItem : function( key ){
        return this.map[this.way].getItem( key );
    },
    removeItem : function( key ){
        this.map[this.way].removeItem( key );
    },
    clear : function(){
        this.map[this.way].clear();
    },
    getKey : function( key ){
        return key in this.map[this.way];
    }
};
Storage.prototype.constructor = Storage;

這樣看起來舒服多了，全部共享出去了，所有的實例都可以使用了，哈哈哈，親測可用，如遇到問題可以隨時交流，發現bug，也要及時反饋哈

關於prototype的幾點說明

只要函數被聲明瞭，就會產生對應的原型對象，即所有的函數都有原型對象，可以通過functionName.prototype訪問原型對象。既然functionName.prototype是對象那麼就可以通過'.'的方式設置屬性和方法如：

function People(){};
People.prototype.name = '阿里巴巴';
People.prototype.get = function(){
    console.log(this.name);
};
var people = new People(); // 實例化
console.log( people.name ); // 阿里巴巴
console.log( people.get() );// 阿里巴巴
console.log( people.constructor ); // People函數
console.log( people.__proto__.constructor ); // People函數