Svelte variable not updating from localStorage without using setInterval and forcing it

I have an app that stores items into locations in localStorage and then displays the items in HTML.

One of the reasons i wanted to use Svelte was for reactive variables, but whenever I attempt to use a reactive variable that changes whenever localStorage.current_items changes, the ItemList variable doesn't change.

The only way I could get it to work is by using setInterval but that is not a great way to do it. How can I make it so that ItemList changes properly when the localStorage.current_items string changes.

<script lang="ts">    import {        getData,        createItem,        createLocation,        closeItem,    } from './lib/database.js';    import LocationSelector from './lib/LocationSelector.svelte';    import { flip } from 'svelte/animate';    import { writable } from 'svelte/store';    let DB = getData();    // load items from localstorage.items    let ItemList = [];    let Location;    setInterval(() => {        Location = localStorage.current_items;        ItemList = JSON.parse(localStorage.current_items).items;    }, 500);    console.log(ItemList);    let newItem = '';    let filter_showClosed = false;    function addNewItem(e) {        e.preventDefault();        console.log(newItem);        const newItemInput = document.querySelector('#newItemInput'        ) as HTMLInputElement;        createItem(JSON.parse(Location).id, newItem);        newItem = '';    }    function newItemKeyDown(e) {        if (e.keyCode === 13) {            addNewItem(e);        }    }</script><LocationSelector /><div class="app"><input        type="text"        id="newItemInput"        bind:value={newItem}        placeholder="Add a new item"        on:keydown={newItemKeyDown}    /><button        id="filter_showClosed"        data-active="false"        on:click={function () {            filter_showClosed = !filter_showClosed;            let el = document.getElementById('filter_showClosed');            if (filter_showClosed) {                el.innerHTML = 'Hide closed';                el.dataset.active = 'true';            } else {                el.innerHTML = 'Show closed';                el.dataset.active = 'false';            }        }}>Show closed</button><!-- <button        id="deleteClosed"        on:click={function () {            let it = items;            for (let i = 0; i < it.length; i++) {                if (it[i].closed == true) {                    it.splice(i, 1);                }            }            items = it;            sort_items(items);        }}>Delete all closed</button> --><div class="list">        {#each ItemList as item, index (item.id)}<div class="item {item.closed}" animate:flip={{ duration: 100 }}>                {#if item.closed == false || (filter_showClosed == true && item.closed == true)}<div><img                            src="/up.svg"                            class="item-icon"                            class:closed={item.closed == true}                            alt="move item up in priority"                            on:click={function () {                                // increaseLevel({ item });                            }}                        />                        {item.name} ({index})</div><div>                        {#if item.closed == false}<img                                src="/close.svg"                                class="item-icon"                                alt="close item"                                on:click={function () {                                    console.log(Location.id);                                    closeItem(JSON.parse(Location).id, item.id);                                }}                            />                        {/if}</div>                {/if}</div>        {/each}</div></div><style></style>

I tried using this writeable method, but that didn't work either as the variable still didn't change.

import { writable } from 'svelte/store';const ItemList = writable([]);let Location = {};let newItem = '';let filter_showClosed = false;function addNewItem(e) {    e.preventDefault();    console.log(newItem);    const newItemInput = document.querySelector('#newItemInput'    ) as HTMLInputElement;    createItem(Location.id, newItem);    newItem = '';}function newItemKeyDown(e) {    if (e.keyCode === 13) {        addNewItem(e);    }}// Update the Location object with the current value of localStorage.current_items as an objectLocation = JSON.parse(localStorage.current_items);// Update the ItemList store with the new location's itemsItemList.set(Location.items);