前端框架，dojo离线缓存
上一篇文章我们讲述了dojo的基本知识和基本的模块，这一次，由小西带给大家dojo的离线缓存讲解。详细开讲之前，先说几句题外话，英语不好，是硬伤，大家一定不能荒废英语啊。
由于dojo的版本更新，旧的存储和缓存模块都被新的模块所替代，所以小西带给大家的是最新版本的方法，废话不多说，我们直接进入到正题：
目标：完成断网情况下本地存储，需要进行验证
参考博客文章：
http://dojotoolkit.org/reference-guide/1.7/dojo/json.html
http://dojotoolkit.org/reference-guide/1.9/dojo/store/Cache.html
http://dojotoolkit.org/reference-guide/1.9/dojo/store.html#dojo-store
http://dojotoolkit.org/reference-guide/1.9/dojo/store/JsonRest.html
http://www.voidcn.com/article/p-ndycdodh-zq.html
http://www.sitepen.com/blog/2008/09/23/effortless-offline-with-offlinerest/
服务器code就不给大家贴了，只是请求并返回一堆json数据，内容如下：
[{"id":"1","sex":"male","school":"SCU","age":"18","studentName":"mexiQQ1"}, {"id":"2","sex":"female","school":"SDU","age":"19","studentName":"mexiQQ2"}, {"id":"3","sex":"female","school":"SDU","age":"19","studentName":"mexiQQ3"}]
主要说一下我的页面如何编写，如何实现了dojo的离线缓存功能：
js引用的结构如下：
接下来，我直接贴出index.jsp的code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tutorial: Hello Dojo!</title>
</head>
<body>
<h1 id="greeting">Hello Dojo</h1>
<h1 id="greeting_test">Hello localFrage</h1>
<!-- load Dojo -->
<script src="js/dojo/dojo.js"
data-dojo-config="async: true"></script>
<!-- load localFrage -->
<script src="js/localForage/dist/localforage.js"></script>
<script>
function test_jsonRest_Cache(){
require([
'dojo/store/JsonRest',
'dojo/store/Memory',
'dojo/store/Cache',
'dojo/store/Observable',
'dojo/json'
], function (JsonRest,Memory,Cache,Observable,json) {
masterStore = new JsonRest({
target: "/TestServer/testServer",
idAttribute: "studentName"
});
cacheStore = new Memory();
inventoryStore = Cache(masterStore, cacheStore);
inventoryStore.query().then(function(results){
alert(json.stringify(results));
});
});
}
function test_localForage()
{
require(["dojo/request","localForage/dist/localforage",], function(request,localforage){
request("http://192.168.0.103:8080/TestServer/testServer").then(function(data){
alert(data);
localforage.ready(function() {
localforage.setItem('key', data, console.log);
});
}, function(err){
alert("It's wrong!!");
}, function(evt){
alert("It's here!!");
});
});
}
function test_get_from_localForage()
{
require(["localForage/dist/localforage"],function(localforage)
{
localforage.getItem('key', alert);
});
}
</script>
<button onclick="test_jsonRest_Cache()">get_info_save_cache</button>
<button onclick="test_localForage()">get_info_save_localFrage</button>
<button onclick="test_get_from_localForage()">get_info_from_localFrage</button>
</body>
</html>
上述code中，我们不仅使用了dojo的离线缓存，同时验证了localFrage的离线存储，在接下来的博文中，小西也会带给大家。如果有问题，大家可发送邮件到lijianwei@139.me，我们一同交流学习。