#幾乎所有的web應用程式都需要將資料保存一些到本地，那麼我們就來做一個資料儲存器吧。
#當本地儲存有數據時，取用本地的數據，沒有時使用預設的數據
判斷本地的資料是否過時，如果過時則不使用
預設使用localStorage，但支援使用其它儲存方式，並且要支援多方儲存，多方讀取
#根據需求裡面的關鍵字，我們抽像出三個物件：資料存取、資料、儲存器
資料儲存管理器負責管理數據，對外暴露介面
資料對象負責對資料的操作
儲存器負責保持數據，讀取數據
#DataStorageManagerBase揭露兩個介面save()和load(),模擬抽象類，告訴子類別一定要實作這兩個方法。
下面的範例用LocalStorage實作了一個子類，當然你也可以用cookie或其它方式實作。
為什麼要把LocalStorage這些儲存器進行二次封裝呢？直接用不就可以了嗎？
因為各種儲存器等api都是不一樣等，我們二次封裝後可以確保無論什麼儲存器對外暴露的介面都是save()和load()。
/*模拟数据储存器抽象类，其实这个类不要也可以*/
class DataStorageManagerBase {
static getIns() {
/* 储存器在整个应用的生命周期里应该只有一个实例 */
if (!this._ins) this._ins = new this();
return this._ins;
}
constructor() {
this.name = null;
}
save(name/* string */, data/* any */) {
throw '"' + this.constructor.name + "'类没有save()方法";
}
load(name/* string */) {
throw '"' + this.constructor.name + "'类没有load()方法";
}
}
class LocalStorageManager extends DataStorageManagerBase {
static getIns() {
/* 静态方法不能继承 */
if (!this._ins) this._ins = new this();
return this._ins;
}
constructor() {
super();
this.name = 'localStorage';
}
save(name/* string */, data/* any */) {
console.log(name,data)
if (!window.localStorage) return this;//判断这个储存器可用不可用，你也可以在这里抛出错误
window.localStorage[name] = JSON.stringify(data);
return this;
}
load(name/* string */) {
//如果储存器不可用，返回false
if (!window.localStorage) return false;
//如果没有这个数据，返回false
if (!window.localStorage[name]) return false;
let dataLoaded = JSON.parse(window.localStorage[name]);
return dataLoaded;
}
}對資料的操作：保存、讀取、判斷版本等
class GlobalData {
static addStorage(storage/* DataStorageManagerBase */) {
/*动态添加储存器*/
this._storages.push();
}
static getStorages() {
return this._storages;
}
constructor(name, data, version) {
this.name = name;
this.data = data;
this.version = version || 1;
this._loadData();
//初始化的该对象的时候，读取localStorage里的数据，看有没有已储存的数据，有就用该数据
}
getData() {
return this._copy(this.data);
}
setData(data, notSave) {
this.data = this._copy(data);
if (!!notSave) return this;
let dataToSave = {
name: this.name,
version: this.version,
data: this.data
};
let storages = GlobalData.getStorages();
for (let i = 0, l = storages.length; i
<div style="font-size: 14pt; color: white; background-color: black; border-left: red 10px solid; padding-left: 14px; margin-bottom: 20px; margin-top: 20px;"><strong>資料存取物件</strong></div><p>#對資料物件管理,對外暴露三個介面getData(),setData(),config(),使用者透過這三個介面使用這個模組</p>
<pre class="brush:php;toolbar:false">class GlobalDataDao {
static getIns() {
if (!this._ins) this._ins = new this();
return this._ins;
}
constructor() {
this.GlobalDataClass = GlobalData;
this._dataList = [];
}
getData(name/* string */) {
let dataIns = this.getDataIns(name);
if (!!dataIns) {
return dataIns.getData();
} else {
return null;
}
}
setData(name/* string */, data/* any */, notSave = false/* ?boolean */) {
let dataIns = this.getDataIns(name);
dataIns.setData(data, notSave);
return this;
}
config(configs/* Array */) {
/* 初始化数据
interface Config {
name: string;
data； any;
version?: number;
}
*/
for (let i in configs) {
let de = configs[i];
if (!!this.getDataIns(de.name)) {
/* 如果数据名重复，抛出错误 */
throw new Error('data name "' + de.name + '" is exist');
};
let dataIns = new GlobalData(de.name, de.data, de.version);
this._dataList.push(dataIns);
}
return this;
}
getDataIns(name/* string */) {
for (let i in this._dataList) {
if (this._dataList[i].name === name) {
return this._dataList[i];
}
}
return false;
}
}/*用法*/
let globalDataManeger = GlobalDataDao.getIns();
let configs = [
{
name: 'languageUsing',
version: 1,
data: {
name: '简体中文',
value: 'zh-cn'
}
}, {
name: 'userPreference',
version: 1,
data: {
theme: 'blue',
menu: 'side_bar'
}
}
];
globalDataManeger.config(configs);
console.log(globalDataManeger);
let languageUsing = globalDataManeger.getData('languageUsing');
console.log(languageUsing);
languageUsing.name = 'English';
languageUsing.value = 'en';
globalDataManeger.setData('languageUsing', languageUsing);以上是JavaScript物件導向輕鬆入門之綜合的詳細內容。更多資訊請關注PHP中文網其他相關文章！
