Web Storage API

by 0GiS0

HTML

<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <header>
        <h1>Web Storage API</h1>
    </header>
    <article>
        <section>
            <h2>Wish list</h2>
            <textarea id="txtWishes" rows="5"></textarea>
            <div id="actions">
                <button id="btnSave">Save wish list</button>
                <button id="btnDelete">Delete wish list</button>
            </div>
        </section>
    </article>
</body>
</html>

CSS

body{
    font-family: 'Segoe UI';
    font-size:9pt;   
}

header h1{
    font-size: 14pt;
    background-color: rgba(27,161,226,.7);
    color:#fff;
    padding:20px;
}

article{
    width:80%;
    margin:auto;    
}

    article section{
        margin-top:15px;
    }

        article section h2{
            font-size:12pt;
            padding:5px;
        }

        article section textarea{
            width:250px;
            height:200px;
            border:1px solid rgba(27,161,226,.7);
        }

#actions button
{
    padding:10px;
    border-radius:5px;
    background-color: rgb(27,161,226);
    color:#fff;
}

JavaScript

window.onload = function() {

    //Handlers
    var btnSave = document.getElementById("btnSave");
    var btnDelete = document.getElementById("btnDelete");
    var wishes = document.getElementById("txtWishes");

    btnSave.addEventListener("click", function() {

        window.localStorage.wishes = wishes.value.split("\n").join(",");

    });

    btnDelete.addEventListener("click", function() {

        window.localStorage.removeItem("wishes");
        wishes.value = "";

    });

    //Get previous data
    if (window.localStorage) {
        var wishesStorage = window.localStorage.wishes;
        if (wishesStorage) wishes.value = wishesStorage.split(",").join("\n");
    }
}