Question

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

当用户点击其中一个按钮（例如button-1）时，我会将该按钮的ID存储为值。所以在localStorage中，它看起来像这样：key: button-1, value: clicked。

如果用户已经点击（投票）该按钮，则需要显示一条消息，例如“感谢您投票”。否则它应该保持该按钮处于活动状态。

如果我有多个按钮，我很难系统地这样做。我是否为localStorage中的每个按钮存储了一个单独的密钥？我是否将它们添加到一个键下？我不确定。

我的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

您可以这样做：

小提琴：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
);

至于为每个人拥有一把钥匙或者将他们放在一起。这个人的偏好。我，我宁愿把它们放在一起。虽然代码更多，但感觉更干净。

小提琴：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
);

如果用户已经投票，使用localStorage记住

1 个答案: