How to Store Multiple Items in Local Storage

How to store multiple items on Local Storage when a button is clicked?

The problem is, you're creating a new array, pushing a single id in it, and then saving it every time the function is called. Two things you could do is move the items array outside of the function, and simply push to it, before saving them. The second option is, getting the already stored value, parsing it with JSON.parse and pushing a new item in it, before saving it again.

I suggest going with option 1, even if it creates a global variable. It's much faster.

var items = [];

function store(item_id) {
    items.push(item_id);
    localStorage.setItem("item", JSON.stringify(items));
}

How do I store multiple items in local storage?

// on page load
var coordinates = [];

// in the event function
coordinates.push(e.latlng);

You should then be able to store it as stringified JSON. Consider using helper functions, something like:

function setJSON(key, value) {
    window.localStorage.setItem(key, JSON.stringify(value));
}
function getJSON(key) {
    return JSON.parse(window.localStorage.getItem(key));
}

Then store the array

setJSON('clickedPoints', coordinates);

Later you can retrieve it like this

getJSON('clickedPoints');   

Save multiple objects on Local Storage? Javascript

Instead of doing this {roomId: room1, roomId: room2} you can simply do this:

{room1: room1Data, room2: room2Data}

So if you want to update any one for example room1.

const setLocalStorage = (roomId) => {
   const initialUpdateData = JSON.parse(localStorage.getItem('notifiedRoom')) ||{room1:null,room2:null}
    let updatedRoom = {
   ...initialUpdateData,
    [updatedRoom]:{
      roomId: roomId,
        dismissed: true
  }
  }; 
    localStorage.setItem('notifiedRoom', JSON.stringify(updatedRoom));
  };

Note: updatedRoom will be your room1 or room2

How can I store multiple values inside one localStorage key?

You need to add little bit more code in order to maintain a "list" (array) in localStorage. There is no problem with actually storing an array in localStorage as long as it is a string - and to convert an array into a string ( and be able to parse it back later ) you can use JSON.stringify (and JSON.parse to get it back)

function addNewItem (item) {
  let myList = JSON.parse(localStorage.getItem("myList", "[]"));
  myList.push(item);
  localStorage.setItem("myList", JSON.stringify(myList));
}

function getAllItems () {
  return JSON.parse(localStorage.getItem("myList", "[]"));
}

function removeItem (index) {
  let myList = JSON.parse(localStorage.getItem("myList", "[]"));
  myList.splice(index, 1);
  localStorage.setItem("myList", JSON.stringify(myList));
}

This is just an example and would need to be modified to fit your code, please do not just copy/paste it

In your example

<input type="text" id="product">  
<button onclick="myfunction()">save</button>

<script>

  function myfunction() {
    var product = document.getElementbyid("product").value;
    addNewItem(product);
    console.log(getAllItems());
  }

  function addNewItem (item) {
    var myList = JSON.parse(localStorage.getItem("myList", "[]"));
    myList.push(item);
    localStorage.setItem("myList", JSON.stringify(myList));
  }

  function getAllItems () {
    return JSON.parse(localStorage.getItem("myList", "[]"));
  }

</script>

How to save multiple items to localStorage in jquery

I think the answer to my question is here.

For anyone needing the same solution.

https://www.c-sharpcorner.com/blogs/store-multiple-values-in-localstorage-apin-in-html-5

JS: Multiple objects in an array stored in local storage

You are pushing entire array received from local storage into second position of local showList array, you should use array concatenation:

localStorage.removeItem('showList');

function addNewShow(titleArg, typeArg, genreArg, watchedArg) {
  var showList = [];

  var show = {
    title: titleArg,
    type: typeArg,
    genre: genreArg,
    watched: watchedArg
  };
  showList.push(show);
  showList = showList.concat(JSON.parse(localStorage.getItem('showList')||'[]'));
  console.log(showList);


  localStorage.setItem("showList", JSON.stringify(showList));
};

addNewShow(1,2,3,4);
addNewShow(1,2,3,5);
addNewShow(1,2,3,6);
addNewShow(1,2,3,7);

Little snippet showing why (jsonString||"[]") is important:

var array = [1,2,3,4];console.log("array is:");console.log("\t",  array ); console.log("concating null adds new null element to the array");console.log("\t",  array.concat(null) ); console.log("concating empty array deosn't change anything");console.log("\t",  array.concat([]) );console.log("result of expresion (null||[]) is empty array not null");console.log("\t", null||[]);console.log("puting it all together, if we don't want to add null to the array then we can write   array.concat( null||[] )");console.log("\t",  array.concat( null||[] ) ); 
console.log('additionaly JSON.parse(null) in null');console.log("\t",  JSON.parse(null) );