1 回答

TA貢獻(xiàn)1802條經(jīng)驗(yàn) 獲得超6個(gè)贊
為了使用 localStorage 保存應(yīng)用程序的狀態(tài),您需要?jiǎng)?chuàng)建如下函數(shù):
function save(slotIndex, clicks) {
let slots;
try {
slots = JSON.parse(localStorage.getItem('slots'));
} catch (e) {
console.error(e);
}
if (!slots) {
slots = [0, 0, 0, 0];
}
slots[slotIndex] = clicks;
localStorage.setItem('slots', JSON.stringify(slots));
}
function restore(slotIndex) {
let slots = [];
try {
slots = JSON.parse(localStorage.getItem('slots'));
} catch (e) {
alert('no slots found in local storage');
}
return slots[slotIndex] || 0;
}
這里有一個(gè)應(yīng)用程序的版本,其中包含我的更改。
需要注意的是,我們保存的狀態(tài)只是已發(fā)生的點(diǎn)擊次數(shù),這對(duì)應(yīng)于將用于在一個(gè)國(guó)家著色的下一個(gè)顏色。
我懷疑你真正想要保存的是國(guó)家本身的顏色。
這將需要更復(fù)雜的數(shù)據(jù)結(jié)構(gòu):
const slots = [
{
currentColorIndex: 2,
selectedCountries: [
{ id: 'spain', colorIndex: 3 },
{ id: 'usa', colorIndex: 1 },
]
},
... other slots
];
只要將其字符串化(localStorage 中的所有值都必須是字符串),這也可以存儲(chǔ)在 localStorage 中。在您的應(yīng)用程序中,每當(dāng)您更改 SVG 中的顏色時(shí),您都需要更新此結(jié)構(gòu),以確保它們彼此保持同步。
這是應(yīng)用程序開(kāi)始變得復(fù)雜的地方,我建議查看類似 MVC(模型視圖控制器)模式的內(nèi)容,以了解開(kāi)發(fā)人員通常如何處理此問(wèn)題。
添加回答
舉報(bào)