我在一个页面上有一个输入表单,用于收集信息,这样我就可以在用户点击提交按钮时生成热图(使用输入数据)。
我正在使用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>
点击警告显示最大不透明度(&#34; mxO&#34;)是一个数字而不是字符串,而热量数据(&#34; htData&#34;)是一个对象。但是,当新窗口打开并且我使用typeof检查类型时,它告诉我最大不透明度是一个字符串。
我需要以正确的格式传递参数以获取热图以进行渲染。如果有人能指出我正确的方向,我将不胜感激! Thnaks!
答案 0 :(得分:0)
如果maxOpacity和minOpacity只是数字,为什么不将它们存储起来</ p>
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"));