Adding to global array from inside a function in javaScript

Question

trying to build a quick game. Whereby the word appears at the top of the page, the users click on the correct antonym. I'm trying to add functionality so the users can add their own word pairs. For example:

var iWords = ['new','tall','hot'];
var btn = document.getElementById('btn');

btn.addListenerEvent('click', function() {
var newWord = prompt('What word do you want to add?');
iWords.push(newWord);
});

The code works perfectly, other than when the page refreshes it initalizes iWords from the global var.

Is there any way to permanently push the added words in?

Many thanks, Tom

take a look at this developer.mozilla.org/en-US/docs/Learn/JavaScript/… — Cody Fortenberry
– Cody Fortenberry, Commented Oct 15, 2019 at 19:43

Omi in a hellcat · Accepted Answer · 2019-10-15 19:43:22Z

1

The localStorage and sessionStorage properties allow to save key/value pairs in a web browser.

answered Oct 15, 2019 at 19:43

Omi in a hellcat

7803 gold badges11 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

SpeedOfRound Over a year ago

Keep in mind that local storage is not forever, and isnt a replacement for a real database.

Shumail · Accepted Answer · 2019-10-15 19:49:32Z

There are multiple approaches to tackle this. You could store in localStorage, use cookies or store on server side (in some DB).

Here's an example with localStorage:


// define iWords array & initialize it as empty array.
let iWords = [];

// Check if any existing iWords exists in local storage
const dataInLocalStorage = localStorage.getItem('iWords');
if (dataInLocalStorage !== null) {
    iWords = JSON.parse(dataInLocalStorage);
} else {
  // otherwise initialize iWords with some values.
  iWords = ['new', 'tall', 'hot'];
}


var btn = document.getElementById('btn');

btn.addListenerEvent('click', function () {
  var newWord = prompt('What word do you want to add?');
  iWords.push(newWord);
  // now here, whenever user enters a new word, store & update in localStorage
  // when the page will be refreshed, this stored value will be extracted 
  // from localStorage and assigned to iWords
  localStorage.setItem('iWords', JSON.stringify(iWords));
});

The caveat here is that this is still a temporary storage in browser and won't be stored forever. Storing on server side could be better option, depending on your use case.

Collectives™ on Stack Overflow

Adding to global array from inside a function in javaScript

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related