Store.js
PUBLISHED
概述
本文演示了如何使用“Store.js”,这是第三方JavaScript库,可以实现将浏览器中的数据存储到本地。 Store.js解决了DOM存储中存在的多个问题。DOM存储的主要问题是,它将保存的每一个值全部字符化(stringifie),所以其内容不能不能被仿如到一个对象的组值中。 也没有办法为本地存储(localStorage)添加一个事件侦听器。 以下是此Web应用程序中使用的JavaScript库的链接。 1) https://raw.github.com/kantorv/store-js/master/source/store.js 2) https://raw.github.com/marcuswestin/store.js/master/store.js 3) https://raw.github.com/andris9/jStorage/master/jstorage.min.js 该web应用程序使用了store.js中的三个JS库。 对于从本地存储中存储,检索和删除数据等操作,每一个库均有不同的特点。
1) store.js
在这个JS库中,数据以key-value对的方式存储。 store.js提供了诸如创建存储,设置key-value,获取key-value,为key添加事件监听器,使用对象导入和导出store的内容,并删除store中的内容。 store.js将一组数值放到某个介质中称为store。 不同的store之间彼此是分离的。 如下的代码创建了一个新的store。
创建store
var storage = new Store("storage");
使用“new”关键字创建新的store。 “存储”是新的store的名称,并保存在一个变量中。
设置Key-Value
新的key-value对可以使用set()方法设置。
storage.set("vehicle","car");
store.js保存数据时,会使用store的名称作为前缀,如键值“vehicle”在本地存储中改成了“store.settings.vehicle”,并且值=“car”。 该关键的应该永远是一个字符串。
设置默认值
创建一个带有默认值的对象,并把它作为第二个参数传递给构造函数。 默认值保存在实例变量“defaults”中。
var defaults = { "website": "google", "testing": false }; var newStore = new Store("newStore", defaults);
我们可以从该对象中设置和检索这些数据。 更改默认设置后,总是通过调用applyDefaults()的方法重新应用它们。 如果我们已经为一个带有默认值的键设置了一个新的值,当我们试图删除该键时,那么该键的值将使用默认值恢复。
newStore.defaults.website = "yahoo"; newStore.applyDefaults();
上面的代码中,键“website”的默认值设置成了“google”,后来被设置成了“yahoo”。 所以,当“website”被删除时,“yahoo”将被删除,键的值将被恢复为“谷歌”(这是默认值)。
检索数据
使用store.js中的get()方法可以从本地存储中检索某个数据。 如果值不存在于局部存储器中,它会返回未定义。
storage.get("vehicle");
对象
store中的内容可以视作一个对象,用来实现将数据从一个store导入或导出到另一个store中。 有两种方法用于该功能:toObject()和fromObject()。 “toObject()”:导出对象中一个store中的所有数据。 “fromObject()”:使用作为对象传入的数据完全替换一个store。即删除store中的所有内容,并用新值填充。 如果合并的第二个参数是false(这是默认的),那么完整的store将被删除(除了默认设置),并用新值取代。 如果合并的第二个参数为true,则新的值将被添加,但用相同的健值将被替换为新值。
var mylocalstore = storage.toObject(); localstore.fromObject(mylocalstore,"true");
在上面的代码中,“storage”的内容被导出并导入到“localstore”store中。 因此,“storage”的所有内容都合并“localstore”内容中。
事件
Store.js通过定期检查新值的方式实现支持事件。 默认周期为500ms。 要添加和删除监听器所用的方法是addEvent()和removeEvent()。 “fireEvent()”用于内部触发事件。 可以为特定的值或所有的值(“*”)添加事件监听器。
localstore.addEvent("vehicle", function (value, name, store) { console.log("Key name is : " + name); console.log("Store of color is : " + store); console.log("New value of color is : " + value); });
上面的代码中,为"vehicle" 添加了一个事件监听器,当颜色的值被更改或删除时会调用回调函数。 该函数使用了三个参数:新的值,值的名称(key)和store的名称。
localstore.removeEvent("vehicle", callback);
上面的代码中,删除了一个事件侦听器,且回调必须是一个指向前面通过addEvent()添加的函数的指针。
删除内容
store中的的内容可以使用remove()方法和clear()方法删除。 “clear()”会删除localStorage中的所有内容。 当指定了一个键时,“remove()”将删除其特定的值,如果该值有默认值,则该值将恢复到默认值。
localstore.remove("vehicle"); Store.clear();
除了这两个方法,"reset()"用于删除一个store中的的所有值,并恢复为默认值。
2) storage.js
该库几乎拥有和前面介绍的库相同的功能作,如创建一个store,并从store中设置,检索和删除数据。 在下面的代码将检查本地存储是否可用。
if(store.enabled) { console.log("localStorage is available"); } else { console.log("localStorage not available"); }
获取所有的值
“getAll()”方法将检索store中的所有值,并返回存储这些数据的数组。
var all_items=store.getAll(); showArray(all_items); function showArray(all_items){ var values = ""; console.log("All values stored : ") for (var i = 0; i < all_items.length; i++){ values=all_items[i]; console.log(i+") "+values); } }
3) jstorage.min.js
这个JS库也有类似从store中设置和获取数据的功能。
$.jStorage.set(key, value); $.jStorage.get(key);
“deleteKey()”是用于删除存储中的一个键(key)。 要求键(key)是字符串,否则将抛出一个异常。
$.jStorage.deleteKey(key);
"setTTL(key, ttl)"用来设置特定的键的超时时间。 时间单位是毫秒。
$.jStorage.set("mykey", "keyvalue"); $.jStorage.setTTL("mykey", 3000);
上面的代码设置了一个在三秒钟内到期的键。
"getTTL(key)"将返回某个键剩下的TTL(以毫秒为单位),如果返回0,表示该键的TTL没有被设置。
ttl = $.jStorage.getTTL("mykey");
"flush()"清空缓存。
$.jStorage.flush();
“index()”以数组的方式返回当前所有的正在使用的键。
var index = $.jStorage.index(); console.log(index);
“storageSize()”返回存储数据的大小(以字节为单位)。
$.jStorage.storageSize();
"currentBackend()"返回当前使用的存储引擎,如果没有则返回false。
$.jStorage.currentBackend();
如果存储可用,则
"storageAvailable()"返回ture。
$.jStorage.storageAvailable();
"listenKeyChange(key, callback)"侦听特定键的更新。
$.jStorage.listenKeyChange("mykey", function(key, action){ console.log(key + " has been " + action); });
"stopListening(key, callback)"停止监听键的改变事件。 如果设定了回调,只有被使用的回调被清除,否则,所有的监听器将被丢弃。
$.jStorage.stopListening("mykey");
上面的代码将取消所有监听“myKey”改变事件的监听器。