javascript 有没有一种方法可以将我svelte store存储在本地存储中，这样它就不会在页面刷新时重置？

pgccezyw 于 2023-04-19 发布在 Java

关注(0)|答案(2)|浏览(104)

我从我的苗条商店获取的内容在页面刷新时消失了，有没有办法阻止它重置，这样它就可以留在页面上，即使我重新加载？对不起，如果这个问题有点模糊，我不知道如何真正措辞。
苗条商店

import { writable } from "svelte/store";

export const leagueTable = writable([]);

const fetchTable = async () => {
    const url = `https://soccer.sportmonks.com/api/v2.0/standings/season/19734?api_token=API_KEY`;
    const res = await fetch(url);
    const data = await res.json();
    leagueTable.set(data.data);
}
fetchTable();

组件

<script>
    import { leagueTable } from "../stores/league-standings-stores"
    console.log($leagueTable)
    const tableMaps = $leagueTable.map($leagueTable => $leagueTable.standings.data).flat();
    console.log(tableMaps)
</script>

{#each tablePositions as tablePosition}
  <div class="standings-table flex gap-9 mb-2 pb-4 pt-3 border-b border-[#303041]">
       <div class="team-details flex gap-4 w-full" id="td">
        <p class="w-[18px]">{tablePosition.position}</p>
         <img src="{tablePosition.team.data.logo_path}" alt="" class="w-[1.5em] object-scale-down">
          <p class="">{tablePosition.team_name}</p>
      </div>

      <div class="team-stats flex gap-5 text-left child:w-5 child:text-center w-full">
        <p>{tablePosition.overall.games_played}</p>
        <p>{tablePosition.overall.won}</p>
        <p>{tablePosition.overall.draw}</p>
        <p>{tablePosition.overall.lost}</p>
        <p>{tablePosition.overall.goals_scored}</p>
        <p>{tablePosition.overall.goals_against}</p>
        <p>{tablePosition.total.goal_difference}</p>
        <p>{tablePosition.overall.points}</p>
        <p class="!w-[78px] !text-left">{tablePosition.recent_form}</p>
      </div>
 </div>
{/each}

JavaScript

来源：https://stackoverflow.com/questions/74690881/is-there-a-way-to-store-my-svelte-store-in-local-storage-so-it-doesnt-reset-on

2条答案

按热度按时间

lymnna711#

检查本地存储数据是否存在：

let localData = localStorage.getItem("leagueTable")
export const leagueTable = writable(localData ? JSON.parse(localData) : []);

保存到本地存储并与存储保持同步：

$: {
    localStorage.setItem("leagueTable", JSON.stringify($leagueTable))
}

赞(0）回复(0）举报 2023-04-19

qltillow2#

使用github.com/joshnuss/svelte-local-storage-store

npm install svelte-local-storage-store

然后，在你的商店页面中，通常是一个js文件：

import { persisted } from 'svelte-local-storage-store'

export const leagueTable = persisted('leagueTable', [])

在你的svelte页面中，你可以将其用作：

import {leagueTable} from './stores'

随你所愿使用

leagueTable.subscribe(...) // subscribe to changes
leagueTable.update(...) // update value
leagueTable.set(...) // set value
get(leagueTable) // read value
$leagueTable // read value with automatic subscription

赞(0）回复(0）举报 2023-04-19

我来回答

javascript 有没有一种方法可以将我svelte store存储在本地存储中，这样它就不会在页面刷新时重置？

2条答案

相关问题

热门标签

最新问答