创建一个计数函数，使用localStorage保存数据

creating a counting function that uses localStorage to save data

本文关键字：函数 使用 localStorage 数据 保存 一个 创建      更新时间：2023-09-26

我在这里设置了函数来计算你点击按钮的次数。它将保存总与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("David")和/或clickCounterNeg("David")，它将创建与我上面相同的函数，但将数据存储到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>

非常感谢你的帮助!

您的原始代码可以工作。你只需要对clickCounterNeg做同样的事情(有一个语法错误在你的html - "clickCounter("p")"应该是"clickCounter('p')")。这是您的代码的一个工作示例:http://jsfiddle.net/prankol57/rCv4k/

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

下面是一个在单一命名空间下的所有内容的工作示例(还有一些其他的小编辑):http://jsfiddle.net/prankol57/6wVK8/

相关文章：