實施的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在頁面之間跳躍

回答

相關問題