ローカルストレージ(localstrage)にメモを保存できるウェブページ【javascript】

2025-03-16

備忘録として残しておきます。

<!doctype html>
<html>
<head>
<meta http-equiv="content-type" charset="UTF-8">
<title>ローカルストレージのメモ帳</title>
<link rel="stylesheet" type="text/css" href="../style.css">
<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
</head>
<body>
<iframe src="../header.html" scrolling="no" frameborder="0" class="headframe"></iframe>
<div class="main">
<pre>

<h1 class="hyoudai">ローカルストレージのメモ帳</h1>

    <textarea id="localmemo" placeholder="ここにメモを入力..."></textarea><br>
    <button onclick="saveMemo()">保存</button> <button onclick="clearMemo()">クリア</button>

</pre>
</div>
</body>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            document.getElementById("localmemo").value = localStorage.getItem("localmemo") || "";
        });
        
        function saveMemo() {
            localStorage.setItem("localmemo", document.getElementById("localmemo").value);
        }

        function clearMemo() {
            document.getElementById("localmemo").value = "";
            localStorage.removeItem("localmemo");
        }
    </script>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }
        textarea {
            width: 100%;
            height: 280px;
            margin-bottom: 10px;
        }
        button {
            padding: 10px;
            margin-right: 5px;
        }
    </style>
</html>

よかったらシェアしてね！