試圖使用localStorage限制x次使用表格

Question

我試圖限制一個窗體的使用，例如三次並保存這些值。然後用localStorage顯示。如何得到這個？請幫助。

HTML

<form name=colors> 
    <input type="Radio" name="colorin" value="white" checked> White 
    <br> 
    <input type="Radio" name="colorin" value="red"> Red 
    <br> 
    <input type="Radio" name="colorin" value="green"> Green 
    <br> 
    <input type="Button" name="" value="Click" onclick="color()"> 
    <div id='output'></div> 
</form> 

JAVASCRIPT

function color(){ 
    if (localStorage.getItem('thing') === null) { 
    var i 
    var colors = document.getElementsByName('colorin') 
    for (i=0;i<colors.length;i++){ 
     if (colors[i].checked) 
      var answer = colors[i].value; 
    } 
    localStorage.setItem('thing', answer); 
    var fillin = document.getElementById('output'); 
    fillin.innerHTML=localStorage.getItem('thing'); 
    } 
    else{ 
    alert('Exists!!!'); 
    } 
} 

Answer 1

你需要的是你的localStorage另一個關鍵值對。像Count這樣的東西。

這裏是一個示例代碼，我調整了您的代碼添加一個條件來限制點擊3次。

function color(){ 
    if (localStorage.getItem('count') === null) { 
    localStorage.setItem('count', 0); 
    saveColor(); 
    } else if(localStorage.getItem('count') < 3) { 
    var count = parseInt(localStorage.getItem('count'), 10); 
    count = count+1; 
    localStorage.setItem('count', count); 
    saveColor(); 
    } else { 
    alert('3 times limit reached'); 
    } 
} 
    function saveColor() { 
    if (localStorage.getItem('thing') === null) { 
    var i; 
    var answer; 
    var colors = document.getElementsByName('colorin'); 
    for (i=0;i<colors.length;i++){ 
     if (colors[i].checked) 
      answer = colors[i].value; 
    } 
    localStorage.setItem('thing', answer); 
    var fillin = document.getElementById('output'); 
    fillin.innerHTML=localStorage.getItem('thing'); 
    } 
    else{ 
    alert('Exists!!!'); 
    } 
} 

Answer 2

這裏的工作小提琴救你的麻煩：http://jsbin.com/ojejaz/2/edit

編輯

此編輯將讓您在localStorage所有選定的元素存儲在一個[]

形式

它總是很好的做法，從localStorage採取對象，並保持它在DOM ready和reus E中的物體：

//get required items from localStorage 
var choices = localStorage.getItem('colors'); 
var noOfTimes = Number(localStorage.getItem("no")); 

這裏no是次用戶的數量已經進入你的頁面。使用 功能： color - 你原來的功能 disableButton - 代碼禁用HTML按鈕

下面是更新color功能

//get required items from localStorage 
var choices = localStorage.getItem('colors'); 
var noOfTimes = Number(localStorage.getItem("no")); 

    // convert answers into an empty array if choices is null, or use choices 
var answers = (choices === null) ? [] : choices; 

//check if clicked number is more than 3 on page refresh 
if(noOfTimes >= 3) 
{ 
    disableButton(); 
} 

//your original function 
function color() { 
    // to disable button, rechecking 
    noOfTimes = Number(localStorage.getItem("no")); 

    //disable click if the number visited is greater than 3 
    if (noOfTimes >= 3) { 
     disableButton(); 
    } 
    // else increase visited count and search for the selected option, and push into array 
    else { 
     localStorage.setItem('no', noOfTimes+ 1); 
     var i, colors = document.getElementsByName('colorin'); 
     for (i = 0; i < colors.length; i++) { 
      if (colors[i].checked) 
      { 
       answers.push(colors[i].value); 
      } 
     } 
     // re-store the updated array in localStorage 
     localStorage.setItem('colors', answers); 
     // print out the elements in the array 
     document.getElementById('output').innerHTML = answers; 
    } 
    } 

    // to disable button after 3 times clicked 
    function disableButton() 
    { 
    document.getElementsByTagName('input')[3].disabled = true; 
    }