Store.js

概述

本文演示了如何使用“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”改变事件的监听器。

文件附件: