问题
大部分网站会将一些数据（如：用户token）存储在前端，用来实现页面间的传值，对于一些大型web应用来说，其存储的数据可能会非常多，数据的管理会变得复杂，并且一个大型项目是由多位程序员共同开发的，这时就会遇到一个问题：怎样确保自己的数据不会覆盖掉其他人的呢？因为在一个页面中大家都是使用同一个webstorage对象，总不能把大家使用过的key记录下来吧。这时候就可以使用数据访问对象模式来解决了。
引言
html5 提供了两种在客户端存储数据的新方法：localstorage、sessionstorage，他们是web storage api 提供的两种存储机制，区别在于前者属于永久性存储，而后者是局限于当前窗口的数据传递，存储在其中的数据会在当前会话结束时被删除。localstorage、sessionstorage的具体内容在这里就不多做介绍了，我们主要探讨一下在实际开发中怎样合理使用他们。
数据访问对象模式（dao）
数据访问对象模式就是对数据源的访问与存储进行封装，提供一个数据访问对象类负责对存储的数据进行管理和操作，规范数据存储格式，类似于后台的dao层。
由于webstorage采用key-value的方式存取数据，而且只能存字符串（任何类型存储的时候都会被转为字符串，读取的时候需要进行类型转换），所以我们可以对key的格式进行规范，比如模块名+key，开发人员+key等，还可以在值中添加一段前缀用来描述数据，如添加数据过期日期的时间戳，用来管理数据的生命周期。具体格式项目组可以自己定义，主要是便于管理，防止出现冲突，约定好规范后就可以开始定义数据访问对象了。
下面以localstorage为例，介绍一下数据访问对象类的定义和使用。
代码示例
dao类基本结构
数据访问对象类的基本结构如下，我们给键值添加了一段前缀用来避免键值冲突，并且在值中加入数据过期时间戳以及分隔符，获取值的时候再进行判断是否过期，这样可以更灵活地管理存储数据的生命周期。这里还用到了回调的方式，方便获取数据访问过程的具体结果，以及在必要时执行相关操作。
/** * localstorage数据访问类 * @param {string} prefix key前缀 * @param {string} timesplit 时间戳与存储数据之间的分割符 */ var dao = function (prefix, timesplit) { this.prefix = prefix; this.timesplit = timesplit || '|-|'; } // localstorage数据访问类原型方法 dao.prototype = { // 操作状态 status: { success: 0, // 成功 failure: 1, // 失败 overflow: 2, // 溢出 timeout: 3 // 过期 }, // 本地存储对象 storage: localstorage || window.localstorage, // 获取带前缀的真实键值 getkey: function (key) { return this.prefix + key; }, // 添加（修改）数据 set: function (key, value, callback, time) { ... }, // 获取数据 get: function (key, callback) { ... }, // 删除数据 remove: function (key, callback) { ... } }
添加（修改）数据
/** * 添加（修改）数据 * @param key 数据字段标识 * @param value 数据值 * @param callback 回调函数 * @param time 过期时间 */ set: function (key, value, callback, time) { // 默认为成功状态 var status = this.status.success, key = this.getkey(key); try { // 获取过期时间戳 time = new date(time).gettime() || time.gettime(); } catch (e) { // 未设置过期时间时默认为一个月 time = new date().gettime() + 1000 * 60 * 60 * 24 * 30; } try { // 向本地存储中添加（修改）数据 this.storage.setitem(key, time + this.timesplit + value); } catch (e) { // 发生溢出 status = this.status.overflow; } // 执行回调并传入参数 callback && callback.call(this, status, key, value); }
获取数据
/** * 获取数据 * @param key 数据字段标识 * @param callback 回调函数 */ get: function (key, callback) { var key = this.getkey(key), status = this.status.success, // 获取数据状态 value = null; // 获取数据值 try { // 从本地存储获取数据 value = this.storage.getitem(key); } catch (e) { // 获取数据失败 status = this.status.failure; value = null; } // 如果成功获取数据 if (status !== this.status.failure) { var index = value.indexof(this.timesplit), timesplitlen = this.timesplit.length, // 获取时间戳 time = value.slice(0, index); // 判断数据是否未过期 if (new date(1*time).gettime() > new date().gettime() || time == 0) { // 获取数据值 value = value.slice(index + timesplitlen); } else { // 数据已过期，删除数据 value = null; status = this.status.timeout; this.remove(key); } } // 执行回调 callback && callback.call(this, status, value); // 返回结果值 return value; }
删除数据
/** * 删除数据 * @param key 数据字段标识 * @param callback 回调函数 */ remove: function (key, callback) { // 设置默认状态为失败 var status = this.status.failure, key = this.getkey(key), value = null; try { // 获取数据值 value = this.storage.getitem(key); } catch (e) { // 数据不存在，不采取操作 } // 如果数据存在 if (value) { try { // 删除数据 this.storage.removeitem(key); status = this.status.success; } catch (e) { // 数据删除失败，不采取操作 } } // 执行回调并传入参数，删除成功则传入被删除的数据值 callback && callback.call(this, status, status > 0 ? null : value.slice(value.indexof(this.timesplit) + this.timesplit.length)); }
用法
var dao = new dao('mymodule_'); // 添加/修改数据 dao.set('token', 'abc', function () { console.log(arguments); }); // 获取数据 var value = dao.get('token', function () { console.log(arguments); }); console.log(value); // 删除数据 dao.remove('token', function () { console.log(arguments); });
写在最后
其实数据访问对象模式更适合与服务器端的数据库操作，比如在nodejs中操作mongodb，通过对数据库增删改查操作的封装，可以方便我们对前端存储的管理，不必为操作数据库感到烦恼，dao已经为我们提供了便捷统一的接口，这样在团队开发中就不用担心影响到其他人的数据了。
相关推荐：
php设计模式 dao(数据访问对象模式)
yii学习总结之数据访问对象 (dao)，yiidao_php教程
javascript面向对象之访问对象属性的两种方式分析_javascript技巧
以上就是js数据访问对象模式详解的详细内容。