I am currently working on persisting data using localStorage and have successfully achieved persistence. However, I notice that when I refresh the page, it initially displays a value of 0 before fetching the localStorage value. Is there a way for me to instantly display the localStorage value without showing 0 first? Or is this not possible?
Below is my code for storing:
import { clickPower } from "$lib/store";
import { browser } from "$app/environment";
/** This tracks the highest total count of kebabs **/
export function createHighest() {
const { subscribe, set } = writable(0);
return {
subscribe,
set: (value: number) => set(value),
reset: () => set(0),
};
}
/** This tracks the total kebab count **/
export function createTotal() {
const localTotal = browser && localStorage.getItem("totalKebabs");
const totalStore = writable(localTotal ? parseInt(localTotal) : 0);
const { subscribe, set, update } = totalStore;
return {
subscribe,
// Additional functions can be added here
....
};
}
Here is the code to display the kebab count:
{#key $totalKebabs}
<span>{$totalKebabs}</span>
Kebabs
{/key}