Web儲存(Web Storage)擴充套件EStorage

長髮飄飄發表於2019-02-16
Web套件

HTML5中新增了Web Storage的規範，目的是解決客戶端儲存資料，而無需將資料持續的發回伺服器。它提供了兩個物件sessionStorage和localStorage，這兩個物件都是以windows物件屬性的形式存在的，區別在於localStorage儲存的資料不會過期，sessionStorage儲存的資料每次關閉瀏覽器後都會被清空。

為什麼出這個擴充套件類

Web Storage的出現解決了cookie不適合瀏覽器儲存大量資料和每次請求時，cookie都會存放在請求頭中，傳輸到伺服器端的問題。

Storage的兩個例項提供了以下五個方法：

  • clear()：刪除所有值；Firefox中沒有實現。
  • getItem(name)：根據指定的name獲取對應的值。
  • key(index)：獲得index位置處的值的名字。
  • removeItem(name)：刪除由name指定的名值對。
  • setItem(name,value)：為指定的name設定一個對應的值。

雖然Storage的幾個方法呼叫很簡單，但是隻能儲存字串格式的資料，這給實際編碼過程中帶來了很大的困擾，比如：當我存入一個Object資料時，每次存入之前都要資料轉化成字串，取出使用的時候也要將字串再轉化為物件，並且人為的要記住存入值的格式。
所以，為了減少重複勞動，以後少些重複程式碼，順便提升下效率，所以做了一個封裝。

兩個操作物件EStorage.session和EStorage.local，分別對應sessionStorage和localStorage
提供了8個方法

  • set(key,value)：為指定的key設定一個對應的值。
  • remove(key)：刪除由key指定的名值對。
  • clear()：刪除所有值；Firefox中沒有實現。
  • update 更新(key,value)。
  • get(key)：根據指定的key獲取對應的值。
  • keyType(key)： 對應key值的資料型別
  • isexist(key)： 是否存在
  • getAll()： 獲取所有的值,返回object

支援七種資料格式：String，Number，Boolean，Function，Date，Object，Array
特點：
1、存入什麼資料型別，取出什麼資料型別
2、通過原生方法存入的資料，只能取出字串
3、與原生方法共存
4、易擴充套件

使用入門：

<script src="EStorage.js"></script>
<script>
    var objData = {
        name:王二,
        age:25
    }
    EStorage.session.set(`objData`,objData);//存值
    var data = EStorage.session.get(`objData`); //取值
</script>

實際專案中用了，效果還可以，生了不少程式碼，手動微笑 -_-

最後貼上全部程式碼

