Javascript Svelte：有没有一种缓存api结果的方法可以让它胜出'；是否每次组件呈现时都不会触发api调用？

这可能是因为我在谷歌上输入了错误的内容，无法得到一个好的答案

是否有一种“苗条推荐”的方法来存储GET结果的值，以便在每次刷新或链接切换时，存储中的结果在组件中使用，直到超时（再次调用api）

我的目的是从外部api获取blogpost，并在列表中显示它们，但不是在每次刷新或链接切换时显示它们

我的代码：

<script>
  let posts = [];

  onMount(async () => {
  const res = await fetch(apiBaseUrl + "/blogposts");
  posts = await res.json();
});
</script>

  {#each posts as post}
    <h5>{post.title}</h5>
  {/each}

---

您可以使用商店来实现这一点。初始页面加载从api获取数据并保存在存储中。然后在进一步的页面装载中使用POST数据。每当要刷新数据时，将timeout设置为true

/stores.js

import {writable} from 'svelte/store';
export const posts = writable([]);
export const timeout = writable(false);

苗条的

<script>
import {posts, timeout} from "./stores.js"

 onMount(async () => {
   if($posts.length<1 || $timeout == true){
     const res = await fetch(apiBaseUrl + "/blogposts");
     $posts = await res.json();
   }
});
</script>

  {#each $posts as post}
    <h5>{post.title}</h5>
  {/each}

<script>
let posts = [];
 
onMount(async () => { 
 posts = await getdata();
 } 
 
const getdata = async ()=>{
  // set cache lifetime in seconds
  var cachelife = 5000; 
   //get cached data from local storage
    var cacheddata = localStorage.getItem('posts'); 
    if(cacheddata){
     cacheddata = JSON.parse(cacheddata);
     var expired = parseInt(Date.now() / 1000) - cacheddata.cachetime > cachelife;
      }
    //If cached data available and not expired return them. 
    if (cacheddata  && !expired){
     return cacheddata.posts;
    }else{
    //otherwise fetch data from api then save the data in localstorage 
     const res = await fetch(apiBaseUrl + "/blogposts");
     var posts = await res.json();
     var json = {data: posts, cachetime: parseInt(Date.now() / 1000)}
     localStorage.setItem('posts', JSON.stringify(json));
     return posts;
    }
  }
 
{#each posts as post}
<h5>{post.title}</h5>
{/each}
    

从“/stores.js”导入{posts，timeout}
onMount（异步（）=>{
如果（$posts.length{
posts=等待获取数据（）；
} 
const getdata=async（）=>{
//以秒为单位设置缓存生存期
var cachelife=5000；
//从本地存储获取缓存数据
var cacheddata=localStorage.getItem（'posts'）；
如果（缓存数据）{
cacheddata=JSON.parse（cacheddata）；
var expired=parseInt（Date.now（）/1000）-cacheddata.cachetime>cachelife；
}
//如果缓存数据可用且未过期，则返回它们。
如果（缓存数据&&！过期）{
返回cacheddata.posts；
}否则{
//否则，从api获取数据，然后将数据保存在localstorage中
const res=wait fetch（apiBaseUrl+“/blogposts”）；
var posts=await res.json（）；
var json={data:posts，cachetime:parseInt（Date.now（）/1000）}
setItem（'posts'，JSON.stringify（JSON））；
返回岗位；
}
}
{#每个职位都是职位}
{post.title}
{/每个}

您可以使用svelte store来存储标志变量，它告诉您何时重新加载帖子？您将如何设置标志？api调用，在计时器上？对于计时器，您可以使用setTimeout

setTimeout（（）=>{$timeout=true；}，10*1000）

在post中。svelte@dagalti的答案正是我所想的。这为我解决了路由开关上的重新蚀刻问题，这对我来说已经足够好了，但它确实在刷新时重新蚀刻了。我猜在刷新时，商店又空了，使if语句中的第一个条件为真。我将接受答案，但我认为还有一个更完整的答案e回答。谢谢。@QuintenspilleMackers更新了本地存储缓存的代码。

<script>
let posts = [];
 
onMount(async () => { 
 posts = await getdata();
 } 
 
const getdata = async ()=>{
  // set cache lifetime in seconds
  var cachelife = 5000; 
   //get cached data from local storage
    var cacheddata = localStorage.getItem('posts'); 
    if(cacheddata){
     cacheddata = JSON.parse(cacheddata);
     var expired = parseInt(Date.now() / 1000) - cacheddata.cachetime > cachelife;
      }
    //If cached data available and not expired return them. 
    if (cacheddata  && !expired){
     return cacheddata.posts;
    }else{
    //otherwise fetch data from api then save the data in localstorage 
     const res = await fetch(apiBaseUrl + "/blogposts");
     var posts = await res.json();
     var json = {data: posts, cachetime: parseInt(Date.now() / 1000)}
     localStorage.setItem('posts', JSON.stringify(json));
     return posts;
    }
  }
 
{#each posts as post}
<h5>{post.title}</h5>
{/each}