JS设计模式的数据访问对象模式示例说明

序

HTML5提供了两种在客户端存储数据的新方法：localStorage和sessionStorage。它们是网络存储应用编程接口提供的两种存储机制。不同的是，前者属于永久存储，而后者仅限于当前窗口的数据传输，存储在其中的数据将在当前会话结束时被删除。localStorage和sessionStorage的具体内容这里不做介绍，主要讨论在实际开发中如何合理使用。

问题

大多数网站都会在前端存储一些数据(比如用户Token)，用来在页面之间传递值。对于一些大规模的Web应用程序，可能会存储大量的数据，数据的管理会变得复杂。一个大型项目是由许多程序员联合开发的。这个时候就会出现一个问题：如何保证自己的数据不会覆盖别人？因为每个人在一个页面中使用相同的网络存储对象，所以您不能记录每个人都使用的密钥。此时，可以通过使用数据访问对象模式来解决。

数据访问对象模式

数据访问对象模式是封装数据源的访问和存储，提供数据访问对象类来管理和操作存储的数据，规范数据存储格式，类似于后台的DAO层。

由于WebStorage使用Key-Value访问数据，只能存储字符串(任何类型的存储都会转换为字符串，读取时需要进行类型转换)，所以我们可以对Key的格式进行标准化，比如模块名Key、开发者Key等。并在值中添加前缀来描述数据，例如添加数据到期日期的时间戳，以管理数据的生命周期。具体格式项目组可以自行定义，主要是为了方便管理，防止冲突。规范达成一致后，就可以定义数据访问对象了。

下面以localStorage为例，介绍数据访问对象类的定义和使用。

代码示例

DAO类的基本结构

数据访问对象类的基本结构如下。我们在键值上加前缀来避免键值冲突，在值上加数据过期时间戳和分隔符，然后在获取值时判断是否过期，这样可以更灵活地管理存储数据的生命周期。这里还使用了回调方法，便于获取数据访问过程的具体结果，并在必要时执行相关操作。

/** * LocalStorage数据访问类* @param {string}前缀Key前缀* @param {string} timeSplit时间戳和存储数据之间的分隔符*/vardao=function(前缀，时间分割){this。前缀=前缀；this . timeSplit=timeSplit | | ' |-| '；}//LocalStorage数据访问类原型方法Dao.prototype={//操作状态status: {success33600，//success failure33601，//failure OVERFLOW: 2，//overflow timeout : 3//expired }，//LocalStorage对象storage : local storage | | window . local storage，//get real键值getkey:带前缀的函数(key){ return this。前缀键；}，//添加(修改)数据集：函数(键、值、回调、时间){ 0.}，//获取数据get3360function (key，callback){ 0.}，//delete data remove : function(key，callback){ 0.}}添加

/* * *添加(修改)数据* @param key数据字段id * @param value数据值* @param回调函数* @param time到期时间*/set:function (key，value，callback，Time) {//默认为成功状态var status=this.status.success，key=this . getkey(key)；尝试{//获取到期时间戳时间=newdate(时间)。gettime () | | time。gettime()；} catch (e) {//未设置到期时间时，默认值为一个月时间=newdate()。gettime()1000 * 60 * 60 * 24 * 30；}尝试将数据this.storage.setitem(键，time this.time拆分值)添加(修改)到本地存储；} catch (e) {//发生溢出。status=this . status . overflow；}//执行回调并传入参数callbackcallback.call (this，status，key，value)；}获取数据

/* * *获取数据* @param key数据字段id * @param回调回调函数*/get:function (key，callback){ varkey=this . getkey(key)，status=this.status.success，//获取数据status值=null//获取数据值try {//从本地存储获取数据值=this . storage . getitem(key)；} catch (e) {//未能获取数据状态=this . status . FAILURE；值=null}//if数据获取成功if(状态！==this . status . failure){ var index=value . indexof(this . timesplit)，timesplitlen=this . timesplit . length，//获取时间戳time=value.slice(0，index)；//判断数据是否未过期if (newdate (1 * time)。gettime () newdate()。gettime()| | time==0){//获取数据值value=value . slice(index timesplitlen)；} else {//数据已过期，删除的数据值=nullstatus=this.status .超时；this.remove(键)；} }//执行回调callback.call (this，status，value)；//返回结果值返回值；}删除数据

/* * *删除数据* @param key数据字段id * @param回调回调函数*/remove:function (key，callback){//将默认状态设置为failure var status=this。状态。失败，关键=这个。getkey (key)，值=null尝试{//获取数据值value=this . storage . getitem(key)；} catch (e) {//数据不存在，不采取措施}//如果数据存在，if(value){ try {//delete data this . storage . remove item(key)；status=this . status . SUCCESS；} catch (e) {//数据删除失败，不采取措施} }//执行回调并传入参数，如果删除成功，传入删除的数据值回调. call (this，status，status0？null : value . slice(value . indexof(this . timesplit)this . timesplit . length))；}用法

var Dao=new Dao(' myModule _ ')；//添加/修改数据Dao.set ('token '，' ABC '，function(){ console . log(arguments)；});//get data var value=Dao . get(' token '，function(){ console . log(arguments)；});console.log(值)；//delete data Dao.remove ('token ')，function(){ console . log(arguments)；});写在最后

事实上，数据访问对象模式更适合与服务器一起进行数据库操作，比如在nodejs中操作MongoDB。通过封装添加、删除和修改数据库的操作，我们可以方便地管理前端存储，而不用担心操作数据库。DAO为我们提供了方便统一的接口，在团队开发中不用担心影响别人的数据。

以上JS设计模式的数据访问对象模式的示例说明，都是边肖分享的内容，希望能给大家一个参考和支持。