Web存儲(Web Storage)擴展EStorage

時間 2019-11-10

標籤 web 存儲 storage 擴展 estorage 欄目 HTML 简体版

原文原文鏈接

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

爲何出這個擴展類

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

Storage的兩個實例提供瞭如下五個方法：服務器

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

雖然Storage的幾個方法調用很簡單，可是隻能存儲字符串格式的數據，這給實際編碼過程當中帶來了很大的困擾，好比：當我存入一個Object數據時，每次存入以前都要數據轉化成字符串，取出使用的時候也要將字符串再轉化爲對象，而且人爲的要記住存入值的格式。
因此，爲了減小重複勞動，之後少些重複代碼，順便提高下效率，因此作了一個封裝。cookie

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

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
特色：
一、存入什麼數據類型，取出什麼數據類型
二、經過原生方法存入的數據，只能取出字符串
三、與原生方法共存
四、易擴展this

使用入門：

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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。