使用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则用户将看不到该值。 如果没有存储的值，换句话说，那就是输入只是空的。 当然，您可以在其中放置任何其他默认值。