使用 localStorage 传递变量。 JSON.parse 似乎不起作用

Question

我在一个页面上有一个输入表单来收集信息，当用户单击提交按钮时，这些信息将允许我生成热图（使用输入数据）。

我正在使用 JSON.stringify 设置 localStorage 和 JSON.parse 以正确格式检索数据，但 typeof 告诉我数字是字符串，数组是对象。

这里是输入代码：

<h1>Heatmap Parameter Setup</h1>


    <p>Maximum Opacity =  <input id="maxO" type="number" name="maxO"
   min="0" max="1" step=".01" value="1.0" ></p>
    <p>Minimum Opacity = <input id="minO" type="number" name="minO"
   min="0" max="1" step=".01" value="0.0"></p>

    <p>Enter <strong>heatmap data</strong> below. </p>
     <p>Data should be in the form: [{x:123, y: 456, value: 98, radius, 85}, {x:... }, { ... }]  </p>
     <p><input id="heatData" type="text" name="heatData" value="[{x: 597, y: 358, value: 25, radius: 33}, {x: 567, y: 422, value: 25, radius: 33}, {x: 552, y: 338, value: 75, radius: 78}, {x: 487, y: 338, value: 25, radius: 33}, {x: 522, y: 365, value: 100, radius: 100}, {x: 452, y: 352, value: 50, radius: 55}, {x: 437, y: 405, value: 0, radius: 10}, {x: 517, y: 388, value: 75, radius: 78}]"></p>

  <p><input type="submit" name="Submit" value="Submit" onclick="pageSel()"></p>

<script>      
  function pageSel() {
    var maxOpacity = document.getElementById("maxO").value;
    var minOpacity = document.getElementById("minO").value;
    var heatData = document.getElementById("heatData").value;

    localStorage.setItem("mxO", JSON.stringify(maxOpacity));
    localStorage.setItem("mnO", JSON.stringify(minOpacity));
    localStorage.setItem("htDat", JSON.stringify(heatData));

    alert("Saved: Maximum opacity = " +  JSON.parse(localStorage.getItem("mxO")) + ", Minimum opacity = " + JSON.parse(localStorage.getItem("mnO")) + ", Heat Data = " + JSON.parse(localStorage.getItem("htDat")));
  window.open("test_new3_min.html")
}  

</script>

这里是点击打开的测试窗口的代码：

    <p>Verifying input data</p>


<p id="demo2"></p>
<p id="demo3"></p>
<p id="demo8"></p>

<script>

  var maxOpacity = JSON.parse(localStorage.getItem("mxO"));
  var minOpacity = JSON.parse(localStorage.getItem("mnO"));
  var heatData = JSON.parse(localStorage.getItem("htDat"));

  document.getElementById("demo2").innerHTML = "Maximum Opacity is = " + maxOpacity
  document.getElementById("demo3").innerHTML = "Minimum Opacity is = "+ minOpacity
  document.getElementById("demo8").innerHTML = "Heat Data is = " + heatData
 alert( "Opacity type is " + typeof maxOpacity + "Heat Data type is " + typeof heatData ) 
</script>

Onclick 警报显示最大不透明度 ("mxO") 是一个数字而不是字符串，而热量数据 ("htData") 是一个对象。但是，当新窗口打开并使用 typeof 检查类型时，它告诉我最大不透明度是一个字符串。

我需要以正确的格式传递参数以获取要渲染的热图。如果有人能指出我正确的方向，我将不胜感激！谢谢！

Answer 1

如果 maxOpacity 和 minOpacity 只是数字，为什么不按原样存储它们

 localStorage.setItem("mxO", maxOpacity); 
 localStorage.setItem("mnO", minOpacity);?

但如果你真的想使用 json 你可以这样做：

 //storing
localStorage.setItem("maxmin", JSON.stringify({max: maxOpacity, min: minOpacity}));
//retrieving
var maxMin = JSON.parse(localStorage.getItem("maxmin"));

改变数据的格式，不要字符串化：

<input type="hidden" id="heatData" value='[{"x": 597, "y": 358, "value": 25, "radius": 33}, {"x": 567, "y": 422, "value": 25, "radius": 33},{"x": 552, "y": 338, "value": 75, "radius": 78},{"x": 487, "y": 338, "value": 25, "radius": 33},{"x": 522, "y": 365, "value": 100, "radius": 100},{"x": 452, "y": 352, "value": 50, "radius": 55},{"x": 437, "y": 405, "value": 0, "radius": 10},{"x": 517, "y": 388, "value": 75, "radius": 78}

//storing
var heatData = document.getElementById("heatData").value;
localStorage.setItem("htDat", heatData);

//retrieving
var heatData2 = JSON.parse(localStorage.getItem("htDat"));