How to increase localStorage length

Question

I am making a note making website using pure JavaScript

This is a HTML Layout

<!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>

After building layout, In the JavaScript I want to save the strings in the localStorage. I have to show that notes when a user clicks on submit button whatever in the textarea input under the section of Your Notes but when I am checking the length in console after adding multiple strings in localStorage it shows the length only 1. Please help me to increase the length of localStorage, you can run this code below

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)
})

I put five apples to a sack, how many apples are there in a basket? — Teemu, Jul 08 '21 at 15:11
LocalStorage can store around 5 MB, that's not the problem. Inspect what's in your LocalStorage using the browser's developer tools — Jeremy Thille, Jul 08 '21 at 15:11
`localStorage.length` returns the number of **keys** you've added to `localStorage`. If you want the number of notes, you need to use `textobj.length`. — Heretic Monkey, Jul 08 '21 at 15:11
Does this answer your question? [How do you get the array length of a variable in a localStorage](https://stackoverflow.com/questions/49893145/how-do-you-get-the-array-length-of-a-variable-in-a-localstorage) — Heretic Monkey, Jul 08 '21 at 15:14
but when you type in console word localstorage it will show you length one only. — Shivam Singh, Jul 08 '21 at 15:16
Because it contains _one_ item. Did you try `console.log( localStorage.getItem("note") )` ? — Jeremy Thille, Jul 08 '21 at 15:17
You should really use `ES5` (var) variable syntax if you're not bundling and not `ES6` (let, const). Most modern browsers support [ES6](https://caniuse.com/?search=es6). However, if you're learning JavaScript, it's good to know that legacy browsers use [ES5](https://caniuse.com/?search=es5) syntax and will throw errors for ES6 language features without the correct polyfills. — Riddell, Jul 08 '21 at 15:18
@Riddell Even Internet Explorer 11 supports let and const, and IE will be killed before the end of the year. All browsers will fully support let and const, I would never encourage anyone to not learn them and to use legacy syntax instead... — Jeremy Thille, Jul 08 '21 at 15:39
@ShivamSingh Your code works as it is, you're just interpreting the console results incorrectly (the sack is in the basket, but there are no apples directly in the basket, they all are in the sack). Navigate to [this fiddle](https://jsfiddle.net/yb3qntL9/1/), open the console and click Run, then write something to the textfield and click Save button, repeat multiple times and take a look at the console every time after clicked Save button. — Teemu, Jul 08 '21 at 16:48
No, you all are not understanding me how I can remove slash between each array element after typing localstorage in console. — Shivam Singh, Jul 13 '21 at 06:41

How to increase localStorage length

0 Answers0