实施的sessionStorage在页面之间跳跃

我有两个代码，一个是form.html：实施的sessionStorage在页面之间跳跃

<!DOCTYPE html> 
<html> 
<head> 
    <script src="D:\frameworks\jquery-1.11.3.js"></script> 
    <meta charset="ISO-8859-1"> 
    <title>Form</title> 
    <script type="text/javascript"> 
     $(function(){ 
      $("#sub").on("click", function(){ 
       sessionStorage.n1 = $("#no1").val(); 
       sessionStorage.n2 = $("#no2").val(); 
       location.href = "main.html"; 
      }); 
     }); 
    </script> 
</head> 
<body> 
    No1:<input type="text" id="no1"> 
    No2:<input type="text" id="no2"> 
    <br> 
    <input type="button" value="Submit" id="sub"> 
</body> 
</html>

，另一个是main.html中：

<!DOCTYPE html> 
<html> 
<head> 
    <script src="D:\frameworks\jquery-1.11.3.js"></script> 
    <meta charset="ISO-8859-1"> 
    <title>Main</title> 
    <script type="text/javascript"> 
     var n1_arr = new Array(); 
     var n2_arr = new Array(); 
     $(function(){ 
      n1_arr.push(sessionStorage.getItem("n1")); 
      n2_arr.push(sessionStorage.getItem("n2")); 
      $("#a").click(function(){ 
       location.href = "form.html"; 
      }); 
      $("#s").click(function(){ 
       for(var i = 0; i < n1_arr.length; i++) 
       { 
        alert(n1_arr[i] + " and " + n2_arr[i]); 
       } 
      }); 
     }); 
    </script> 
</head> 
<body> 
<input type="button" value="Add" id="a"> 
<input type="button" value="Show" id="s"> 
</body> 
</html>

我想这些对这样的工作：首先，打开main.html，点击'Add'按钮，form.html将在同一浏览器选项卡中打开。用户将在id为no1和no2的文本框中输入两个数字。然后，用户将点击“提交”，然后再次打开main.html（同样在浏览器选项卡中）。用户将继续这样做，只要他想。点击“显示”按钮，会发生用户输入的所有值的警报，分别成对出现。我怎样才能做到这一点？在这种情况下，只有最后输入的一对被警告。

来源

2015-09-04 AV8

您应该使用'setItem'在'sessionStorage'像'sessionStorage.setItem（ “N1” 来存储，$（“＃NO1 “）.VAL（））; sessionStorage.setItem（ “N2”，$（ “＃NO2”）VAL（））;' –

首先你要运行控制台命令： sessionStorage.clear（）;

main.html中

<!DOCTYPE html> 
<html> 
<head> 
<script src="D:\frameworks\jquery-1.11.3.js"></script> 

<meta charset="ISO-8859-1"> 
<title>Main</title> 
<script type="text/javascript"> 

    var n1_arr = JSON.parse(sessionStorage.getItem("n1")) || []; 
    var n2_arr = JSON.parse(sessionStorage.getItem("n2")) || []; 
    $(function(){ 



     $("#a").click(function(){ 
      location.href = "form.html"; 
     }); 


     $("#s").click(function(){ 
      for(var i = 0; i < n1_arr.length; i++) 
      { 
       alert(n1_arr[i] + " and " + n2_arr[i]); 
      } 
     }); 
    }); 
</script> 
</head> 
<body> 
<input type="button" value="Add" id="a"> 
<input type="button" value="Show" id="s"> 
</body> 
</html>

form.html

<!DOCTYPE html> 
<html> 
<head> 
<script src="D:\frameworks\jquery-1.11.3.js"></script> 
<meta charset="ISO-8859-1"> 
<title>Form</title> 
<script type="text/javascript"> 

    $(function(){ 
     $("#sub").on("click", function(){ 

      var n1 = sessionStorage.n1 || []; 
      if(n1.length > 0){ 
       n1 = JSON.parse(sessionStorage.n1); 
      } 
      n1.push($("#no1").val()); 
      sessionStorage.n1 = JSON.stringify(n1); 

      var n2 = sessionStorage.n2 || []; 
      if(n2.length > 0){ 
       n2 = JSON.parse(sessionStorage.n2); 
      } 

      n2.push($("#no2").val()); 
      sessionStorage.n2 = JSON.stringify(n2); 

      location.href = "main.html"; 

     }); 
    }); 
</script> 
</head> 
<body> 
No1:<input type="text" id="no1"> 
No2:<input type="text" id="no2"> 
<br> 
<input type="button" value="Submit" id="sub"> 
</body> 
    </html>

来源

2015-09-04 06:51:50 guvenckardas

这正是我想要的...谢谢你 – AV8

欢迎，请不要忘了给一票:) thaks – guvenckardas

看起来你会覆盖现有的n1和n2值。

sessionStorage存储键值对，值为字符串。当你做sessionStorage.setItem('n1', 'test')它会覆盖现有的值。

你需要做的是阅读的现有价值是什么（这将是一个字符串），解析它，在结尾处加上你的新值，然后将整个对象返回到存储。当存储一个对象时，它最好是stringify它作为JSON第一个。

如果你需要存储像数组等复杂的对象，你可能会发现使用indexedDB更好。

https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API

来源

2015-09-04 06:33:02 ste2425

实施的sessionStorage在页面之间跳跃

回答

相关问题