2017-08-14 92 views
2

如何獲取前三次點擊的歷史記錄?

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來完成。在我做的解決方案中(Iam不是一個很好的編碼器,所以我的代碼可能是錯誤的),alert會顯示所有以前的點擊,而不是最後三次點擊。 i。請幫助。

+0

我昨天看到同樣的問題還有,它已被刪除。它成了非常受歡迎的問題。似乎 – Ravi

回答

1

嘗試通過您的本地系統可以幫助您運行此。

$(document).ready(function(){ 
 
\t $('button').click(function(){ 
 
\t \t if(localStorage.getItem('clickItem') === null){ 
 
\t  \t localStorage.setItem('clickItem', $(this).attr('id')); 
 
\t \t } 
 
\t \t else{ 
 
\t  \t var existing_val = localStorage.getItem('clickItem'); 
 
\t  \t localStorage.setItem('clickItem', existing_val+','+$(this).attr('id')); 
 
\t \t } 
 
\t }); 
 
}); 
 
\t function clickCount(){ 
 
\t \t $('#history').html(''); 
 
\t \t var history = localStorage.getItem('clickItem'); 
 
\t \t history = history.split(','); 
 
\t \t console.log(history.length-3); 
 
\t \t $(history).each(function(index){ 
 
\t \t \t if(index > history.length -4) 
 
\t \t \t $('#history').append(this+'<br>'); 
 
\t \t }); 
 
\t }
<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> 
 
\t \t <button type="button" id="second_button" class="click_button">second_button</button> 
 
\t \t <button type="button" id="third_button" class="click_button">third_button</button> 
 
\t \t <button onclick="clickCount()" type="button" id="history_button">History_button</button> 
 
\t \t <div id="history"></div>

enter image description here

1

您應該創建點擊事件的數組,並保持相同的througout作爲堆棧。

只要有點擊,您可以繼續進行推送。當你點擊歷史記錄按鈕時,只需從陣列中取出最後3個索引。

嘗試以下

//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"); 
 
    } 
 
}

+0

可以顯示一些代碼hint..like數組創建部分或推動部,在存儲陣列到本地存儲 –

+0

嘗試在回答編輯的代碼therez有點複雜的。 – Ashvin777