zoukankan      html  css  js  c++  java
  • 本地存储组件--兼容IE低版本

        在前端开发过程中,会用到本地缓存,但是由于浏览器对不同规范支持的程度不一样,每次进行使用都要为兼容行花费不少时间。我整理了一个本地存储的组件。
        组件特点:
    • 可以配置使用localStorage、sessionStorage、cookie、Object,IE低版本支持userData
    • 统一的使用接口set、get、remove
    • 使用方便,直接引入JS,进行初始化即可
        下面是源码:
        
    (function() {
        var ua = navigator.userAgent.toLowerCase();
        var t = ua.match(/msie ([d.]+)/);
        var ie = t && t[1];
        var useUserData = ie ==6 || ie == 7;
     
        var encodeVal = function(value) {
            return encodeURIComponent(value);
            };
     
        var decodeVal = function(value) {
            return decodeURIComponent(value);
            };
     
        var isCookieEnabled = function() {
            if(window.navigator.cookieEnabled) {
                return window.navigator.cookieEnabled;
            }
            var key = 'test_cookie_enable',
                    value = 'test' + Math.random(),
                    result = _cookieStorage.set(key, value);
            if (!result) {
                return false;
            }
            var value2 = _cookieStorage.get(key);
            _cookieStorage.remove(key);
            return value == value2;
        };
     
        var _sessionStorage = {
                get : function(key) {
                    return sessionStorage.getItem(key) || null;
                },
     
                set : function(key, value) {
                    sessionStorage.setItem(key, value);
                },
     
                remove : function(key) {
                    sessionStorage.removeItem(key);
                }
            };
     
        var _localStorage = {
                get : function(key) {
                    return decodeVal(localStorage.getItem(key)) || null;
                },
     
                set : function(key, value) {
                    value = encodeVal(value);
                    localStorage.setItem(key, value);
                },
     
                remove : function(key) {
                    localStorage.removeItem(key);
                }
            };
     
        var _userDataStorage = {
                init: function(maxage) {
                    var memory = document.createElement('input');
                    this.memory = memory;
                    memory.style.display = "none";
                    memory.style.behavior = "url('#default#userData')";
                    document.body.appendChild(memory);
     
                    if(maxage) {
                        var now = +new Date();
                        var expires = now + maxage * 1000;
                        memory.expires = new Date(expires).toUTCString();
                    }
     
                    memory.load('UserDataStorage');
                },
     
                get : function (key) {
                    return decodeVal(this.memory.getAttribute(key)) || null;
                },
     
                set : function(key, value) {
                    value = encodeVal(value);
                    this.memory.setAttribute(key, value);
                    this.memory.save('UserDataStorage');
                },
     
                remove : function(key) {
                    this.memory.removeAttribute(key);
                    this.memory.save('_userDataStorage');
                }
            };
     
        var _cookieStorage = {
                init: function(maxage, path) {
                    this.maxage = maxage;
                    this.path = path;
                },
                set : function(key, value) {
                    var cookie = key + '=' + encodeVal(value);
                    if(this.maxage) cookie += '; max-age=' + this.maxage;
                    if(this.path) cookie += '; path=' + this.path;
                    document.cookie = cookie;
                },
     
                get : function(key) {
                    var cookies = document.cookie;
                    var reg = new RegExp('(?:^ |)(' + key + ')=([^;]+)');
                    var value = cookies.match(reg);
                    if(value) {
                        return decodeVal(value[2]);
                    }
                    return null
                },
     
                remove : function(key) {
                    this.init(0, '/');
                    this.set(key, '');
                }
            };
     
        var _objectStorage = {
            init : function() {
                this.data = {};
            },
            set : function(key, value) {
                value = encodeVal(value);
                this.data[key] = value;
            },
            get : function (key) {
                return decodeVal(this.data[key]) || null;
            },
            remove : function(key) {
                delete this.data[key];
            }
        };
     
        /**
         * 本地存储
         * @param {String} type 存储类型 [local,session,cookie,page]
         * @param {Number} maxage cookie到期时间 单位秒
         * @param {String} path 路径
         * @return {Object} 具有set、get、remove方法
         */
        function Storage(type, maxage, path) {
            var storage;
            maxage = maxage || '';
            path = path || '/';
            type = type || 'local';
     
            switch (type) {
                case 'local' :
                    try { // 禁用cookie、localStorage时访问会报错
                        storage = window.localStorage ? _localStorage : useUserData ? _userDataStorage : Object;
                    } catch (e) {
                        storage = _objectStorage;
                    }
                    break;
                case 'session' :
                    try { // 禁用cookie、_localStorage时访问会报错
                        storage = window.sessionStorage ? _sessionStorage : _objectStorage;
                    } catch (e) {
                        storage = _objectStorage;
                    }
                    break;
                case 'cookie' :
                    storage = isCookieEnabled() ? _cookieStorage : _objectStorage;
                    break;
                case 'page' :
                    storage = _objectStorage;
            }
            storage.init && storage.init(maxage, path);
            return storage;
        }
     
        window.Storage = Storage;
    })();
     
        
      使用例子:
      
    var storage = new Storage('local');
        storage.set('name', '中国人');
        var name = storage.get('name');
        alert(name);
        storage.remove('name');
        var name = storage.get('name');
        alert(name);
      如果觉得有用可以推荐一下,那里实现的有问题,也希望指正。
  • 相关阅读:
    ubuntu12.04 死机 卡屏 画面冻结解决方案
    Install Firefox 20 in Ubuntu 13.04, Ubuntu 12.10, Ubuntu 12.04, Linux Mint 14 and Linux Mint 13 by PPA
    ListView1.SelectedItems.Clear()
    android studio 下载地址
    jquery.slider.js jquery幻灯片测试
    jquery.hovermenu.js
    jquery.tab.js选项卡效果
    适配 placeholder,jquery版
    jquery.autoscroll.js jquery自动滚动效果
    将 Google Earth 地图集成到自己的窗体上的 简单控件
  • 原文地址:https://www.cnblogs.com/xiaoheimiaoer/p/3826536.html
Copyright © 2011-2022 走看看