Question

本规范适用于存放汽车名称

 <html>
<head>
    <script type="text/javascript">
        var carArray=[];
        function addToListCarArray(){
            var newCarName=document.getElementById('carName');
            carArray.push(newCarName.value);
            if(window.localStorage){
                localStorage.setItem("carNameKey",JSON.stringify(carArray));
            }

        }


        function readCarNames(){
            if(window.localStorage){
                var carNames=localStorage.getItem("carNameKey");
                carNames = JSON.parse(carNames);
                for (i=0;i<carNames.length;i++){
            alert(carNames[i]);
        }
            }
        }
    </script>
<title>Local Storage Demo</title>
</head>
<body>
<h1>Demo of Local Strorage</h1>
<div>
    <input type="text" id="carName" name="carName"> </input>
    <button onclick="addToListCarArray()">Add Car</button>
    <button onclick="readCarNames()">Display</button>
    <p id="displayCarNames"></p>
</div>
</body>
</html>

但是如何以数组的形式获取存储的汽车名称并显示它。我尝试以两种方式修改readCarNames（）函数，但它们都没有工作。我搜索但到处都是关于传递对象和存储我能够做但不能以数组的形式检索它然后打印它

这是我试图解决但没有奏效的问题（编辑：由于我错误的编码风格而没有成功）

function readCarNames(){
            if(window.localStorage){
                var carNames=localStorage.getItem("carNameKey");

                var resultCarNames[]=JSON.parse(carNames);
                resultCarNames.toString();
                document.getElementById("displayCarNames").innerHTML = resultCarNames;

            }

和我尝试但没有奏效的第二个。

function readCarNames(){
            if(window.localStorage){
                var carNames=localStorage.getItem("carNameKey");
                carNames = JSON.parse(carNames);
                var resultCarNames[];
                for (i=0;i<carNames.length;i++){
                resultCarNames.push(carNames[i]);
            }
            resultCarNames.toString();
            document.getElementById("displayCarNames").innerHTML = resultCarNames;
            }

编辑：正如我所指出的那样，我在答案中所犯的错误能够解决这个问题。

以下是工作代码

function readCarNames(){
            if(window.localStorage){
                var carNames=localStorage.getItem("carNameKey");
                var resultCarNames=JSON.parse(carNames);
                document.getElementById("displayCarNames").innerHTML = resultCarNames;
                }
        }

Answer 1

在您的第一个代码段中，您似乎正常运行。按行

carNames = JSON.parse(carNames);

你有carNames变量中的字符串数组。毕竟，您在以下for循环中迭代它。您可以通过添加打印它的行来尝试它，例如

alert(carNames);

如果要将其打印到元素，可能需要以下内容：

document.getElementById('displayCarNames').innerHTML = carNames;

所以你对元素的基本打印数组变量看起来像这样：

function readCarNames(){ var storedString = localStorage.getItem("carNameKey"); var parsedArray = JSON.parse(storedString); alert(parsedArray); document.getElementById('displayCarNames').innerHTML = parsedArray; }

现在，为什么它在你的代码中不起作用：在你的第二和第三个片段中，你需要知道在JavaScript中，你没有用var arr[]初始化一个数组变量。您只需说var arr = []或var arr = JSON.parse(string)即可。所以这个

var resultCarNames[]=JSON.parse(carNames);

实际上应该只是

var resultCarNames=JSON.parse(carNames);

然后它会起作用。

另请注意，variable.toString()会返回一个新变量，但不会更改原始变量。例如：

var a = [1, 2, 3]; var b = a.toString(); console.log(a); // [1, 2, 3] - an array console.log(b); // "1,2,3" - a string

因此，在您的代码中，行resultCarNames.toString();根本不执行任何操作。但是，当通过.innerHTML将变量分配给DOM节点时，它会自动转换为String。

第三个片段包含初始化不正确的错误。这一次，行var resultCarNames[];应为var resultCarNames = [];。除此之外，你有一些花括号的混乱，因为你错过了关闭for周期的那个。

如何以数组的形式返回LocalStorage HTML 5中的存储数据？

1 个答案: