在不登录的情况下记住用户的表单输入

Question

我创建了一个简单的网站，访问者可以在其中对特定主题进行投票。它由一个问题和三个选项组成：

<template name="addVote">
    <div class="form-row choices">
        <label><input type="radio" name="vote" value="Yes"><i></i><span>Yes</span></label>
        <label><input type="radio" name="vote" value="No"><i></i><span>No</span></label>
        <label><input type="radio" name="vote" value="Undecided"><i></i><span>I’m Undecided</span></label>
    </div>
    <div class="form-row">
        <button class="button-submit">Submit and view results</button>
    </div>
</template>

我正在使用 Session Amplify 程序包将表单值存储在 localStorage 和数据库中，工作正常。

var vote = $('[name="vote"]:checked').val();
Meteor.call("addVote", vote, function(error, voteId) {
    SessionAmplify.set('vote', vote);
});

在访问者记录他们的投票后，他们将以酒吧购物车的形式显示全球投票结果。不过，他们只能在投票后才能看到结果。

我需要做的是在用户再次访问该网站时记住他们的投票，这样他们就可以绕过投票并直接查看结果，而无需强迫他们创建帐户或登录。我已经将他们的响应存储在 localStorage 中，只需运行 SessionAmplify.get('vote').

即可访问

如何使用这些存储的值来预填充表单并显示结果？

Answer 1

    if (localStorage.vote) {
        //user has already cast a vote, reflect this
        document.querySelector(".form-row").querySelector("input[value='"+localStorage.vote+"']").setAttribute("checked", true);
        //disable the submit
        document.querySelector(".button-submit").setAttribute("disabled", true);
    } 

    function setLocalStorageVote()
    {
         //call when user has cast the vote.
         localStorage.vote = document.querySelector(".form-row").querySelector("input[type='radio']:checked").value;
    }


 document.querySelector(".button-submit").onclick = setLocalStorageVote; //using onclick here just for demonstrating purposes. Use addEventListener in production code!

<template name="addVote">
    <div class="form-row choices">
        <label><input type="radio" name="vote" value="Yes"><i></i><span>Yes</span></label>
        <label><input type="radio" name="vote" value="No"><i></i><span>No</span></label>
        <label><input type="radio" name="vote" value="Undecided"><i></i><span>I’m Undecided</span></label>
    </div>
    <div class="form-row">
        <button class="button-submit">Submit and view results</button>
    </div>
</template>

应该做的。只需存储一个 布尔值 并绕过代码即可根据 localStorage.vote 的值获得结果。 localStorage 在投票的客户端上设置为无限期。请注意，我已经删除了 Meteor 代码，因为我不能在 fiddle 中使用它。这只是为了证明 localStorage 有效。

http://jsfiddle.net/8fzur0h9/1/

在不登录的情况下记住用户的表单输入

Remembering user's form input without logging in

javascript

meteor

local-storage

amplifyjs