【JavaScript框架封装】实现一个类似于JQuery的缓存框架的封装

// 缓存框架
(function (xframe) { /**
* 实现了缓存框架的临时存储功能(内存存储)
* @type {{data: Array, get: (function(*): *), add: xframe.cache.add, delete: (function(*): boolean), update: (function(*, *): boolean), isExist: (function(*): boolean)}}
*/
xframe.cache = {
data: [], // 用于存储本地的数据信息
/**
* 用于获取本地存储的json数据信息
* @param key
* @return {*}
*/
get: function (key) {
var value = null;
this.data.each(function () {
if (key.trim() === this.key.trim()) {
value = this.value;
}
});
return value;
},
/**
* 向本地存储添加数据信息
* @param key
* @param value
*/
add: function (key, value) {
this.data.push({
key: key.trim(),
value: value.trim()
});
},
/**
* 删除指定的key的数据信息
* @param key
* @return {boolean}
*/
delete: function (key) {
// 删除指定的key对应的数据信息
var status = false, // 定义一个状态码,用于标记删除是否成功的状态信息
self = this;
this.data.forEach(function (element, index) {
// 遍历本地的数据存储信息,进行比对数据信息
if (key.trim() === element.key.trim()) {
// 指定开始的位置,开始删除数组中的数据信息
self.data.splice(index, 1);
status = true;
}
});
return status;
},
/**
* 修改指定的元素的数据信息
* @param key
* @param value
*/
update: function (key, value) {
var status = false;
this.data.forEach(function (element) {
if (key.trim() === element.key) {
// key不变,只修改数值信息, 注意element是一个json对象,这个对象里面包含了两个属性element.key和element.value这两个
element.value = value.trim();
status = true;
}
});
return status;
},
/**
* 检测一个指定的数据是否存在
* @param key
* @return {boolean}
*/
isExist: function (key) {
// 用于检测某一个数据信息是否存在
this.data.forEach(function () {
if (key.trim() === this.key) {
return true;
}
});
return false;
}
} /**
* 实现了一个Cookie框架的封装(注意在把HTML转换为实体存储的时候这里默认是去掉了最末尾的分号)
* @type {{getCookie: xframe.cookie.getCookie, setCookie: xframe.cookie.setCookie, deleteCookie: xframe.cookie.deleteCookie, clearAllCookies: xframe.cookie.clearAllCookies}}
*/
xframe.cookie = {
/**
* 根据cookie的名字获取Cookie的详细信息
* @param name
* @return {*}
*/
getCookie: function (name) {
// 去除转义字符
var name = name.escapeHTML(),
// 读取文档中的所有cookie属性
allCookies = document.cookie; // 下面是一些Cookie的数据格式信息(默认返回的是一个字符串)
// H_PS_645EC=af88R0s3e76Ig1PlwkvrhnGGtg4qt5pcZNPKBUntPI2vGearAlyZyjXjmKYn%2BkggUXbNjhg;
// 1. 查找名称为name的cookie信息script3&amp5;
//name = name.substring(0, name.length-1); // 当前步骤是为了去除掉末尾的分号(转换为标准形式);
name += '=';
// 等号右边的就是获取的数值,左边就是cookie的名称信息
// 2. 获取'name='这个字符串在整个Cookie信息字符串中出现的位置下标
var pos = allCookies.indexOf(name);
// 3. 判断是否存在这个cookie的信息
if (pos !== -1) {
// 如果存在的话,就继续处理
// 3. 计算'cookie='等号后面的位置
var start = pos + name.length;
// 3. 从'cookie='的位置开始向后搜索, 一直到;的位置结束, 从start的位置向后搜索信息
var end = allCookies.indexOf(';', start);
if (end === -1) {
// 如果为-1的话, 说明cookie信息列表里面只有一个Cookie信息
end = allCookies.length;
}
// 4. 提取Cookie的数值信息
var value = allCookies.substring(start, end);
// 5.处理之后反转义后返回(反转义的目的是将内容进行加密处理,防止攻击)【测试状态OK,由于之前的内部存储,必须先删除所有的,在执行就ok了】
return value.unescapeHTML();
} else {
// 没有找到, 说明不存在这个cookie信息
return '';
} // 默认情况下返回一个空的字符串
return '';
},
/**
* 根据传入的参数信息设置浏览器的cookie
* @param name
* @param value
* @param days
* @param path
*/
setCookie: function (name, value, days, path) {
var name = name.escapeHTML(),
value = value.escapeHTML(),
expires = new Date(),
_expires,
res; //name = name.substring(0, name.length-1); // 当前步骤是为了去除掉末尾的分号(转换为标准形式); // 设置cookie的过期时间(单位是毫秒)
expires.setTime(expires.getTime() + days * 24 * 60 * 60 * 1000);
if (path === '') {
path = '';
} else {
path = (';path=' + path);
} if (typeof expires === 'string') {
_expires = '';
} else {
// 使用UTC标准时间
_expires = (';expires=' + expires.toUTCString());
} // 设置cookie信息,【注意要点:】(设置COokie的时候,只要遇到分号就会立即结束,只会保存分号之前的内容)
res = name + '=' + value + _expires + path;
// document.cookie="userId=828; userName=hulk";
document.cookie = res;
},
/**
* 根据名称信息和路径信息删除cookie
* @param name
* @param path
*/
deleteCookie: function (name, path) {
var name = name.escapeHTML(),
expires = new Date();
if (path === '') {
path = '';
} else {
path = (';path=' + path);
} // 删除之后重新设置cookie
document.cookie = name + '=' + ';expires=' + expires.toUTCString() + path;
},
/**
* 清空所有的cookie信息
*/
clearAllCookies: function () {
// 1. 获取浏览器中存储的所有cookie信息
// "name&amp=xiuxiu&amp; name=xiuxiu; script=<script>alert(2); script2=<script>alert(2); script3=<script>alert(2); script3&amp=&ltscript&gtalert(2); script4&amp=&ltscript&gtalert(2); a&amp=&lta&gtalert(2)&lt/a&gt&amp"
var cookies = document.cookie.split(';');
if (cookies.length) {
cookies.forEach(function (element) {
// 拿到字符串:name&amp=xiuxiu&amp
var index = element.indexOf('='),
name = element.substring(0, index); // 实现思路:要想删除某一个COOkie信息,只需要将cookie的name对应的值设置为空即可
document.cookie = name + '=' + ';expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/';
});
} }
} // 本地存储框架localstorage的本地存储
xframe.store = (function (xframe) {
// 定义一个API,用于定义实现的本地存储的API接口
var api = {},
localStorageName = 'localStorage',
globalStorageName = 'globalStorage',
win = window,
doc = window.document,
storage; // 首先先定义要实现的功能接口
api.set = function (key, value) { }
api.get = function (key) { }
api.remove = function (key) { }
api.clear = function () { } /*
* a) sessionStorage和localStorage都是window的属性,也是Storage对象的实例,即:window.sessionStorage instanceof Storage返回True,window.localStorage instanceof Storage 返回True,也因此两者享有Storage的属性和方法。
b) sessoinStorage存储的数据在页面会话结束时会被清空,页面会话在浏览器窗口关闭前持续存在,包含页面刷新和恢复。若新开标签或窗口将新建一个会话,再次获取sessionStorage将只限于当前会话,与先前会话的无关。localStorage存储的数据不会
c) window.globalStorage自Gecko 13 (Firefox 13)起不再支持。
*
* */
if (localStorageName in win && win[localStorageName]) {
// 拿到本地存储的这个数据项
storage = win[localStorageName]; // 实现我自己定义的接口
/**
* 设置本地存储的内容
* @param key
* @param value
*/
api.set = function (key, value) {
storage.setItem(key, value);
}
/**
* 获取本地存储的内容
* @param key
* @return {*}
*/
api.get = function (key) {
return storage.getItem(key);
}
/**
* 移出其中的某一项
* @param key
*/
api.remove = function (key) {
storage.removeItem(key);
}
/**
* 清空本地存储的所有内容
*/
api.clear = function () {
storage.clear();
}
} else if (globalStorageName in win && win[globalStorageName]) {
// HTML5中的localStorage替换了原来的globalStorgae
// 1. 拿到本地存储的对象(这是一个Json对象)[Firefox浏览器]
storage = win[globalStorageName][win.location.hostname];
api.set = function (key, value) {
storage[key] = value;
}
api.get = function (key) {
return storage[key] && storage[key].value;
}
api.remove = function (key) {
// delete用来删除一个对象的属性。
delete storage[key];
}
api.clear = function () {
for (var key in storage) {
delete storage[key];
}
}
} else if (doc.documentElement.addBehavior) {
// 如果可以给一个对象添加行为的话
// 单独定义一个获取本地存储的对象storage
function getStorage() {
// 如果已经获取到了Storage对象的话
if (storage) {
return storage;
}
storage = doc.body.appendChild(doc.createElement('div'));
storage.style.display = 'none';
// userData 64KB IE专用
storage.addBehavior('#default#userData');
// 这个是微软自定义的一个本地存储,相比之下有更大的容量
storage.load(localStorageName);
return storage;
} api.set = function (key, value) {
var storage = getStorage();
// 设置属性
storage.setAttribute(key, value);
// 保存属性信息
storage.save(localStorageName);
}
api.get = function (key) {
var storage = getStorage();
return storage.getAttribute(key);
}
api.remove = function (key) {
var storage = getStorage();
storage.removeAttribute(key);
// 移出数据之后记得保存一下数据
storage.save(localStorageName);
}
api.clear = function () {
// 1. 获取Storage对象
var storage = getStorage();
// 2.获取storage对象存储的所有属性信息
var attributes = storage.XmlDocument.documentElement.attributes;
storage.load(localStorageName);
// 3. 遍历所有的属性信息,并从本地移出数据
[].slice.call(attributes).forEach(function (element) {
storage.removeAttribute(element.name);
})
// 4. 移出完毕之后,开始保存信息到本地存储
storage.save(localStorageName);
} return api;
} // 把立即函数里面的私有成员暴露出去(如果在立即函数内部不暴露出去需要使用的成员,在外部是无法访问到内部的私有成员变量的)
xframe.storage = api; })(xframe);
})(xframe);
上一篇:关闭window 8.1 的skydrive


下一篇:H5 和移动端 WebView 缓存机制解析与实战