/*
    EStorage.js
    2017-12-25
    VERSION = "1.0.0"
    DATATYPE = String,Number,Boolean,Function,Date,Object,Array 支援的資料型別
*/
var EStorage = (function () {
    "use strict";

    var VERSION = "1.0.0";
    //支援的資料型別
    var DATATYPE = `String,Number,Boolean,Function,Date,Object,Array`;

    //儲存型別id
    var KEYWORDID = `KEYWORDID`;
    //檢測存入資料型別
    function getType(data){
        var type = Object.prototype.toString.call(data)
        switch(type)
        {
        case `[object String]`:
          return `String`
          break;
        case `[object Number]`:
          return `Number`
          break;
        case "[object Boolean]":
          return `Boolean`
          break;
        case "[object Function]":
          return `Function`
          break;
        case "[object Object]":
          return `Object`
          break;
        case "[object Array]":
          return `Array`
          break;
        case "[object Date]":
          return `Date`
          break;
        }
    }

    //獲取值並根據型別轉換
    function getValue(type,item){
        switch(type)
        {
        case `String`:
          return item
          break;
        case `Number`:
          return Number(item)
          break;
        case "Boolean":
          var value;
          return value = (item ===`true`) ?  true : false;
          break;
        case "Function":
          var fun=(new Function("return "+item))();
          return fun;
          break;
        case "Object":
          return JSON.parse(item);
          break;
        case "Array":
          return JSON.parse(item);
          break;
        case "Date":
          return new Date(item);
          break;
        default:
          return item;
        }
    }

    //儲存類
    function EStorage(){
        this.VERSION = VERSION;
        this.DATATYPE = DATATYPE;
    }


    //會話級儲存類
    EStorage.prototype.session = {
        data:window.sessionStorage,
        //新增或更新會話級資料
        set:function(key,data){
            var type = getType(data);
            var saveData = ``;

            if(type === `String` || type === `Number` || type === `Boolean` || type === `Function` || type === `Date`){
                saveData = ``.concat(data);
            }else if(type === `Object` || type === `Array`){
                saveData = ``.concat(JSON.stringify(data));
            }

            this.data.setItem(key,saveData);

            if(key !==KEYWORDID){
                updateKeys(key,type,`set`,`session`);            
            }

        },
        //獲取會話級資料
        get:function(key){
            if(!isexist(key,`session`)){
                return;
            }else{
                var sessionKeys = getKeys(`session`);
                var item = this.data.getItem(key);
                return getValue(sessionKeys[key],item);
            }    
        },
        //獲取所有會話級資料
        getAll:function(){ 
            var obj={};
            for(var i in this.data){
                //filter,只輸出sessionS的私有屬性
                if (this.data.hasOwnProperty(i) && i !==KEYWORDID) { 
                    obj[i] = this.get(i)
                };
            }
            return obj;
        },
        //校驗是否存在某個值
        isexist:function(key){
            return isexist(key,`session`);           
        },
        //清除會話級資料
        clear:function(){ 
            this.data.clear();
            this.set(KEYWORDID,{KEYWORDID:`Object`});
        },
        //更新key值
        update:function(key,data){ 
            if(!isexist(key,`session`)) {
                return;
            }
            this.set(key,data);
        },
        //刪除key值
        remove:function(key){ 
            if(!isexist(key,`session`) || key ===``) {
                return;
            }
            this.data.removeItem(key);
            updateKeys(key,``,`remove`,`session`)
        },
        //獲取資料型別
        keyType:function(key){
            var sessionKeys = getKeys(`session`);
            if(isexist(key,`session`)) {
                return sessionKeys[key];
            }
        }
    }

    //磁碟儲存類
    EStorage.prototype.local = {
        data:window.localStorage,
        set : function(key,data){ //新增或更新瀏覽器永久資料
            var type = getType(data);
            var saveData = ``;

            if(type === `String` 
                || type === `Number` 
                || type === `Boolean` 
                || type === `Function` 
                || type === `Date`){
                saveData = ``.concat(data);
            }else if(type === `Object` || type === `Array`){
                saveData = ``.concat(JSON.stringify(data));
            }

            this.data.setItem(key,saveData);
            if(key !==KEYWORDID){
                updateKeys(key,type,`set`,`local`);
            }
        },
        //獲取key值
        get:function(key){
            if(!isexist(key,`local`)){
                return;
            }else{
                var localKeys = getKeys(`local`);
                var item = this.data.getItem(key);
                return getValue(localKeys[key],item);
            }
        },
        //獲取所有永久資料
        getAll:function(){
            var obj={};
            for(var i in this.data){
                //filter,只輸出sessionS的私有屬性
                if (this.data.hasOwnProperty(i) && i !==KEYWORDID) { 
                    obj[i] = this.get(i)
                };
            }
            return obj;
        },
        //校驗是否存在某個值
        isexist:function(key){
            return isexist(key,`local`);           
        },
        //清除瀏覽器永久資料
        clear:function(){
            this.data.clear();

        },
        //更新key值
        update:function(key,data){
            if(!isexist(key,`local`)) {
                return;
            }
            this.set(key,data);
        },
        //刪除key值
        remove:function(key){
            if(!isexist(key,`local`)) {
                return;
            }
            this.data.removeItem(key);
            updateKeys(key,``,`remove`,`local`)   
        },
        //獲取資料型別
        keyType:function(key){
            var localKeys = getKeys(`local`);
            if(isexist(key,`local`)) {
                return localKeys[key];
            }
        }
    }

    var storage = new EStorage() 
    if(!sessionStorage.getItem(KEYWORDID)){
        storage.session.set(KEYWORDID,{KEYWORDID:`Object`});
    }
    if(!localStorage.getItem(KEYWORDID)){
        storage.local.set(KEYWORDID,{KEYWORDID:`Object`});
    }
    //是否存在
    function isexist(key,type){
        if(type ===`session`){
            var flag = (key && sessionStorage.getItem(key)) ? true : false;

            // var sessionKeys = getKeys(`session`);
            // var flag = (key && sessionKeys[key]) ? true : false;
            return flag;
        }else if(type ===`local`){
            // var localKeys = getKeys(`local`);
            // var flag = (key && localKeys[key]) ? true : false;
            var flag = (key && localStorage.getItem(key)) ? true : false;
            return flag;
        }     
    }

    //獲取key列表
    function getKeys(type){
        if(type ===`session`){
            var item = sessionStorage.getItem(KEYWORDID);
            return getValue(`Object`,item);
        }else if(type ===`local`){
            var item = localStorage.getItem(KEYWORDID);
            return getValue(`Object`,item);
        }
        
    }

    //更新key值型別
    function updateKeys(key,keytype,operate,saveType){
        var keys = saveType ===`session` ? storage.session.get(KEYWORDID) : storage.local.get(KEYWORDID);

        switch(operate)
        {
        case `set`:
          keys[key] = keytype;
          break;
        case `remove`:
          delete keys[key];
          break;
        case `clear`:
          for(var i in keys){
            if(i !==KEYWORDID){
                delete keys[i];
            }
          }
          break;
        } 
        saveType ===`session` ? storage.session.set(KEYWORDID,keys) :         
             storage.local.set(KEYWORDID,keys); 
    }

    //對外提供介面
    return storage;
}());

相關文章