使用jQuery離線存儲HTML5

我有一個簡單的網頁移動應用程序，它計算給定字段中的值。我一直在試圖在瀏覽器中保存本地主機上的值，並沒有任何運氣。我正在使用jQuery來保存值，但不知何故它不起作用。使用jQuery離線存儲HTML5

 <script> 
    $(document).ready(function() { 
$('#field_wc').val(localStorage.getItem('wc')); 
$('#field_tax').val(localStorage.getItem('tax')); 
$('#field_sui').val(localStorage.getItem('sui')); 
$('#field_o').val(localStorage.getItem('o')); 
$('#field_fp').val(localStorage.getItem('fp')); 
$('#field_misc').val(localStorage.getItem('misc')); 
$('#field_t').val(localStorage.getItem('t')); 


    }); 

    $('#field_tax').keyup(function() { 
$('#field_wc').val(localStorage.setItem('wc')); 
$('#field_tax').val(localStorage.setItem('tax')); 
$('#field_sui').val(localStorage.setItem('sui')); 
$('#field_o').val(localStorage.setItem('o')); 
$('#field_fp').val(localStorage.setItem('fp')); 
$('#field_misc').val(localStorage.setItem('misc')); 
$('#field_t').val(localStorage.setItem('t')); 


    }); 
    </script>

來源

2012-01-23 user1078259

你['setItem']（http://dev.w3.org/html5/webstorage/#dom-storage- setitem）語法關閉'localStorage.setItem（key，value）' – MikeM

$(document).ready(function() { 
    var 
    key, 
    fields = ['wc', 'tax', 'sui', 'o', 'fp', 'misc', 't']; 

    for(key in fields) { 
    (function(){ 
     var 
     name = fields[key], 
     field = $('#field_' + name) 
      .val(localStorage.getItem(name) || '') 
      .on('keyup', function() { 
      localStorage.setItem(name, field.val()); 
      }); 
    }()); 
    } 
});

嗨！我優化你的腳本，並修正了一些問題吧：http://jsfiddle.net/q78d8/4/

本地使用範圍變量存儲的jQuery對象是最大的性能改進。在你原來的腳本中，你讓jQuery一遍又一遍地創建這些腳本，爲每個鍵盤事件觸發。
我想你想將每個輸入綁定到「Save」函數，但是要意識到，你不必更新哪個避難所沒有改變！如果用戶更新#field_tax，只保存價值
記住，你可以鏈jQuery方法
我用一個小竅門，在這裏，我哪裏知道，每個鏈的返回值，仍然是我最初選擇的jQuery對象，所以我可以將該對象存儲在同一行中，我在其中分配了一個鍵盤處理程序&用本地存儲中的內容填充值
我將整個東西包裝在一個for循環中，並且一個自調用函數創建易於執行維護的腳本

編輯 - 我遺漏了你錯誤地使用了setItem，因爲別人已經告訴過你了。

來源

2012-01-23 18:34:20

感謝您的解決方案！它像一個魅力！ – user1078259

我確實遇到過另一個問題，當我刷新瀏覽器時，所有的值似乎都在本地存儲中，但是當在控制檯中檢查它們並檢查它們的值是未定義的時。一旦我改變其中一個文件並運行一個計算，他們似乎就會被定義。 – user1078259

修復了這個問題，我加了|| ''，它將未定義的變成空字符串。 –

正如mdmullinax所說，你的setItem語法是問題所在。此外，您可能需要抽象這些調用，並檢查密鑰是否存在。這是我使用的基本抽象層;我也命名空間我的鍵，以避免不同腳本之間的衝突。 isJSON參數是可選的，具體取決於我是否想獲取存儲的JSON字符串，或者是否已將存儲的JSON字符串轉換回給我的對象。（假設你使用的是最新的jQuery [1.7.1]），你可能會想用.on（）代替.keyup（）

$(document).ready(function() { 

    var namespace = 'user1078259'; 

    storage = { 
     check: function (key) { 
      key = storage.nsKey(key); 
      return localStorage.hasOwnProperty(key); 
     }, 

     nsKey: function (key) { 
      return namespace + '_' + key; 
     }, 

     read: function (key, isJSON) { 
      key = storage.nsKey(key); 
      return isJSON || 0 ? JSON.parse(storage.read(key)) : localStorage.getItem(key); 
     }, 

     store: function (key, valueToStore, isJSON) { 
      key = storage.nsKey(key); 
      localStorage.setItem(key, isJSON || 0 ? JSON.stringify(valueToStore) : valueToStore); 
     } 
    }; 

    $('#field_wc').val(storage.check ? storage.read('wc') : '') 
    $('#field_tax').val(storage.check ? storage.read('tax') : '') 
    $('#field_sui').val(storage.check ? storage.read('sui') : '') 
    // and so on... 

    $('#field_tax').on('keyup', function() { 
     storage.store('wc', $('#field_wc').val()); 
     storage.store('tax', $('#field_wc').val()); 
     storage.store('sui', $('#field_wc').val()); 
     // and so on... 
    });

}）;

來源

2012-01-23 19:09:37 BrianFreud

看來您的問題在於您錯誤地使用了localStorage.setItem API。您需要一個密鑰和一個值來存儲。

這裏有一個localStorage的底漆：

// set 
localStorage.setItem('blah', 'blahblah') 

// check if it is set 
localStorage.getItem('blah') 

// check how many items are stored 
localStorage.length 

// another way to get the item 
localStorage.key(0); 

// remove the item 
localStorage.removeItem('blah')

Here's a Fiddle有一個很小的圖書館中，我寫了展示和說明的目的。它允許通過JSON.parse和stringify將對象或字符串添加到localstore。

打 '跑' 了幾次，輸出應該是這樣的：

blah is not set. setting to blahblah 
["blah"] 
blah is set to blahblah 
[] 
blah is not set. setting to blahblah 
["blah"] 
blah is set to blahblah 
[]

來源

2012-01-23 19:12:59 buley

使用jQuery離線存儲HTML5

回答

相關問題