Web存储(Web Storage)扩展EStorage

Posted 2021-02-21 jlfw

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