前端框架，dojo离线缓存

时间 2019-11-07

标签前端框架 dojo 离线缓存栏目 Dojo 繁體版

原文原文链接

前端框架，dojo离线缓存

上一篇文章咱们讲述了dojo的基本知识和基本的模块，这一次，由小西带给你们dojo的离线缓存讲解。详细开讲以前，先说几句题外话，英语很差，是硬伤，你们必定不能荒废英语啊。html

因为dojo的版本更新，旧的存储和缓存模块都被新的模块所替代，因此小西带给你们的是最新版本的方法，废话很少说，咱们直接进入到正题：前端

目标：完成断网状况下本地存储，须要进行验证json

参考博客文章：
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://blog.csdn.net/dojotoolkit/article/details/7402906
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引用的结构以下：
less

接下来，我直接贴出index.jsp的code:jsp

<!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，咱们一同交流学习。async