как загрузить в localStorage? Что бы при перезагрузке страницы данные оставались

Valera001 · September 28, 2019

Заранее спасибо

Вот код

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Exam</title>
    <link rel="stylesheet" href="css/style.css">
    <script
            src="https://code.jquery.com/jquery-3.4.1.js"
            integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
            crossorigin="anonymous">
    </script>
</head>
<body>
<style>
    .ToDo {
        display: inline-block;
        margin-right: 30px;
    }
    .field {
        width: 240px;
        border: 2px solid black;
    }
    .btn {
        border: 2px solid black;
        outline: none;
        cursor: pointer;
        background: #FFffff;
        box-shadow: 3px 3px 1px -1px rgba(0, 0, 0, 0.75);

    }
    .btn:active {
        background: wheat;
    }
    .main-column {
        display: flex;
    }
    .column-item {
        margin-right: 30px;
        width: 250px;
        text-align: center;
    }
    .title {
        border: 2px solid black;
        padding: 1px 50px;
        margin-bottom: 5px;
    }
    .column {
        border:2px solid black;
        height: auto;
        padding: 12px 0;
    }
    #card {
        border: 2px solid black;
        background: gray;
        width: 130px;
        padding: 0 0 7px 15px;
        margin: 0 auto 5px;

    }
    .card-txt {
        display: inline-block;
        padding-right: 21px;
    }
    .card-delete {
        margin: 0 10px 30px 0;
        display: inline-block;
        outline: none;
        cursor: pointer;
        background: transparent;
        border: none;
    }
    #card-btn {
        border: 2px solid black;
        outline: none;
        cursor: pointer;
        background: #FFffff;
        box-shadow: 3px 3px 1px -1px rgba(0, 0, 0, 0.75);
    }
    #card-btn:active {
        background: wheat;
    }
</style>
<p class="ToDo">Create new To Do: <input type="text" class="field"></p>
<button class="btn">Add</button>


<div class="main-column">
    <div class="column-item">
        <p class="title">To Do</p>
        <div class="first-column column">

        </div>
    </div>

    <div class="column-item">
        <p class="title">In Progress</p>
        <div class="second-column column">

        </div>
    </div>

    <div class="column-item">
        <p class="title">Done</p>
        <div class="third-column column">

        </div>
    </div>
</div>

<script>


    $('.btn').on('click', function () {
        var column = $('.first-column');
        var field = $('.field').val();
        var div = $('<div id = "card">');
        var txt = $('<p class="card-txt"></p>');
        txt.html(field);
        var buttonD = $('<button class="card-delete"><b>X</b></button>');
        var inProgress = $('<button id="card-btn">In Progress ></button>');
        div.append(txt, buttonD, inProgress);
        column.append(div);
        buttonD.on('click', function () {
            div.remove()
        });
        inProgress.on('click', function () {
            var secondColumn = $('.second-column');
            secondColumn.append(div)
            inProgress.html('Done >');
            inProgress.on('click', function () {
                var thirdColumn = $('.third-column');
                thirdColumn.append(div);
                inProgress.html('Delete')
            })

        })

    });
</script>
</body>
</html>

Switch74 · September 30, 2019

https://developer.mozilla.org/ru/docs/Web/API/Window/localStorage

Sign In

как загрузить в localStorage? Что бы при перезагрузке страницы данные оставались

Question

Valera001

Link to comment

Share on other sites

1 answer to this question

Recommended Posts

Switch74

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information