You can use HTML 5 LocalStorage. But it will only work on latest browsers. If you want suppoert for old browsers as well then you might be interested in this question as well. If your user base doesn't use very old browsers then you can do it with LocalStorage like this,
In template's created callback,
Template.yourTemplate.created = function () {
var template = this;
var userVote = null;
if(typeof(Storage) !== "undefined") {
userVote = localStorage.getItem("userVote");
}
template.userVote = new ReactiveVar(userVote); //or you can use Session.setDefault("userVote", userVote)
}
When user clicks on the up or down button
Template.yourTemplate.events({
'click #upButton': function (ev, template) {
localStorage.setItem("userVote", "up");
template.userVote.set("up"); // or Session.set("userVote", "up");
},
'click #downButton': function (ev, template) {
localStorage.setItem("userVote", "down");
template.userVote.set("down"); // or Session.set("userVote", "down");
}
});
Then to disable buttons, you can do something like this in your helpers,
Template.yourTemplate.helpers({
'isUpButtonDisabled': function () {
var template = Template.instance();
var userVote = template.userVote.get(); // or Session.get("userVote");
return userVote === "up";
},
'isDownButtonDisabled': function (ev, template) {
var template = Template.instance();
var userVote = template.userVote.get(); // or Session.get("userVote");
return userVote === "down";
}
});
Update: This answer uses localStorage
so that the application can keep track of the user's vote even when user visits the same site at a later date, which was what OP was trying to do, since user can vote without a login.
EDIT: Based on your comment to have different votes for different templates/topics. Assuming you have current topic's id in template's current data. You can do something like this,
In template's created callback,
Template.yourTemplate.created = function () {
var template = this;
template.userVote = new ReactiveVar(null); //or you can use Session.setDefault("userVote", null)
template.autorun(function () {
var data = Template.currentData();
var topicId = data.topicId;
var userVote = null;
if(typeof(Storage) !== "undefined") {
userVote = localStorage.getItem("userVote" + topicId);
}
template.userVote.set(userVote); //or you can use Session.set("userVote", userVote);
});
}
When user clicks on the up or down button
Template.yourTemplate.events({
'click #upButton': function (ev, template) {
var topicId = this.topicId;
localStorage.setItem("userVote" + topicId, "up");
template.userVote.set("up"); // or Session.set("userVote", "up");
},
'click #downButton': function (ev, template) {
var topicId = this.topicId;
localStorage.setItem("userVote" + topicId, "down");
template.userVote.set("down"); // or Session.set("userVote", "down");
}
});
Then to disable buttons, you can do something like this in your helpers,
Template.yourTemplate.helpers({
'isUpButtonDisabled': function () {
var template = Template.instance();
var userVote = template.userVote.get(); // or Session.get("userVote");
return userVote === "up";
},
'isDownButtonDisabled': function (ev, template) {
var template = Template.instance();
var userVote = template.userVote.get(); // or Session.get("userVote");
return userVote === "down";
}
});