Question

我正在使用纯 JavaScript 制作笔记网站

这是一个 HTML 布局

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Note taking website</title>
    <style>
        #container {
            text-align: center;
        }

        #container1 {
            text-align: center;
        }

        #flex {
            display: flex;
            flex-direction: row;
            margin: 20px 377px;
        }

        #show-notes {
            width: 278px;
            background-color: #70e0d3;
            height: 204px;
            border: 2px solid purple;
            margin: 3px 8px;

        }


        h3 {
            margin-bottom: 0px;
            margin-top: 6px;
        }
    </style>
</head>

<body>
    <section id="container" class="contain">
        <div id="top">
            <h1 class="head">Note Taking Website</h1>
        </div>
        <div class="second">
            <textarea name="area" id="text" cols="110" rows="10" placeholder="Enter here something"></textarea>
        </div>
        <div class="second" id="class-btn">
            <button id="btn" type="submit">Submit</button>
        </div>
    </section>
    <section id="container1">
        <h1 id="notes">Your Notes</h1>
        <div id="flex">
            <!-- <div id="show-notes">
                <h3>Notes</h3>
                <p id="para">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam natus unde reiciendis
                    maiores sint
                    suscipit explicabo quisquam et, odit consequatur fugiat, repellat fugit nihil placeat aspernatur
                    accusamus praesentium facere tempore modi eos? Eum, nisi laudantium dolorum hic mollitia corrupti
                    sequi incidunt cum culpa enim.</p>
            </div> -->
            
        </div>
    </section>
    <script src="javatut/app.js"></script>
    <!-- <script src="team.js"></script> -->
</body>

</html>

构建布局后，在 JavaScript 中，我想将字符串保存在 localStorage 中。当用户在 Your Notes 部分下的 textarea 输入中单击提交按钮时，我必须显示该注释，但是当我在 localStorage 中添加多个字符串后在控制台中检查长度时，它会显示长度只有1.请帮我增加localStorage的长度，您可以在下面运行此代码

let button  = document.getElementById("btn")
button.addEventListener("click",function(e){
     let txtara =document.getElementById("text")
     let notes = localStorage.getItem("note");
  let textobj;
  if (notes==null)
 {
       textobj = [];
     } 
     else
     {
          textobj =JSON.parse(notes);
     }
    textobj.push(txtara.value);
 localStorage.setItem("note",JSON.stringify(textobj))
      // console.log(typeof notes)
})

如何增加localStorage长度

0 个答案: