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

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中的文本进入数组，但问题是当我刷新页面时，加载功能发生，我第一次获取数据，然后也是数组中存储的数据清除或设置为 [ ]。请提出任何解决方案！

Answer 1

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

将 load 函数中的语句更新为：

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

Answer 2

将 localStorage 中的值分配给您的 array 变量

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 3

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

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

注意复数形式的 localStorage 键

我也鼓励你使用常量来避免这种错误：

const NOTES_COLLECTION_LS_KEY = "notes";

或者更简单的内容。

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

On page refresh, the data stored in array becomes clear

javascript

arrays

local-storage

page-refresh