如何将javascript数组存储在html5本地存储中？答案

【问题标题】：how to store javascript array in html5 local storage?如何将javascript数组存储在html5本地存储中？
【发布时间】：2014-01-17 11:21:15
【问题描述】：

我希望使用 html5 的本地存储功能来记住输入数组。目前我可以用权重输入填充数组，但是一旦我刷新它们就会消失。谁能帮我解决这个问题。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Home Fitness</title>
<link type="text/css" rel="stylesheet" href="styles.css" />

<script>



        var arrayX =10;
        var arrayY =2;
        var array=new Array(arrayX);
        var arrayIndex=0;


    for (x=0; x<array.length; x++)
        {
            array [x] = new Array(arrayY);            
        }

    function insert(val1, val2){
        if (arrayIndex >= arrayX)
        {
        alert("Recent Entries is Full");
        return false;
        }

        array[arrayIndex][0]=val1;
        array[arrayIndex][1]=val2;
        arrayIndex++;
        document.getElementById('weight1').value = '';
        document.getElementById('unit').value = '';
        }       

    function show() {
        var string='<b>Weight Entries</b><br>';
        for(i = 0; i < array.length; i++)
        {
        string+=''+array[i][0]+' '+array[i][1]+'<br>';
        }
        if(array.length > 0)
        document.getElementById('myDiv').innerHTML = string;
        }



</script>


</head>

<body>
<header>
    <h1>Weight Tracker</h1>
</header>

    <article>
        <h2>Weight Input</h2>
            <p>Please enter your current weight below and submit.</p>
    </article>


        <form name="form1">


            <table align="center" width="407">
            <tr>
        <td width="154" align="right"><b>Weight</b>    </td>
                    <td width="9"><b>&nbsp;:</b></td>
                    <td width="224">
                    <input type="integer" name="weight" id="weight1"/></td>

                <tr>
                    <td width="154" align="right"><b>Unit (KG,Ibs, Stone)</b></td>
                    <td width="9"><b>&nbsp;:</b></td>
                    <td width="224">
                    <input type="integer" name="unit" id="unit"/></td>
                </tr>
            </table>

                    </br>

            <table width="407">

                <input type="button" value="Submit Weight"
                       onclick="insert(this.form.weight.value,this.form.unit.value);"/>


                <input type="button" value="Recent Entries"
                       onclick="show();"/>

            </table>
        </form>

        </br>
            <div id="myDiv"></div>


        <nav>
            <ul>
                <li><a href="index.html">home</a></li>
            </ul>
        </nav>

【问题讨论】：

您了解过 localStorage API 的工作原理吗？
快速上网搜索，弹出很多教程。
提示：存储中的所有内容都必须是字符串。

标签： javascript arrays html local-storage

【解决方案1】：

只需对数组进行字符串化并在完成后将其保存到 localStorage。

localStorage["array"] = JSON.stringify(array)

【讨论】：

【解决方案2】：

<!doctype html>
<html lang="zh">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Template Index</title>
  <style>
  </style>

</head>
<body>

  <div>
    <input id="name"/>
  </div>


  <script>
  window.addEventListener("beforeunload", function () {
    var name = document.getElementById("name");
    localStorage.setItem("name", name.value);
  }, false);
  window.addEventListener("load", function (){
    var name = document.getElementById("name");
    name.value = localStorage.getItem("name");

  }, false);
  </script>
</body>
</html>

核心代码如上。你可以制定自己的逻辑来实现你的目标

https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Storage

【讨论】：