时间戳

首页 > 解决方案 > 我遇到了这个问题，每次我重新加载页面。我想创建一个笔记应用程序，但每次我刷新它们都会消失

javascript - 我遇到了这个问题，每次我重新加载页面。我想创建一个笔记应用程序，但每次我刷新它们都会消失

问题描述

我是 javacript 的第一个计时器，我尝试创建一个笔记应用程序，但我遇到了这个问题，每次刷新页面时笔记都会消失。

function addItem(){

    var ul = document.getElementById('q-block');
    var candidate = document.getElementById('q-field');
    var li = document.createElement("li");
    li.setAttribute('id', candidate.value);
    li.appendChild(document.createTextNode(candidate.value));
    ul.appendChild(li);
    li.className = 'q-content';
    li.value.setClassName = 'q-content';

}
*{
    margin: 0;
    padding: 0;
    font-family: sans-serif;
}

.container{
    height: 100vh;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: repeat(12, 1fr);
}

.input-container{
    grid-column: 5/9;
    grid-row: 1/2;
    padding: 1em;
}

#q-field{
    height: 40px;
    padding: .5em;
    width: 100%;
    border: none;
    border-bottom: 2px solid black;
    border-left: 2px solid black;
}

#q-auth{
    margin-top: 1em;
    width: 50%;
    border: none;
    border-bottom: 2px solid black;
    border-left: 2px solid black;
    padding: .5em;

}

#submitbtn{
    padding: 1em;
    border: none;
    outline: none;
    font-weight: bold;
    cursor: pointer;
    background-color: #000;
    color: white;
}

.q-table{
    margin: .5em;
    height: auto;
    grid-column: 1/-1;
    grid-row: 3/13;
    background-color: #fff; 
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(3,1fr); 
    overflow-y: scroll; 
    grid-gap: 10px;
}

.q-content{
    list-style-type: none;
    height: 200px;
    background-color: #ddd; 
    padding: .5em;
    font-size: .9em;
    text-align: left;
    display: grid;
    grid-template-rows: 150px 40px;
}

.quote{
    margin-top: 1em;
}

.author{
    font-size: 1.3em;
    font-style: italic;
    grid-row: 2;
    text-align: left;
    font-weight: lighter;
}

/*.author:before{
    content: '-';
    margin-right: .1em;
}*/
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Quote Saver</title>
    <link rel="stylesheet" href="css/main.css">
</head>
<body>
    
    <div class="container">
        
        <div class="input-container">
            

            <textarea id="q-field" placeholder="Enter Quote"></textarea>
            <input type="text" id="q-auth" placeholder="Author">
            <input type="submit" value="SUBMIT" id="submitbtn" onclick="addItem()" onsubmit="check()">

        </div>

        <ul class="q-table" id="q-block">

        </ul>

    </div>

    <script type="text/javascript" src="js/main.js"></script>
</body>
</html>

有没有什么办法解决这一问题？如何？我又很抱歉。虽然我有一些想法，比如 javascript cookie 或本地存储，但我在实现它时遇到了一些困难，现在我仍在试图弄清楚。

标签： javascripthtmlcss

解决方案

推荐阅读