Persisting Kanban Tasks with localStorage in Svelte

Introduction to Data Persistence

In our Kanban board application so far, we've implemented a robust task management system with the ability to add, move, and delete tasks. However, there's a significant limitation: every time you refresh the page, all your tasks reset to the initial state. This happens because our application's state is stored only in memory, which gets cleared when the page reloads. This is where data persistence comes in. Persistence means saving data so it remains available across browser sessions. For web applications like our Kanban board, the browser's localStorage API provides a simple yet powerful solution for client-side persistence.

Why localStorage is Perfect for Our Kanban Board

The localStorage API is part of the Web Storage API and allows you to store key-value pairs in the browser. These key-value pairs persist even when the page is closed or refreshed, making it perfect for saving user data like tasks. Here's what makes localStorage useful for our Kanban application: It's built into all modern browsers It can store up to 5-10 MB of data (varies by browser) Data is stored as strings, so we'll need to use JSON to convert our task objects It's synchronous and easy to use with simple get/set methods By implementing localStorage persistence, our Kanban board will become much more practical for real-world use. Users will be able to add tasks, close their browsers, and return later to find their tasks exactly as they left them.

Our Persistence Implementation Plan

In this lesson, we'll modify our task store to load tasks from localStorage when the application starts and save tasks whenever they change. This will create a seamless experience where users never have to worry about losing their work. We'll implement this in several steps: Create a function to load tasks from localStorage Set up automatic loading when the app starts Implement automatic saving when tasks change Add timestamp tracking to tasks

Creating the loadTasksFromStorage Function

Join the 1M+ learners on CodeSignal

Be a part of our community of 1M+ users who develop and demonstrate their skills on CodeSignal

Implementing Automatic Saving

Now that we've set up task loading, we need to implement automatic saving. We want to save tasks to localStorage whenever they change, so users never have to worry about manually saving their work.

Let's add the saving effect to our task store:

JavaScript

$effect.root(() => {
    $effect(() => {
        if (typeof window !== undefined) {
            untrack(() => {
                tasks.push(...loadTasksFromStorage());
            });
        }
    });
    
    // Save tasks to localStorage whenever tasks change
    $effect(() => {
      try {
        localStorage.setItem('kanban-tasks', JSON.stringify(tasks));
      } catch (error) {
        console.error('Failed to save tasks to localStorage:', error);
      }
    });
});

$effect.root(() => {
    $effect(() => {
        if (typeof window !== undefined) {
            untrack(() => {
                tasks.push(...loadTasksFromStorage());
            });
        }
    });
    
    // Save tasks to localStorage whenever tasks change
    $effect(() => {
      try {
        localStorage.setItem('kanban-tasks', JSON.stringify(tasks));
      } catch (error) {
        console.error('Failed to save tasks to localStorage:', error);
      }
    });
});

This new effect uses $effect() to create a reactive dependency on the tasks array. Whenever the tasks array changes (when tasks are added, removed, or modified), this effect will run and save the updated tasks to localStorage.

Inside the effect, we use localStorage.setItem('kanban-tasks', JSON.stringify(tasks)) to save the tasks. The JSON.stringify() function converts our tasks array to a JSON string, which can be stored in localStorage.

Like our loading function, this operation is wrapped in a try-catch block to handle any errors that might occur during saving. If an error occurs, we log it to the console but allow the application to continue running.

With these two effects in place, our Kanban board now has automatic persistence:

Tasks are loaded from localStorage when the application starts
Tasks are saved to localStorage whenever they change
Error handling ensures the application continues to function even if localStorage operations fail

Introduction to Data Persistence

Why localStorage is Perfect for Our Kanban Board

Our Persistence Implementation Plan

Creating the loadTasksFromStorage Function

Join the 1M+ learners on CodeSignal

Understanding the loadTasksFromStorage Implementation

Error Handling and Fallbacks

Setting Up the Task Store Structure

Understanding $effect.root and $effect

Loading Tasks with untrack

Implementing Automatic Saving

Important localStorage Considerations

What We've Accomplished