本地存储组件--兼容IE低版本
2014-07-05 22:45
375 查看
在前端开发过程中,会用到本地缓存,但是由于浏览器对不同规范支持的程度不一样,每次进行使用都要为兼容行花费不少时间。我整理了一个本地存储的组件。
组件特点:
可以配置使用localStorage、sessionStorage、cookie、Object,IE低版本支持userData
统一的使用接口set、get、remove
使用方便,直接引入JS,进行初始化即可
下面是源码:
使用例子:
如果觉得有用可以推荐一下,那里实现的有问题,也希望指正。
组件特点:
可以配置使用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);
如果觉得有用可以推荐一下,那里实现的有问题,也希望指正。
相关文章推荐
- 本地存储组件--兼容IE低版本
- ie兼容本地最高版本
- localStorage兼容IE系列的本地存储方案
- 如和在服务器端预览本地图片,兼容IE6以上IE版本
- 兼容IE各版本的纯CSS二级下拉菜单
- 兼容 IE各版本 与 FF 的mask
- 兼容低版本 IE 的 JScript 5.5 实现
- iE各版本浏览器CSS兼容大全
- jQuery 祝福/许愿墙 开源版发布,兼容 IE,Firefox,有 php,asp,asp.net三种版本
- JavaScript本地存储实践(html5的localStorage和ie的userData)
- 提交Form中动态组件 Select遇到的IE和FireFox兼容问题
- 简易tabs切换组件,兼容IE、FF、CHROME,支持click、mouseover等事件,无组件依赖
- IE版本简单兼容 JS闭包和JS对象解说。
- 兼容低版本IE的JScript5.5实现
- 标准功能模块组件 -- “文档管理组件,网络文档管理,网络存储”,B/S版本组件可独立运行,也可集成到其他项目里,数据结构清晰思路严谨
- JSF richfaces的dataTable组件中filter在IE和Firefox下不兼容的问题
- IE本地存储userdata的一个bug说明
- js反选 全选 多选框 兼容ie和firefox版本
- js反选 全选 多选框 兼容ie和firefox版本
- 标准功能模块组件 -- “文档管理组件,网络文档管理,网络存储”,B\S版本组件可独立运行,也可集成到其他项目里,数据结构清晰思路严谨