使用jStorage设置并获取输入值

Question

当我单击“保存”按钮时，我正在使用jStorage来存储输入的值。然后我想将存储的值设置为页面加载时的当前输入值。但它工作得不太好。

HTML

<input type='text' id='name'>
<div id="save">Save</div>

JS

$('#save').click(function() {
  $.jStorage.set("key", $("#name").val());
});

var input_value = $.jStorage.get("key");

Answer 1

有点纠结：

$.jStorage.set("key", $("#name").val());

var input_value = $.jStorage.get("key");

当您将选择器传递给jQuery时，您必须传递一个有效的字符串，而不仅仅是原始的CSS选择器语法。也就是说，你必须先将选择器表达式转换为JavaScript，然后通过创建一个字符串常量来实现。

编辑 - 如果您希望<input>在页面加载时显示上次保存的值，您可以执行以下操作：

$(function() {
  $('#name').val( $.jStorage.get("key") || "" );
});

将活动包装在$(function() { ... })包装器中可确保代码在浏览器看到并解析<input>字段之前不会运行，但在用户看到页面加载后仍然很快（基本上立即）。

在jStorage调用之后添加额外的|| ""位可确保如果值为null或undefined，则用户将看不到该值。如果没有存储的值，换句话说，那就是输入只是空的。您当然可以在其中添加任何其他默认值。