var db = function () {
// 本地存储前缀,减少命名冲突
var prefix = 'ydb';
return {
setPrefix: function (_prefix) {
prefix = _prefix;
// 本地存储前缀只允许修改一次,如果多次修改,由于单例,可能会导致只能写入,不能读取
this.setPrefix = null;
},
getPrefix: function () {
return prefix;
},
set: function (key, value, expriess = 0) {
var o = {
value,
createTime: Date.now(),
expriess
};
localStorage.setItem(prefix + '-' + key, JSON.stringify(o));
},
get: function (key) {
var storage = JSON.parse(localStorage.getItem(prefix + '-' + key));
if (!!storage === false) {
return null;
}
else {
if (storage.expriess <= 0) {
return storage.value;
}
else {
if (storage.expriess + storage.createTime > Date.now()) {
return storage.value;
}
// 过期销毁
this.remove(key);
return null;
}
}
},
remove(key) {
localStorage.removeItem(prefix + '-' + key);
},
clear() {
for (var key in localStorage) {
if (key.includes(prefix)) {
this.remove(key.split('-')[1]);
}
}
}
}
}()

这里使用来模块模式隐藏存储前缀,避免开发人员意外修改前缀导致无法读取存储的值。

定义了get,set,remove,clear四个特权方法,通过它们来操作prefix,隐藏了对prefix的操作细节,这里使用了js中的一个小技巧,用函数表达式来模拟块级作用域,由于这四个函数构成了闭包,外部函数的活动对象,当中包括prefix,添加到了这四个函数的作用链中,所以可以一直使用这个活动对象,即使外部函数执行完成,这个变量prefix也不会被回收。

别看这个例子很简单,但是里面涉及到的知识点和编程思想还是很多的,望多多思考。

localstorage二次封装-模块模式的更多相关文章

  1. localStorage二次封装-----设置过期时间

    export default{ set(key,data,time){ let obj={ data=data, ctime:(new Date()).getTime(),//时间戳,同Date.no ...

  2. web自动化针对PO模式进行二次封装之basepage

    在PO模式当中,我们做到了页面对象与测试用例的分离,但在页面对象编写时,我们仍然还有优化的空间.页面对象有一些共同的基本操作,可以封装起来,并可以在基本操作当中加上日志和异常截图的处理.比如说我们在查 ...

  3. 项目依赖模块解决、二次封装Response、后台数据库配置、user模块user表设计、前台创建及配置

    今日内容概要 二次封装Response 后台数据库配置 user模块user表设计 前台创建及配置 内容详细 补充--项目依赖模块 # 导出项目依赖模块和安装项目依赖模块 第三方模块--->导出 ...

  4. APP自动化针对PO模式进行二次封装之basepage

    APP自动化跟WEB自动化所使用的框架基本一样,都是采用的PO模式结合pytest框架编写自动化测试脚本,为了提高代码的复用性.稳定性和易维护性,我们针对PO模式进行了二次封装,将日志,等待以及异常截 ...

  5. 3) drf 框架生命周期 请求模块 渲染模块 解析模块 自定义异常模块 响应模块(以及二次封装)

    一.DRF框架 1.安装 pip3 install djangorestframework 2.drf框架规矩的封装风格 按功能封装,drf下按不同功能不同文件,使用不同功能导入不同文件 from r ...

  6. PHP设计模式(二)工厂方法模式(Factory Method For PHP)

    简单工厂简述: 简单工厂模式实现了生产产品类的代码跟客户端代码分离,在工厂类中你可以添加需要生成长跑的逻辑代码(new 产品类),但是问题来了,优秀的代码是符合"开闭原则"如果你要 ...

  7. JavaScript设计模式-单例模式、模块模式(转载 学习中。。。。)

    (转载地址:http://technicolor.iteye.com/blog/1409656) 之前在<JavaScript小特性-面向对象>里面介绍过JavaScript面向对象的特性 ...

  8. Java 9 揭秘(6. 封装模块)

    Tips 做一个终身学习的人. 在这章节中, 主要介绍以下内容: 封装Java模块的不同格式 JAR格式增强 什么是多版本JAR 如何创建和使用多版本JAR JMOD是什么格式 如何使用jmod工具来 ...

  9. 一个普通的 Zepto 源码分析(二) - ajax 模块

    一个普通的 Zepto 源码分析(二) - ajax 模块 普通的路人,普通地瞧.分析时使用的是目前最新 1.2.0 版本. Zepto 可以由许多模块组成,默认包含的模块有 zepto 核心模块,以 ...

随机推荐

  1. [一般图最大匹配]Bimatching

    10566 Bimatching 题意:一个男生必须跟两个女生匹配,求最大匹配 思路:一般的二分图匹配做不了,网络流也不会建图,这题采用的是一般图匹配 首先在原来二分图的基础上,将一个男生拆成两个点 ...

  2. idea新建maven项目后生成web.xml方法和添加到tomcat方法

    idea新建maven项目后生成web.xml方法和添加到tomcat方法 参考:https://www.cnblogs.com/Liang-Haishan216/p/9302141.html 1.首 ...

  3. CondaHTTPError: HTTP 000 CONNECTION FAILED for url <https://repo.anaconda.com/pkgs/main/win-64/repodata.json.bz2> Elapsed: -

    将C:\Users\<本机用户名>\.condarc文件修改为 channels: - http://mirrors.tuna.tsinghua.edu.cn/anaconda/pkgs/ ...

  4. 11)const

    const修饰一个  变量   为只读 : 然后 我再 a=: 这样写就是不行. 其实这个知识点主要考察    指针变量  指针指向的内存   是两个概念 char buf[]="dhasl ...

  5. Yii框架的学习指南(策码秀才篇)1-1 如何认识Yii framework

    Yii的框架和其他框架的区别在于:它是更加 快速,安全,专业的PHP框架 Yii是一个高性能的,适用于开发WEB2.0应用的PHP框架. Yii是一个基于组件.用于开发大型 Web 应用的 高性能 P ...

  6. 65)PHP,跨脚本周期存变量(会话技术)

    (1)写入变量,常量,全局变量都不行, (2)试一下用文件存那个变量: 但是有一个问题:就是文件,只要一个用登陆成功了,其余的所有用户都可以直接用那个登录许可的标志了,然后只要用户名和密码登录成功,那 ...

  7. asp.net---jquery--ajax 实现滚动条滚动到底部分页显示

    前台:aspx页面 var bgtime = $(" #date1 ").val(); var overtime = $(" #date2 ").val(); ...

  8. WWT在中国:一个改变了人类探索宇宙方式的少年梦想

    想象一下,在宇宙中超光速飞行,访问行星.星云.恒星和小行星将是多么美妙的体验.现在,中国的孩子们已经可以坐在屋子里,仰望穹顶,去探索星球之间无穷的奥秘. 在微软研究院.微软亚洲研究院及中国科学院国家天 ...

  9. JSON — Java与JSON数据互转

    转换时Bean所要求的: 被转换的Bean必需是public的. Bean被转换的属性一定要有对应的get方法,且一定要是public的. Bean中不能用引用自身的this的属性,否则运行时出现et ...

  10. flink测试用例编写

    使用tableFunction的collect总是npe, 实际可以自定义collector, 在collector中做自己想做的事 不使用现成的collector