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() 方法： 獲取鍵值，須要注意的是並不能返回指定布爾值須要做進一步處理，下面是針對兩種不一樣的存儲方式使用統一的函數方式實現，歡迎各位提出意見。

7.es6 版本 發佈在github 也能夠使用 npm i -S feitools

https://github.com/lizhanyi/t...

/*  功能：拋出異常 , 調試使用
        @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函數

自定義方法優化

function Memory( key, way ){
    this.way = way;
    this.key = key;
};
Memory.prototype = {
    constructor : Memory,
    map : {
        'session' : window.sessionStorage,
        'local' : window.localStorage
    },
    setItem : function( value ){
        this.map[this.way].setItem( this.key, JSON.stringify( value ) )
    },
    getItem : function(){
        return JSON.parse( this.map[this.way].getItem( this.key ) );
    },
    removeItem : function(){
        this.map[this.way].removeItem( this.key );
    },
    clear : function(){
        this.map[this.way].clear();
    },
    getKey : function(){
        return this.key in this.map[this.way];
    }
};
var myStore = new Memory('key','session'); // 實例化一個對象，指定鍵值和存儲方式
myStore.setItem('value'); // 指定存儲的數據，能夠是字符串、數字、json對象、數組。無需轉換數據類型
myStore.getItem(); // 獲取存儲的數據，無需指定鍵值。

myStore.removeItem(); // 移除數據

var session = new Memory('clear','session');
session.clear(); // 清空全部的 session 存儲

var local = new Memory('clear','local');
local.clear(); // 清空全部的 local 存儲