Question

我希望使用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>

Answer 1

完成字符串化并在完成后将其保存到localStorage。

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

Answer 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

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

2 个答案: