index.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>キョウハナンノヒ？</title>
    <script src="js/jquery-2.1.3.min.js"></script>
    <link rel="stylesheet" href="css/sample.css">
</head>

<body>

    <header>
            <div img src="tanabata_publicdomainq-0009100lxlarb.png" width="350"></div>
        <h1>七夕まつり　星に願いを！</h1>
        <h2>おねがいごとをかこう！</h2>
    </header>

    <main style="display:none;">
        <textarea id="text_area"></textarea>
        <ul>
            <li id="save">Save</li>
            <li id="clear">Clear</li>
        </ul>
    </main>

    <footer><small>Star&Moon協会</small></footer>
    <script>
        $("main").fadeIn(1000);

        //1.Save クリックイベント
        $("#save").on("click",function(){
        const value = $("#text_area").val();
        localStorage.setItem("memo", value);
        alert("保存しました")
        });


        //2.clear クリックイベント
         $("#clear").on("click",function(){
         localStorage.removeItem("memo");
         alert("削除しました")
         $("#text_area").val("");
        });
        //3.ページ読み込み：保存データ取得表示
        if(localStorage.getItem("memo")){
            const v = localStorage.getItem("memo");
            $("#text_area").val(v);
            
        }

    </script>
</body>

</html>