如何在本地存储中保存“游戏状态”？

Question

我正在编写一个非常简单的风险游戏，每当你点击一个国家时，它的颜色就会从红色变为绿色、黄色、紫色，然后再变为白色。

你从一张“全白”地图开始，我想做的是创建不同的插槽，让我可以说一旦我给一些地图上色，将游戏保存在那个插槽中，然后重新加载插槽号 1 例如和继续我离开的地方。对于 4 个不同的插槽，我怎么能做到这一点？世界地图是一个 SVG 文件，我将每个区域的颜色更改为event.target.style.fill.

拿这个代码：

HTML

    <svg   width="100%" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"

                viewBox="0 0 701 300" style="enable-background:new 0 0 701 300;" xml:space="preserve">

    

      <g onclick="changeColor(event)">

       <path class="st1" d="M308.6,112.3l-0.1,0.2l-0.1,0.2l-0.1-0.1h-0.1l-0.1-0.1l0.1-0.1h0.1l0.1-0.1l0.1-0.1L308.6,112.3L308.6,112.3z

            M313.4,111.6v0.2l0.1,0.1l-0.1,0.2v0.1l-0.1,0.1l-0.2,0.1l-0.1,0.1l-0.2-0.1l-0.2-0.2l-0.1-0.1v-0.2l0.2-0.1v-0.2v-0.1h0.2h0.1h0.1

           L313.4,111.6z M309.9,111.8L309.9,111.8l-0.2-0.1l-0.1-0.1v-0.1v-0.1h0.1h0.1l0.2,0.1v0.1L309.9,111.8L309.9,111.8z M312,110.6

           L312,110.6l-0.2,0.2l-0.1,0.2l-0.1,0.1v0.1l-0.1,0.2v0.1l-0.2,0.2v0.1h-0.1l-0.2,0.1l0,0v-0.1l-0.1-0.1v-0.1l-0.1-0.1v-0.1l-0.1-0.2

           l0.2-0.1l0.1,0.1l0.2-0.1h0.1l0.2-0.1l0.2-0.1v-0.1l0.2-0.1h0.2L312,110.6L312,110.6z M315.6,111.6l-0.1,0.1h-0.1h-0.1h-0.1v-0.1

           h0.1l0.2-0.1l0.1-0.1l0.1-0.1v-0.2V111l0.1-0.2l0.1-0.1l0.1-0.2l0.1-0.3l0.1-0.1h0.1l0.1,0.1v0.2v0.2v0.2v0.2l0,0l-0.1,0.2l-0.1,0.1

           H316L315.6,111.6L315.6,111.6z M308.8,110h0.1l0.1,0.1l0.1,0.2l-0.1,0.1v0.1l-0.2,0.3l0,0v-0.1l-0.1-0.3v-0.1v-0.1L308.8,110h0.1

           H308.8z M317.1,109.3L317.1,109.3l-0.1,0.3l-0.2,0.2h-0.2l-0.1,0.2l-0.2-0.1l0,0l0.1-0.1v-0.1l0.1-0.1l0.1-0.1h0.1l0.1-0.1h0.2l0,0

           L317.1,109.3l0.1-0.1l0.1,0.1H317.1z"/>

</g>

</svg>

CSS（初始颜色 = 白色）

.st1{fill:#FFFFFF;stroke:#000000;stroke-linejoin:round;}

这是现场演示和网站，您可以查看。我添加的最后一件事是用于保存和加载游戏的 UI。（可以在“加载/保存游戏”按钮上找到。

https://risk-git-saves-system.swilkery.vercel.app/

Answer 1

为了使用 localStorage 保存应用程序的状态，您需要创建如下函数：function save(slotIndex, clicks) {&nbsp; let slots;&nbsp; try {&nbsp; &nbsp; slots = JSON.parse(localStorage.getItem('slots'));&nbsp; } catch (e) {&nbsp; &nbsp; console.error(e);&nbsp; }&nbsp; if (!slots) {&nbsp; &nbsp; slots = [0, 0, 0, 0];&nbsp; }&nbsp; slots[slotIndex] = clicks;&nbsp; localStorage.setItem('slots', JSON.stringify(slots));}function restore(slotIndex) {&nbsp; let slots = [];&nbsp; try {&nbsp; &nbsp; slots = JSON.parse(localStorage.getItem('slots'));&nbsp; } catch (e) {&nbsp; &nbsp; alert('no slots found in local storage');&nbsp; }&nbsp; return slots[slotIndex] || 0;}这里有一个应用程序的版本，其中包含我的更改。需要注意的是，我们保存的状态只是已发生的点击次数，这对应于将用于在一个国家着色的下一个颜色。我怀疑你真正想要保存的是国家本身的颜色。这将需要更复杂的数据结构：const slots = [&nbsp;&nbsp;&nbsp; {&nbsp; &nbsp; currentColorIndex: 2,&nbsp; &nbsp; selectedCountries: [&nbsp; &nbsp; &nbsp; &nbsp;{ id: 'spain', colorIndex: 3 },&nbsp; &nbsp; &nbsp; &nbsp;{ id: 'usa', colorIndex: 1 },&nbsp; &nbsp; ]&nbsp; },&nbsp; ... other slots&nbsp;&nbsp;];只要将其字符串化（localStorage 中的所有值都必须是字符串），这也可以存储在 localStorage 中。在您的应用程序中，每当您更改 SVG 中的颜色时，您都需要更新此结构，以确保它们彼此保持同步。这是应用程序开始变得复杂的地方，我建议查看类似 MVC（模型视图控制器）模式的内容，以了解开发人员通常如何处理此问题。