javascript - 使用 localStorage 记住用户是否已经投票

Question

我正在尝试使用 localStorage 来记住用户是否已经投票。我有 5 个按钮 — 所有按钮都有一个唯一的 ID 来帮助我跟踪事物。

当用户单击这些按钮之一(例如 button-1)时，我会存储该按钮的 ID 和一个值。因此，在 localStorage 中，它看起来像这样:key:button-1，value:clicked。

如果用户已经单击(投票)该按钮，则需要显示一条消息，例如“感谢您的投票”。否则它应该保持该按钮处于事件状态。

如果我有多个按钮，我很难系统地执行此操作。我是否在 localStorage 中为每个按钮存储单独的 key ？我是否将它们附加到一个键下？我不确定。

我的 JSFiddle 是一个带有 3 个按钮的示例 http://jsfiddle.net/d8kt69rp

<小时/>

HTML

<div id="button-1">
  <button value="yes" onclick="recordFeedback(1, this);">Button 1</button>
</div>
<div id="button-2">
  <button value="yes" onclick="recordFeedback(2, this);">Button 2</button>
</div>
<div id="button-3">
  <button value="yes" onclick="recordFeedback(3, this);">Button 3</button>
</div>

JS

// If user has already voted, just display them a 'thanks' message
if (localStorage.getItem('button-1')) {
    var div = document.getElementById('button-1');
  div.innerHTML = 'Thank for your feedback';
}

// Record user feedback based on the button they clicked
function recordFeedback(id, response) {
    userResponse = response.value;
    var div = document.getElementById('button-' + id);
  if (userResponse === 'yes') {
     div.innerHTML = 'Thanks for your feedback.';
     console.log('button-' + id + ' was clicked.');
     localStorage.setItem('button-' +id, 'clicked');
  }
}

Answer 1

你可以这样做:

fiddle :http://jsfiddle.net/AtheistP3ace/d8kt69rp/2/

HTML(向 div 添加类):

<div class="button-div" id="button-1">
    <button value="yes" onclick="recordFeedback(1, this);">Button 1</button>
</div>
<div class="button-div" id="button-2">
    <button value="yes" onclick="recordFeedback(2, this);">Button 2</button>
</div>
<div class="button-div" id="button-3">
    <button value="yes" onclick="recordFeedback(3, this);">Button 3</button>
</div>

JS:

// Wait for DOM to be ready
document.addEventListener('DOMContentLoaded',
    function() {
        document.removeEventListener('DOMContentLoaded', arguments.callee, false);
        // Get all the button divs
        var buttons = document.getElementsByClassName('button-div');
        var index = 0, length = buttons.length;
        for (; index < length; index++) {
            // For each one check if it has a localStorage value
            if (localStorage.getItem(buttons[index].id) == 'clicked') {
                buttons[index].innerHTML = 'Thank for your feedback';
            }
        }
    }, false
);

至于每个人都有一把 key 还是将它们放在一起。这是个人喜好。我，我更愿意把它们放在一起。虽然代码多了一点，但感觉更干净。

fiddle :http://jsfiddle.net/AtheistP3ace/d8kt69rp/4/

function recordFeedback(id, response) {
    userResponse = response.value;
    var div = document.getElementById('button-' + id);
    if (userResponse === 'yes') {
        div.innerHTML = 'Thanks for your feedback.';
        // Get storage and parse it to an object
        var storage = JSON.parse(localStorage.getItem('userResponses'));
        // If storage doesn't exist initialize it
        if (!storage) storage = {};
        storage['button-' + id] = 'clicked';
        // Make it a string and set it
        localStorage.setItem('userResponses', JSON.stringify(storage));
    }
}

document.addEventListener('DOMContentLoaded',
    function() {
        document.removeEventListener('DOMContentLoaded', arguments.callee, false);
        var storage = JSON.parse(localStorage.getItem('userResponses'));
        // Don't waste time finding or looping if no votes
        if (storage) {
            var buttons = document.getElementsByClassName('button-div');
            var index = 0, length = buttons.length;
            for (; index < length; index++) {
                if (storage[buttons[index].id] == 'clicked') {
                    buttons[index].innerHTML = 'Thank for your feedback';
                }
            }
        }
    }, false
);