【JavaScript框架封装】实现一个类似于JQuery的缓存框架的封装
版权声明：本文为博主原创文章，未经博主允许不得转载。更多学习资料请访问我爱科技论坛:www.52tech.tech https://blog.csdn.net/m0_37981569/article/details/81123863 // 缓存框架 (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&5; //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&=xiuxiu& name=xiuxiu; script=<script>alert(2); script2=<script>alert(2); script3=<script>alert(2); script3&=<script>alert(2); script4&=<script>alert(2); a&=<a>alert(2)</a>&" var cookies = document.cookie.split(';'); if (cookies.length) { cookies.forEach(function (element) { // 拿到字符串：name&=xiuxiu& 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);
