使用jQuery的离线存储HTML5_Jquery_Html

使用jQuery的离线存储HTML5

jquery html

使用jQuery的离线存储HTML5,jquery,html,Jquery,Html,我有一个简单的web移动应用程序，可以计算给定字段中的值。我一直在尝试将本地主机上的值保存到浏览器中，但没有成功。我正在使用jQuery保存这些值，但不知何故，它不起作用 <script> $(document).ready(function() { $('#field_wc').val(localStorage.getItem('wc') ); $('#field_tax').val(localStorage.getItem('tax') ); $('#field

我有一个简单的web移动应用程序，可以计算给定字段中的值。我一直在尝试将本地主机上的值保存到浏览器中，但没有成功。我正在使用jQuery保存这些值，但不知何故，它不起作用

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


$（文档）.ready（函数（）{
$（'#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'））；
});
$（“#字段_tax”）.keyup（函数（）{
$（'#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'））；
});

嗨！我优化了您的脚本并修复了其他一些问题：

使用局部作用域变量存储jQuery对象是最大的性能改进。在原始脚本中，您让jQuery为每个激发的keyup事件一次又一次地创建它们
我认为您希望将每个输入绑定到“Save”函数，但要意识到，您不必更新未更改的值！如果用户更新了#字段_tax，则仅保存该值
记住，您可以链接jQuery方法
我在这里使用了一个小技巧，我知道每个链的返回值仍然是我最初选择的jQuery对象，因此我可以将该对象存储在我为其分配keyup处理程序的同一行中&用localstorage中的内容填充该值
我将整个过程包装在一个for循环和一个自调用函数中，以创建一个易于维护的脚本

编辑-- 我遗漏了您错误地使用了setItem，因为其他人已经告诉您了

嗨！我优化了您的脚本并修复了其他一些问题：

使用局部作用域变量存储jQuery对象是最大的性能改进。在原始脚本中，您让jQuery为每个激发的keyup事件一次又一次地创建它们
我认为您希望将每个输入绑定到“Save”函数，但要意识到，您不必更新未更改的值！如果用户更新了#字段_tax，则仅保存该值
记住，您可以链接jQuery方法
我在这里使用了一个小技巧，我知道每个链的返回值仍然是我最初选择的jQuery对象，因此我可以将该对象存储在我为其分配keyup处理程序的同一行中&用localstorage中的内容填充该值
我将整个过程包装在一个for循环和一个自调用函数中，以创建一个易于维护的脚本

编辑--

我遗漏了您错误地使用了setItem，因为其他人已经告诉过您。

正如mdmullinax所说，您的setItem语法就是问题所在。此外，您可能希望抽象这些调用，并检查密钥是否存在。这是我使用的基本抽象层；我还为键命名了名称空间，以避免不同脚本之间的冲突。isJSON参数是可选的，这取决于我是想返回存储的JSON字符串，还是想让存储的JSON字符串为我转换回对象。此外，您的keyup应该在文档中，并且（假设您使用的是最新的jQuery[1.7.1]），您可能希望使用.on（）而不是.keyup（）

}))

您的问题似乎是您不正确地使用了

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')

我用一个小小的图书馆来展示和讲述。它允许通过

JSON.parse

和

stringify

将对象或字符串添加到localstore

点击“run”几次，输出应如下所示：

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
[]

您的问题似乎是不正确地使用了

localStorage.setItem