Why isn't the loop saving the data in the localStorage?

Question

I am a novice in the field of coding. Every time I try to put something in the prompt box, it only saves the last string entered. In this case, my command to end "done".

I have already resolved using a for loop and a function to save the data. However, I am confused as to why it is not working with the while loop. Cause as far as I see, for and while are similar to each other, with the difference that a while loop doesn't need a start-value and that you put the incrementation in the curly-brackets.
Ultimately I want to type in 'Max' and it should show on the next html-file, 'Max' and not 'done'.

<!DOCTYPE html>
<html>
    <head>
        <title>dude</title>
        <script type="text/javascript">
            'use strict'
            var i, Enter; 
            var dude=[];
        </script>
        <meta charset="utf-8" />
    </head>
    <body>
    <script type="text/javascript">
        while (Enter!='done')
        {
            i++

            if (dude[i]='done')
            {
                Enter=prompt("some text");
                dude[i]=Enter
                SaveData(dude[i]);
            }
        }
        function SaveData()
        {
            localStorage.setItem("DATA", dude[i]);
        }
        
    </script>
    </body>
</html>

`SaveData()` doesn't take any arguments, yet you are passing it `dude[i]`. You also set all the items to `DATA`, so each subsequent item in the while loop overwrites the previous one so that the last is the one that stays. — mykaf, Jun 16 '23 at 15:25
Note `if (dude[i]='done')` is _assigning_ `done` to `dude[i]`. You want [`==` or `===`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Equality_comparisons_and_sameness). — Andy, Jun 16 '23 at 15:26
Welcome to Stack Overflow! This is a good opportunity for you to start familiarizing yourself with [using a debugger](https://stackoverflow.com/q/25385173/328193). When you step through the code in a debugger, which operation first produces an unexpected result? What were the values used in that operation? What was the result? What result was expected? Why? To learn more about this community and how we can help you, please start with the [tour](https://stackoverflow.com/tour) and read [How to Ask](https://stackoverflow.com/questions/how-to-ask) and **its linked resources** — Mister Jojo, Jun 16 '23 at 15:27

score 0 · Answer 1 · answered Jun 16 '23 at 16:00

So, you want to add repeated strings to local storage. Local storage is a key/value system.

At the moment you're trying to assign each separate input value to the same key which is not giving you the desired outcome.
Since you want to capture each separate input somehow you might consider an array in which to store them. On each iteration of the loop (if the input value is not done) you can push the input value into an array.
Once the iteration is complete (ie the input value is done) you can stringify the array and assign that string to the local storage data key. (When you come to retrieve that data you would need to parse that string back into an array.)

In this example I've modified your code slightly with this aim in mind. The snippet doesn't allow setting/getting data from local storage so I've logged the result of stringifying the array. As mentioned in the comments you can remove this line, and uncomment the next to get this working properly.)

(Addendum: you can see this working in this JSFiddle. Run the code example, and then open your dev tools to the "storage" tab, and look under "Local Storage -> h**tps://fiddle.jshell.net" and you'll see your saved data.)

// Declare input and a new array
let input = undefined;
const arr = [];

while (input !== 'done') {
  
  // Get the input
  input = prompt('Enter some text');
  
  // If input is not `done` push the input
  // to the array
  if (input !== 'done') arr.push(input);
}

// If the array has some elements
// In your working code remove this line, and
// uncomment out the next
if (arr.length) console.log(JSON.stringify(arr));
// if (arr.length) saveData(arr);

function saveData(arr) {
  localStorage.setItem('data', JSON.stringify(arr));
}

Basil jose · Accepted Answer · 2023-06-16T16:09:26.790

<!DOCTYPE html>
<html>

<head>
    <title>dude</title>
    <script type="text/javascript">
        'use strict'
        let i = 0, enter; //i value must be initiase since you are incremeting using ++ operator 
        let dude = [];
    </script>
    <meta charset="utf-8" />
</head>

<body>
    <script type="text/javascript">
        localStorage.clear(); //each time page reloads clearing old values from localstorage
        while (enter !== 'done') {
            enter = prompt("some text");
            if (enter !== 'done') {
                if (enter == "Max") {
                    //enter you new page open here 
                    enter = 'done';
                } else {
                    dude[i] = enter //adding new items to array 
                    SaveData(dude);
                }
            }
            i++
        }
        function SaveData(dudeArray) {
            console.log(dudeArray);
            localStorage.setItem("DATA", JSON.stringify(dudeArray)); //to store array in localstorage as json
        }

    </script>
</body>

</html>

for reference : Json Storage : How do I store an array in localStorage?

Types of Loops : https://www.tutorialrepublic.com/javascript-tutorial/javascript-loops.php

Localstorage : https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

Why isn't the loop saving the data in the localStorage?

2 Answers2