Web存儲(Web Storage)擴展EStorage

mmy123456 發布于2019-08-22 16:45 / 2746人閱讀

摘要：中新增了的規范，目的是解決客戶端存儲數據，而無需將數據持續的發回服務器。的兩個實例提供了以下五個方法刪除所有值中沒有實現。刪除由指定的名值對。根據指定的獲取對應的值。

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、易擴展

使用入門：

實際項目中用了，效果還可以，生了不少代碼，手動微笑 -_-

最后貼上全部代碼

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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/94627.html

客戶端數據存儲 --- web storage From 《高程3》

摘要：的目的就是取代進行大量的本地數據存儲，其中不能進行跨會話存儲，這可以使用彌補。刪除由指定的名值對兒。使用方法存儲數據使用屬性存儲數據使用方法讀取數據使用屬性讀取數據一般來說，對存儲空間大小的限制都是以每個源協議域和端口為單位的。前言本文首先介紹web storage和Cookie的對比，解釋web storage的優勢；隨后指出怎樣使用插firebug插件的擴展firestorag...

wangbinke 2019-08-21 14:37 評論0 收藏0
客戶端數據存儲 --- web storage From 《高程3》

摘要：的目的就是取代進行大量的本地數據存儲，其中不能進行跨會話存儲，這可以使用彌補。刪除由指定的名值對兒。使用方法存儲數據使用屬性存儲數據使用方法讀取數據使用屬性讀取數據一般來說，對存儲空間大小的限制都是以每個源協議域和端口為單位的。前言本文首先介紹web storage和Cookie的對比，解釋web storage的優勢；隨后指出怎樣使用插firebug插件的擴展firestorag...

wfc_666 2019-08-01 15:50 評論0 收藏0
分布式文件存儲 FastDFS

摘要：一概念簡述是由淘寶開發平臺部資深架構師余慶開發，是一個輕量級高性能的開源分布式文件系統，用純語言開發，包括文件存儲文件同步文件訪問上傳下載存取負載均衡在線擴容相同內容只存儲一份等功能，適合有大容量存儲需求的應用或系統。故障恢復后，再次奪回。一、概念簡述 FastDFS 是由淘寶開發平臺部資深架構師余慶開發，是一個輕量級、高性能的開源分布式文件系統( Distributed File ...

AlphaWallet 2019-07-01 12:50 評論0 收藏0