Question

所以我在这里获得了我的功能，可以计算你点击按钮的次数。它将使用localStorage保存总数，当你返回时......你猜对了......它给了我最后一个值。但现在我想创建很多这些，我不想复制和粘贴，浪费时间。我想创建一个函数，我可以通过参数传递一个值，它将创建一个localStorage。（参数值），将完成我的按钮计数。

<!DOCTYPE html>
<html>
<head>
<script>

function showNum() 
{
 document.getElementById("result").innerHTML=localStorage.click;
}
function clickCounter()
{
if(typeof(Storage)!=="undefined")
  {
  if (localStorage.click)
    {
    localStorage.click=Number(localStorage.click)+1;
    }
  else
    {
    localStorage.click=1;
    }
  document.getElementById("result").innerHTML="You have clicked the button " + localStorage.click + " time(s).";
  }
else
  {
  document.getElementById("result").innerHTML="Sorry, your browser does not support web storage...";
  }
}

function clickCounterNeg()
{
if(typeof(Storage)!=="undefined")
  {
  if (localStorage.click)
    {
    localStorage.click=Number(localStorage.click)-1;
    }
  else
    {
    localStorage.click=1;
    }
  document.getElementById("result").innerHTML="You have clicked the button " + localStorage.click + " time(s).";
  }
else
  {
  document.getElementById("result").innerHTML="Sorry, your browser does not support web storage...";
  }
}


</script>
</head>
<body onload="showNum()">
<p><button onclick="clickCounter()" type="button">Click me!</button></p>
<p><button onclick="clickCounterNeg()" type="button">Click me!</button></p>
<div id="result"></div>
<p>Click the button to see the counter increase.</p>
<p>Close the browser tab (or window), and try again, and the counter will continue to count (is not reset).</p>
</body>
</html>

基本上，我想说clickCounter（＆＃34; David＆＃34;）和/或clickCounterNeg（＆＃34; David＆＃34;）它会创建我上面的相同功能，但是存储数据到localStorage.David。我在stackoverflow论坛上搜索过，并且读到你可以在函数中使用[David]，但我已经厌倦了......你可以在这里看到。

<!DOCTYPE html>
<html>
<head>
<script>

function showNum(click) 
{
 document.getElementById("result").innerHTML=localStorage[click];
}

function clickCounter(click)
{
if(typeof(Storage)!=="undefined")
  {
  if (localStorage[click])
    {
    localStorage[click]=Number(localStorage[click])+1;
    }
  else
    {
    localStorage[click]=1;
    }
  document.getElementById("result").innerHTML="You have clicked the button " + localStorage[click] + " time(s).";
  }
else
  {
  document.getElementById("result").innerHTML="Sorry, your browser does not support web storage...";
  }
}

function clickCounterNeg()
{
if(typeof(Storage)!=="undefined")
  {
  if (localStorage.click)
    {
    localStorage.click=Number(localStorage.click)-1;
    }
  else
    {
    localStorage.click=1;
    }
  document.getElementById("result").innerHTML="You have clicked the button " + localStorage.click + " time(s).";
  }
else
  {
  document.getElementById("result").innerHTML="Sorry, your browser does not support web storage...";
  }
}


</script>
</head>
<body onload="showNum("p")">
<p><button onclick="clickCounter("p")" type="button">Click me!</button></p>
<p><button onclick="clickCounterNeg()" type="button">Click me!</button></p>
<div id="result"></div>
<p>Click the button to see the counter increase.</p>
<p>Close the browser tab (or window), and try again, and the counter will continue to count (is not reset).</p>
</body>
</html>

非常感谢帮助！

Answer 1

您的原始代码有效。你只需为clickCounterNeg实现相同的功能（并且您的HTML中存在sytnax错误 - "clickCounter("p")"应为"clickCounter('p')"）。这是代码的一个有效示例：http://jsfiddle.net/prankol57/rCv4k/

另外，如果您要将多个值动态保存到localStorage，最好使用单个命名空间（例如localStorage.clicks）来保存数据。然后，您可以分别使用JSON.parse和JSON.stringify来解析或存储信息。这样，您的名字就不会与其他名称发生冲突，并且更容易迭代这些值。

以下是单个命名空间下所有内容的一个工作示例（带有一些其他的小编辑）： http://jsfiddle.net/prankol57/6wVK8/

创建一个使用localStorage来保存数据的计数功能

1 个答案: