0

我试图将表单的使用限制为例如三次并保存值。然后显示，全部用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!!!');
  }
}
4

2 回答 2

1

您需要的是 Localstorage 中的另一个键值对。像伯爵这样的东西。

这是一个示例代码，我调整了您的代码以添加限制点击 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!!!');
  }
}
于 2013-06-04T19:26:43.587 回答
1

这是一个可以帮助您摆脱麻烦的工作小提琴：http: //jsbin.com/ojejaz/2/edit

编辑

此编辑将使您能够localStorage以[]

localStorage从 DOM 中获取对象并将其保存在 DOM 上并重用该对象始终是一种好习惯ready：

  //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;
  }
于 2013-06-04T19:41:05.427 回答