如何在不使用数据库的情况下使用 jquery 将表单的最后一个输入设置为默认值？答案

【问题标题】：How to set the last input of my form to be the default value using jquery without using a database?如何在不使用数据库的情况下使用 jquery 将表单的最后一个输入设置为默认值？
【发布时间】：2016-02-04 08:42:05
【问题描述】：

我刚接触 symfony 框架，仍在研究如何在刷新页面后不使用数据库的情况下将表单中的最后一个输入（例如强度：79）设置为进度条的默认值。

这是我的代码的一部分：index.html.twig

<form>
    <fieldset>
        <legend>Set chest targets</legend>
        <div class="clear"></div>
        <div class="responsivelabel aligninline" >
        <label>Strength:</label>
        </div>

        <div class="responsiveelement aligninline" >
        goal: 
        <input type="text" size="3" id="strength_goal" />
        <div class="clear"></div>
        <div class="responsivelabel aligninline" >
            <label>&nbsp;</label>
        </div>
        <div class="responsiveelement aligninline" >
            <p class = "clean-gray">Save Changes</p>
        </div>
    </fieldset>
</form>

这是我的代码的一部分：index.html.twig

<script type="text/javascript">
    $(document).ready(function(){
        $("p.clean-gray").on('click', function(){
            var str = $("#strength_goal").val();
            var mov = $("#movement_goal").val();

            $("div.strength").css("width", str+'%')
            $("div.movement").css("width", mov+'%');
        });
    });
</script>

部分代码：index.html.twig

strength
<div class="prog-barwrap mini">
    <div class="prog-bar strength" style="width:0%" ></div>
</div>  
movement
<div class="prog-barwrap mini">
    <div class="prog-bar movement" style="width:0%"></div>
</div>

请告诉我怎么做。其他人说我应该使用 session 但我不知道如何在 symfony 中使用它。提前致谢。我目前使用的是 2.3 版本。

我尝试访问 w3school：http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_text_defaultvalue3 它告诉我如何设置默认值，但是否可以将我输入到表单中的最后一个数据作为新的默认值？

【问题讨论】：

localstorage 可用于持久化数据，除此之外，还不清楚您的代码应该做什么，因此很难提供帮助
@DelightedD0D 先生，我如何使用本地存储来做到这一点？如果我在 webmin 中使用我自己的服务器呢？
保存详细信息后页面是否会重新加载？如果没有，您可以在 JavaScript 本身中保持以前的值。
@Samir 先生，这实际上是我不久前的问题。我使用作为按钮，刷新页面时值会刷新并返回 0。
在这种情况下，您可以按照 DelightedD0D 的建议使用localStorage。参考这个w3schools.com/html/html5_webstorage.asp

标签： php jquery html symfony

【解决方案1】：

听起来您正试图在本地存储用户最后输入的值。

如果是这样，这是我经常要做的事情，这是我使用的方法。

只需包含以下 javascript，然后当您编写 html 时，将 data-local-key="someKeyName" 添加到您想要存储最后一个值的任何元素（您可以在其中命名 someKeyName 任何您想要的，没有空格）。当用户输入数据并点击离开时，该值被保存。当页面加载时，它会自动搜索存储的值并重新输入它们。添加任意数量的元素，无需额外的 js 代码。

Here is a working jsFiddle

<input type="text" id="test" data-local-key="someKeyName" value="some initial value">

javascript：

/**
 * Feature detect + local reference for simple use of local storage
 * Use like:
 * if (storage) {
 *    storage.setItem('key', 'value');
 *    storage.getItem('key');
 * }
 *
 */
var storage;
var fail;
var uid;
try {
  uid = new Date;
  (storage = window.localStorage).setItem(uid, uid);
  fail = storage.getItem(uid) != uid;
  storage.removeItem(uid);
  fail && (storage = false);
} catch (exception) {}

// using the feature
$(function() {

  $(document).on('blur', '[data-local-key]', function() {
    var $this = $(this);
    if (storage) {
      storage.setItem($this.data('local-key'), $this.val());
    }
  });
  if (storage) {
    $('[data-local-key]').each(function() {
      var $this = $(this);
      var storedVal = storage.getItem($this.data('local-key'));
      if(storedVal) $this.val(storedVal);
    });
  }
});

如果你只是想存储一些任意数据，只需使用上面的第一部分并像这样调用它：

存储值：

if (storage) {
   storage.setItem('key', 'value');
}

检索值：

if (storage) {
    storage.getItem('key');
}

【讨论】：