在从会话存储重新加载页面时预填充表单数据答案

【问题标题】：pre populate form data on page re load from the session storage在从会话存储重新加载页面时预填充表单数据
【发布时间】：2015-09-01 12:55:12
【问题描述】：

我有一个 HTML from 来捕获字符串数据。当我通过ajax点击保存按钮时，我正在保存那些。但是范围还包括在检查值不为空后，一旦我使用橙色保存按钮将焦点移出表单字段，就将数据保存在会话存储中。这个想法是使用存储在会话存储中的值预先填充每个表单字段。一切正常，但我无法弄清楚会话存储部分。困难的部分是如何为每个表单字段分配一个唯一键，并使用该键在字段中查找和预加载值。

这是我的 JS

$('.wrapper').remove()

function renderInput() {
    var inputField = '<div class="wrapper"><input class="zoom-text-field" type="text" value=""/><span class="close">save</span></div>';
    return inputField;
}

function hideZoomFiled(e, textData) {
    $(e).parent().parent().children('.students-name-collection').val(textData);
    console.log(textData)
    $(e).parent().hide();
    $('.students-name-collection').attr('disabled', false);
    $(e).prop('disabled', false);
}

function disableInputField(obj) {
    $('.students-name-collection').attr('disabled', false);
    $(obj).attr('disabled', true);
}

$('.students-name-collection').on('focus', function () {
    disableInputField(this);
    $(this).next('.wrapper').focus();
    $('.wrapper').remove();
    $(this).parent().append(renderInput());

    var textData = '';
    $('.close').on('click', function () {
        textData = $(this).parent().children().val();
        hideZoomFiled(this, textData);
    });

    $('.zoom-text-field').on('blur', function(){
        if($(this).val() !== ''){
            //save the value in the sessionstorage
//This is where I am getting lost

        }
    });
});

$('#submitForm').on('click', function(){
    sessionStorage.clear();
})

// on page load read the session storage and pre fill the form fields

这是我的小提琴

http://jsfiddle.net/sghoush1/ykshgrxg/5/

【问题讨论】：

你查过how to use SessionStorage，并尝试过实现吗？
@SpencerWieczorek -- 是的 jsfiddle.net/sghoush1/ykshgrxg/6 我要空了。
该示例将该数据保存到会话存储中。 I've added a console.log() to show that。输入一个值，点击“保存”，然后点击“运行”，你会发现数据就在那里。
@SpencerWieczorek -- 你能分享你在哪里做的链接吗？
@SpencerWieczorek -- 是的..这正是我迷路的地方。我刚刚用您的评论更新了问题

标签： javascript jquery

【解决方案1】：

这是您如何处理此问题的方法，正如您指出的主要问题是如何确定如何保存每个输入项，以及如何在页面加载时将其放回原处。你可以做的是给每个项目一个index，从0到4。

要获取你所在元素的索引，你可以给它添加一个selected类，然后使用那个类来通过.index($('.selected'))找到元素的位置，当然我们可以删除那个类我们已经完成了。这可以用作 sessionStorage 的key，那么textData 就是值：

// Get the index of the input item we are on
$(this).addClass("selected");
var key = $(".students-name-collection").index($('.selected'));
$(this).removeClass("selected");

$('.close').on('click', function () {
    var textData = $(this).parent().children().val();
    hideZoomFiled(this, textData);
    if(!!textData){
        //save the value in the sessionstorage
       sessionStorage.setItem(key, textData);
    }
});

然后，为了加载它们，您可以使用 jQuerys .each 并在 .students-name-collection 类上使用 sessionStorage 的索引为每个输入提供正确的值：

// on page load read the session storage and pre fill the form fields 
$('.students-name-collection').each(function(index) {
    if(sessionStorage[index])
        $(this).val(sessionStorage[index]) 
});

Here is a Fiddle Example

【讨论】：