使用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

回答

相关问题