LocalStorage array

Question

Guys help me with this code. The idea is to save new inputs in a string and display them using HTML. Every time I add a new one the HTML displays it, if I reload the page the items are still displayed and the first getItem method and if I reload again is still working but here is the problem. After I reload the page and I insert a new element in string then it will display the just the lates inputs and will delete the ones from other sessions.

If I insert now :"one","two","three" it I will display "one,two,three" if I reload it will still display " one,two,three" which is good, but after the reload if I insert "four" it will display only "four" and I want to be displayed "one,two,three,four".

How can I make this happen?

<!DOCTYPE html>
<html>
  <body>
    <div id="result"></div>
    <button onclick="reloadd()">Reload</button>
    <button onclick="clearF()">Clear</button>
    <input id="valoare">
    <button id="adauga" onclick="adauga()">+</button>
    <button onclick="nrElemente()">ElemNr?</button>
    <script>
      var cars = [];
      var two = "kes";

      document.getElementById("result").innerHTML = localStorage.getItem("array1");

      function clearF() {
        window.localStorage.clear();
        location.reload();
      }

      function adauga() {
        var x = document.getElementById('valoare').value;
        cars.push(x);

        localStorage.setItem("array1", cars);
        document.getElementById("result").innerHTML = localStorage.getItem("array1");
      }

      function reloadd() {
        location.reload();
      }

      function nrElemente() {
        alert(localStorage.length);
      }

    </script>
  </body>
</html>

score 2 · Accepted Answer · 2016-10-01 23:22:30Z

Your code is not working because you are not storing your array anywhere. To save your array into localStorage you would use:

localStorage.setItem("cars", JSON.stringify(cars));

Then instead of doing this:

var cars = [];

You would load your cars array like this:

var cars = localStorage.getItem("cars");
cars = (cars) ? JSON.parse(cars) : [];

What this is doing is, it is checking if the localStorage object contains an array called cars. Now if it does it will parse that string and return the stored cars array, if it does not it will set the cars array to a new empty array.

Here, I have fixed and tidied your code:

<!DOCTYPE html>
<html>
<body>
  <div id="result"></div>
  <button onclick="reloadd()">Reload</button>
  <button onclick="clearF()">Clear</button>
  <input id="valoare" />
  <button id="adauga" onclick="adauga()">+</button>
  <button onclick="nrElemente()">ElemNr?</button>

  <script type="text/javascript">
    var array1 = localStorage.getItem("array1");
    array1 = (array1) ? JSON.parse(array1) : [];

    var two = "kes";
    document.getElementById("result").innerHTML = localStorage.getItem("array1");

    function clearF() {
      window.localStorage.clear();
      location.reload();
    }
    function adauga() {
      var x = document.getElementById("valoare").value;
      array1.push(x);
      localStorage.setItem("array1", JSON.stringify(array1));
      document.getElementById("result").innerHTML = localStorage.getItem("array1");
    }
    function reloadd() {
      location.reload();
    }
    function nrElemente() {
      alert(localStorage.length);
    }
  </script>
</body>
</html>

Also, it's considered bad practice to place your JavaScript events & functions in HTML attributes. Try to separate HTML, CSS & JS as much as possible by placing all (or at-least most) of your JS in your script element / JS file.

Good luck and all the best.

guys please test your code because your support may be useful and correct but in my code have no effect like ..I changed the localStorage.setItem after you said and var cars with your code too and the code just does not do anything
Yep that is thanks it work ..but how can I delete the square brakets?
You don't 😉 those "represent" your array. Those "square brackets" show up when you use console.log(); or alert();. If you would like to turn your JSON string into a JavaScript Object use JSON.parse();. If my answer has helped you don't forget to up-vote and accept it, thanks.

charlietfl · Accepted Answer · 2016-10-01 23:10:33Z

2

You are creating an empty array every page load and when you add to array you store that but never connect cars array to the data that is already stored

Try changing

var cars =[];

To

var localData = localStorage.getItem("array1");
// if localData not undefined then parse that as cars array, otherwise is empty array
var cars = localData ? JSON.parse(localData) : [];

When you go to store the cars array change to:

localStorage.setItem("array1",JSON.stringify(cars));

edited Oct 1, 2016 at 23:10

answered Oct 1, 2016 at 22:26

charlietfl

172k14 gold badges125 silver badges154 bronze badges

5 Comments

charlietfl Over a year ago

well this is a very common pattern...try logging cars to console

S. Georgian Over a year ago

guys can you please give me a cod which does what I wanted to achieve first time please?to save the inputs and don t lose them

charlietfl Over a year ago

ooo note you should use JSON.stringify() also when you set the localStorage...localStorage only stores strings. If you are fighting with it you can use store.js library

charlietfl Over a year ago

those 2 changes should do it... are you not seeing the full array in console now?

S. Georgian Over a year ago

I am using browser to see the results and right now I use the platform from w3schools w3schools.com/html/tryit.asp?filename=tryhtml_default

mauron85 · Accepted Answer · 2016-10-01 23:33:01Z

There were some major issues with your code, this is a fixed version:

<script type="text/javascript">
  var cars = [];
  try {
    cars = JSON.parse(localStorage.getItem("array1"));
  } catch (err) {}

  var two = "kes";
  document.getElementById("result").innerHTML = cars;

  function clearF() {
    window.localStorage.clear();
    location.reload();
  }
  function adauga() {
    var x = document.getElementById('valoare').value;
    cars.push(x);
    localStorage.setItem("array1", JSON.stringify(cars));
    document.getElementById("result").innerHTML = localStorage.getItem("array1");
  }
  function reloadd() {
    location.reload();
  }
  function nrElemente() {
    alert(localStorage.length);
  }
</script>

Collectives™ on Stack Overflow

LocalStorage array

3 Answers 3

3 Comments

5 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

5 Comments

Comments

Related