Leveraging HTML5's local storage functionality to save and manage a collection of list elements within `<ul>`

Question

Leveraging HTML5's local storage functionality to save and manage a collection of list elements within `<ul>`

I need help with saving a to-do list in HTML so that it persists even after refreshing the browser. Can anyone assist me?

html

<!DOCTYPE html>
<html>

    <head>
        <title>My To-Do List</title>
        <link rel="stylesheet" href="css/styles.css" />
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
        <link rel="stylesheet" href="css/font-awesome-animation.min.css">
        <link href='https://fonts.googleapis.com/css?family=Oswald:400,300,700' rel='stylesheet' type='text/css'>
        <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
        <link rel="icon" href="/favicon.ico" type="image/x-icon">
    </head>

    <body>
        <div id="page">
            <header>
                <img src="images/checklist.png" alt="some_text">
            </header>
             <h2>MY TO-DO LIST</h2>

            <ul id="sortable"></ul>
            <form id="newItemForm">
                <input type="text" id="itemDescription" placeholder="Add Description" maxlength="40" />
                <input type="submit" id="add" value="add" />
                <div id="double">Drag and drop to rearrange items
                    <br />Click on an item to remove it</div>
            </form>
        </div>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
        <script src="js/main.js"></script>
        <script src="js/sort.js"></script>
        <script src="jquery-ui/jquery-ui.js"></script>
    </body>

</html>

JavaScript/jQuery

$(function () {

    var $list;
    var $newItemForm;
    var $newItemButton;
    var item = '';
    $list = $('ul');
    $newItemForm = $('#newItemForm');
    $newItemButton = $('#newItemButton');

    // ADDING A NEW LIST ITEM
    $newItemForm.on('submit', function (e) {
        e.preventDefault();
        var text = $('input:text').val();
        $list.append('<li>' + text + '</li>');
        $('input:text').val('');
    });

    $list.on('click', 'li', function () {
        var $this = $(this);
        var complete = $this.hasClass('complete');

        if (complete === true) {
            $this.animate({}, 500, 'swing', function () {
                $this.remove();
            });
        } else {
            item = $this.text();
            $this.remove();
        }
    });

});

localStorage.setItem($list);

//add animations when you learn how to...

javascript jquery css html

Answer 1

Answer №1

To ensure proper functionality, it is important to store the data in an object rather than just keeping it in the DOM. Whenever a new todo is added or an existing one is edited, make sure to save that information to the localstorage. Remember, storing DOM nodes directly to localStorage will not work as it only accepts string values.

Here's a revised version of your code:

// Define localStorage key
var lsKey = 'TODO_LIST';

// Initialize data storage object
var todoList = {};

function getSavedData () {
    var fromLs = localStorage.getItem( lsKey );

    if ( !! fromLs ) {
        todoList = JSON.parse( fromLs );
    } else {
        todoList = {};
        localStorage.setItem( lsKey, JSON.stringify(todoList) );
    };
};

function saveData () {
    var stringify = JSON.stringify( todoList );
    localStorage.setItem( lsKey, stringify );
};

$newItemForm.on('submit', function(e) {
    e.preventDefault();

    var text = $('input:text').val().trim(),
        uuid = Date.now();

    // Use input[type:checkbox] to determine completion status
    if ( !! text ) {
        todoList[uuid] = text;
        $list.append('<li><input type="checkbox" id=' + uuid + ' /> ' + text + '</li>');
        $( 'input:text' ).val( '' );
    };
});

$list.on('change', 'li input', function() {
    var uuid = $(this).attr( 'id' ),
        $li  = $(this).parent();

    if ( $(this).prop('checked') ) {
        todoList[uuid] = undefined;
        delete todoList[uuid];

        saveData();

        $li.fadeOut("slow", function() {
            $this.remove();
        });
    };
});

Best of luck and enjoy coding!

Answer 2

To ensure proper functionality, it is important to store the data in an object rather than just keeping it in the DOM. Whenever a new todo is added or an existing one is edited, make sure to save that information to the localstorage. Remember, storing DOM nodes directly to localStorage will not work as it only accepts string values.

Here's a revised version of your code:

// Define localStorage key
var lsKey = 'TODO_LIST';

// Initialize data storage object
var todoList = {};

function getSavedData () {
    var fromLs = localStorage.getItem( lsKey );

    if ( !! fromLs ) {
        todoList = JSON.parse( fromLs );
    } else {
        todoList = {};
        localStorage.setItem( lsKey, JSON.stringify(todoList) );
    };
};

function saveData () {
    var stringify = JSON.stringify( todoList );
    localStorage.setItem( lsKey, stringify );
};

