前端框架，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