在页面刷新时，存储在数组中的数据变得清晰

Question

HTML

<body onload="load()">
    <button onclick="notes()">Click Here</button>
</body>

JS

<script type="text/javascript">
    let array = [];
    let text = "Hello!";

    function load(){
        //when this function is loaded on doing refresh, the data in array becomes [0].
        let y=JSON.parse(localStorage.getItem("notes"));
    }
        
    localStorage.setItem("note", JSON.stringify(text));

    function notes() {
        let z = JSON.parse(localStorage.getItem("note"));
         array.push(z);
         console.log(array);
        localStorage.setItem("notes", JSON.stringify(array));
    }
    </script>

每次单击按钮时，localstorage 中的文本都会进入数组，但问题是当我刷新页面时，发生负载 function，我第一次获取数据，然后存储在数组中的数据也被清除或设置为[ ]. 请提出任何解决方案！

Answer 1

将localStorage中的值分配给array var

let array = [];
let text = "Hello!";

// initialize array from storage
function load(){
  array = JSON.parse(localStorage.getItem("notes")) || [];
}

// update both the array and local storage
function notes() {
  array.push(text);
  localStorage.setItem("notes", JSON.stringify(array));
}

Answer 2

您的load function 中有一个小错字，因为您正在尝试获取关键notes的数据，但在notes function 中，您正试图获取关键note的数据。

将load function 中的语句更新为：

let y=JSON.parse(localStorage.getItem("note"));
array.push(y)

Answer 3

我不确定你在这里的意图是什么，但尝试以这种方式更改notes() function的第一行

let z = JSON.parse(localStorage.getItem("notes"));

注意复数形式的 localStorage 键

我还鼓励您使用常量来避免此类错误：

const NOTES_COLLECTION_LS_KEY = "notes";

或者一些不那么冗长的东西。