前端框架，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.jb51.cc/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","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，我们一同交流学习。

前端框架，dojo离线缓存

前端框架，dojo离线缓存

猜你在找的Dojo相关文章