Javascript 如何以数组的形式获取LocalStorage HTML5中存储的数据？_Javascript_Arrays_Html

Javascript 如何以数组的形式获取LocalStorage HTML5中存储的数据？

javascript arrays html

Javascript 如何以数组的形式获取LocalStorage HTML5中存储的数据？,javascript,arrays,html,Javascript,Arrays,Html,这个代码的作用是给我存储的汽车的名字 <html> <head> <script type="text/javascript"> var carArray=[]; function addToListCarArray(){ var newCarName=document.getElementById('carName'); carArray.push(newCarName

这个代码的作用是给我存储的汽车的名字

 <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>

第二次我尝试了，但没有成功

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;
            }

在您的第一个代码片段中，您似乎已使其正常工作。按部就班

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;
}

因此，元素的基本打印数组变量如下所示：

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节点时，它会自动转换为字符串
第三个代码段包含相同的错误，初始化不正确。这一次，行var resultCarNames[]应该是var resultCarNames=[]。除此之外，由于缺少关闭for
循环的函数，因此花括号有点乱。
如果要显示数组的字符串表示形式（即JSON），则必须按原样输出getItem
的结果。您的意思是这样的函数readcarames（）{If（window.localStorage）{var carNames=localStorage.getItem（“carNameKey”）；document.getElementById（“displayCarNames”）.innerHTML=carNames；}
。我以字符串形式获取它[“name1”、“name2”、“name3”]；但我希望它能以正确的数组格式显示，就像javaScript中数组上的toString方法一样。非常感谢您如此清楚地指出我犯的每一个错误…并清楚地告诉我javaScript编码风格的错误：）。。（关于花括号，我在粘贴时不知何故错过了花括号。其他方面，我会妥善处理）