$newItemForm.on('submit', function(e) {
    e.preventDefault();

    var text = $('input:text').val().trim(),
        uuid = Date.now();

    // Use input[type:checkbox] to determine completion status
    if ( !! text ) {
        todoList[uuid] = text;
        $list.append('<li><input type="checkbox" id=' + uuid + ' /> ' + text + '</li>');
        $( 'input:text' ).val( '' );
    };
});

$list.on('change', 'li input', function() {
    var uuid = $(this).attr( 'id' ),
        $li  = $(this).parent();

    if ( $(this).prop('checked') ) {
        todoList[uuid] = undefined;
        delete todoList[uuid];

        saveData();

        $li.fadeOut("slow", function() {
            $this.remove();
        });
    };
});

Best of luck and enjoy coding!

Answer 3

Answer №2

To ensure proper data storage, remember two key steps: first, save only your data without any HTML content. Second, provide a unique name for your item in localStorage as this is a key/value storage system requiring a specific identification key. Additionally, since localStorage stores data as string values, make sure to use JSON.stringify() before saving your data. Your code should resemble the following format: localStorage.setItem("yourKeyName", JSON.stringify(yourDataObj)). When retrieving your data, utilize JSON.parse(localStorage.getItem("yourKeyName")) to convert it back into a JSON object.

Answer 4

To ensure proper data storage, remember two key steps: first, save only your data without any HTML content. Second, provide a unique name for your item in localStorage as this is a key/value storage system requiring a specific identification key. Additionally, since localStorage stores data as string values, make sure to use JSON.stringify() before saving your data. Your code should resemble the following format: localStorage.setItem("yourKeyName", JSON.stringify(yourDataObj)). When retrieving your data, utilize JSON.parse(localStorage.getItem("yourKeyName")) to convert it back into a JSON object.

Leveraging HTML5's local storage functionality to save and manage a collection of list elements within `<ul>`

Answer №1

Answer №2

Similar questions

Some mobile web browsers are experiencing difficulties when trying to load a background video coded in html5

Double-checked in p:commandButton, encountering a race condition with oncomplete

Tips for generating multiple URL destinations within a single hyperlink

Tips for employing numerous if-else conditions utilizing the ternary operator in jsonpath-plus?

When the PHP response is received by AJAX, an error occurs due to a failed JSON parsing request

There is a runtime error in Microsoft JScript, as the object does not support the property or method 'defineGetter'

Contrasting outcomes when tackling a problem in node.js versus python

Utilizing Angular 6 and JavaScript to invoke two functions within an (ngClick) event in both the Component and JavaScript

I am utilizing the ternary operator within the map function to dynamically adjust the column width of a material table

Ensure accurate detection of invalid values for SVG Elements in React using jest testing framework

If PHP does not return data in a JSON encoded format, Ajax will not function properly

Issue: The `libsass` component could not be located

Depending on external software packages

Best practices for handling errors beyond network problems when using the fetch() function

In what way can you reach an unfamiliar form within a controller?

What is the proper way to integrate three.js (a third-party library) into the view controller of an SAPUI5 application

Is there a way to obtain the "rotated" coordinates of a mouse click within a canvas element?

Unable to call Ionic component function using ref in Vue3

Step-by-step guide on replicating a website along with its CSS styles and scripts

Tips for concealing a chosen alternative from the menu of options when utilizing mat-select

Leveraging HTML5's local storage functionality to save and manage a collection of list elements within `<ul>`

Answer №1

Answer №2

Similar questions

Some mobile web browsers are experiencing difficulties when trying to load a background video coded in html5

Double-checked in p:commandButton, encountering a race condition with oncomplete

Tips for generating multiple URL destinations within a single hyperlink

Tips for employing numerous if-else conditions utilizing the ternary operator in jsonpath-plus?

When the PHP response is received by AJAX, an error occurs due to a failed JSON parsing request

There is a runtime error in Microsoft JScript, as the object does not support the property or method '__defineGetter__'

Contrasting outcomes when tackling a problem in node.js versus python

Utilizing Angular 6 and JavaScript to invoke two functions within an (ngClick) event in both the Component and JavaScript

I am utilizing the ternary operator within the map function to dynamically adjust the column width of a material table

Ensure accurate detection of invalid values for SVG Elements in React using jest testing framework

If PHP does not return data in a JSON encoded format, Ajax will not function properly

Issue: The `libsass` component could not be located

Depending on external software packages

Best practices for handling errors beyond network problems when using the fetch() function

In what way can you reach an unfamiliar form within a controller?

What is the proper way to integrate three.js (a third-party library) into the view controller of an SAPUI5 application

Is there a way to obtain the "rotated" coordinates of a mouse click within a canvas element?

Unable to call Ionic component function using ref in Vue3

Step-by-step guide on replicating a website along with its CSS styles and scripts

Tips for concealing a chosen alternative from the menu of options when utilizing mat-select

There is a runtime error in Microsoft JScript, as the object does not support the property or method 'defineGetter'