我已經盡我所能，我可以得到一個解決方案，我需要我的計數值，即使我重繪 我的頁面。例如，如果我的計數達到 3，并且當我重繪 瀏覽器時，3 應該保留而不是從零開始。
我能得到任何幫助嗎？我目前正在學習本地存盤
這是代碼
import React, { useState } from "react";
export default function LocalStorageSetting() {
const [count, setCount] = useState(0);
const handleClick = () => {
setCount((prevCount) => prevCount 1);
};
localStorage.setItem("count", count);
return (
<div>
<button onClick={handleClick}>Increase</button>
<h1>{count}</h1>
</div>
);
}
uj5u.com熱心網友回復：
設定初始值時讀取
const [count, setCount] = useState( (localStorage.count || 0));
uj5u.com熱心網友回復：
@epascarello 的回答有效。您還可以使用您創建的 setCount 函式。
const [count, setCount] = useState(0);
setCount(localStorage.getItem("count") ?? 0);
另請注意，localStorage存盤字串鍵/值對。將其添加為值時，最后count應該有類似的東西。.toString()所以使用localStorage.setItem("count", count.toString()).
uj5u.com熱心網友回復：
您可以使用存盤在本地存盤中的值來啟動您的狀態，這樣，值計數將由 LS 值初始化。請記住，本地存盤將您的值保存為string，因此您需要在 init 之前決議該值以確保您的值將被鍵入為 Number
const [count, setCount] = useState(Number(localStorage.count || 0));
我喜歡做的事情是將值保存在更改值的保存函式中，將值更改保留在單個函式中。
const handleClick = () => {
setCount((prevCount) => prevCount 1);
localStorage.setItem("count", count);
};
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/506408.html
標籤：javascript 反应 本地存储
下一篇：替換所有特殊字符，期望第一次出現