如何获取前三次点击的历史记录？

Question

var myFunction = function() {
  if (typeof(Storage) !== "undefined") {
    var e = this.value;
    var current_value = localStorage.getItem("check");
    if (current_value == "null") {
      current_value = e;
    } else {
      current_value = current_value + "\n" + e;
    }
    localStorage.setItem("check", current_value);
    console.log(localStorage.getItem("check"));
  } else {
    console.log('Cannot access local storage.');
  }
};
var classname = document.getElementsByClassName("click_button")
for (var i = 0; i < classname.length; i++) {
  classname[i].addEventListener("click", myFunction);
}

function clickCount() {
  if (typeof(Storage) !== "undefined") {
    alert(localStorage.getItem("check"));
  } else {
    alert("Cannot access local Storage");
  }
}

<button type="button" id="first_button" class="click_button">first_button</button>
<button type="button" id="second_button" class="click_button">second_button</button>
<button type="button" id="third_button" class="click_button">third_button</button>

<button onclick="clickCount()" type="button" id="history_button">History_button</button>

当我点击history_button按钮时，我必须提醒最新点击的三个按钮（在first_button，second_button和third_button中）。这必须使用HTML5 localStorage API完成。在我的解决方案中，无论如何（我不是一个非常好的编码器，所以我的代码可能是错的），警报显示所有之前的点击，而不是只有最后三次点击。 i.Please Help。

Answer 1

您应该创建一个单击事件数组，并保持与堆栈相同的通道。

只要有点击，您就可以继续进行推送。当你点击历史记录按钮时，只需从数组中获取最后3个索引。

尝试以下

＆＃13;

＆＃13;

//change myFunction to this -

var myFunction = function() {
  if (typeof(Storage) !== "undefined") {
    var e = this.value;
    var arr = JSON.parse(localStorage.getItem("check"));


    if(arr instanceof Array){
      arr.push(e);
      localStorage.setItem("check", JSON.stringify(arr));
    }    
}


//in your click count method 
function clickCount() {
  if (typeof(Storage) !== "undefined") {
    var items = localStorage.getItem("check");
    if( items.length > 3){
       items = items.splice(items.length - 4, 3);
    }
    alert(items);
  } else {
    alert("Cannot access local Storage");
  }
}

＆＃13;

＆＃13;

＆＃13;

Answer 2

尝试在本地系统上运行此操作可能会对您有所帮助。

＆＃13;

＆＃13;

$(document).ready(function(){
	$('button').click(function(){
	  	if(localStorage.getItem('clickItem') === null){
	    	localStorage.setItem('clickItem', $(this).attr('id'));
	 	}
	  	else{
	    	var existing_val = localStorage.getItem('clickItem');
	    	localStorage.setItem('clickItem', existing_val+','+$(this).attr('id'));
		}
	});
});
	function clickCount(){
		$('#history').html('');
		var history = localStorage.getItem('clickItem');
		history = history.split(',');
		console.log(history.length-3);
		$(history).each(function(index){
			if(index > history.length -4) 
			$('#history').append(this+'<br>');
		});
	}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" id="first_button" class="click_button">first_button</button>
		<button type="button" id="second_button" class="click_button">second_button</button>
		<button type="button" id="third_button" class="click_button">third_button</button>
		<button onclick="clickCount()" type="button" id="history_button">History_button</button>
		<div id="history"></div>

＆＃13;

＆＃13;

＆＃13;