Question

我能够从form输入成功将数据存储在localStorage中，并将其显示在form输入下方。但每次我输入一些新查询并按下submit按钮时，它会显示更新的值，而不会进行先前的搜索。如何显示以前的所有搜索并存储值，以便即使刷新页面后我的搜索查询也会存储？我需要将它存储在某个数组中，还是localStorage中还有其他任何方法？我的代码是：

<!DOCTYPE html>
<html>
<head>
<script>
 function clickCounter()
  {
   if(typeof(Storage)!=="undefined")
     {
      localStorage.formInput = document.getElementById('theInput').value;
      document.getElementById('newText').innerHTML = localStorage.formInput;
     }
   else
    {
     document.getElementById("result").innerHTML="Sorry, your browser does not support web storage...";
    }
 }
</script>
</head>
<body>
 <input type='text' id='theInput' value='Write here' />
 <input type='button' onclick='clickCounter()' value='See what you wrote'/>
 <div id="result"></div>
  <p>You wrote: <span id='newText'></span> </p>
</body>
</html>

Answer 1

为了在localStorage中正确存储信息，您必须为其分配密钥。你正在做的只是将值存储在Javascript的内存中，这在页面刷新时不会持久存在。另请注意，当运行clickCounter（）时，页面将仅获取locaStorage键的值。所以除非你在页面加载时初始化函数，否则它不会在页面加载时放在apge上。

你想做这样的事情：

function clickCounter()
  {
   if(typeof(Storage)!=="undefined")
     {
      localStorage.formInput = document.getElementById('theInput').value;
      document.getElementById('newText').innerHTML = localStorage.formInput;
     }
   else
    {
     document.getElementById("result").innerHTML="Sorry, your browser does not support web storage...";
    }
 }

请注意，localStorage在不同设备和浏览器中的实现方式不同。您可能还想调查Modernizr以进行特征检测。另请注意，在某些浏览器中，（Chrome）如果用户清除了Cookie，则还会清除localStorage。

http://modernizr.com/

localStorage无法按预期工作

1 个答案: