How to stop local storage overwriting

Question

I don't really understand local storage too well so I hope I explain this correctly. Without getting into the context of my program, I basically want two key values to be set every time the program is ran, "teamname" and "totalpoints," however every time the program is run, these values get overwritten to the most previous time they were set. I saw somewhere I need to incorporate an array to solve this, however I don't really know what to do.

function store()
{
localStorage.setItem("key value",[teamname, totalpoints]);
document.write(localStorage.getItem("key value"));
}

Hi Noah, in order for me to help, I'd need to know a little more about your program. In particular, how are you creating the teamname and totalpoints variables? — Zachary Haber, Apr 04 '20 at 14:43
Does this answer your question? [Storing Objects in HTML5 localStorage](https://stackoverflow.com/questions/2010892/storing-objects-in-html5-localstorage) — palaѕн, Apr 04 '20 at 14:44
"*however every time the program is run, these values get overwritten to the most previous time they were set*" - well, that's what `setItem` does. Don't overwrite the value if it already exists. "*I saw somewhere I need to incorporate an array to solve this*" - no, that's totally wrong. You can only store strings in localstorage anyway. — Bergi, Apr 04 '20 at 14:55
@ZacharyHaber ok, pretty much the program is like a sports simulation game, and by the end of the program I want to create a leaderboard of all the users that played the game, ranked by totalpoints, and the teamname is just used as the identity of each user. Obviously when these get overwritten everytime the program is run, I can't do this. What I want to happen is for the leaderboard to continually grow with every user that plays. What I'm guessing you mean by how the variables were "created" is that are declared globally. — NoahCGC, Apr 05 '20 at 04:01

symlink · Answer 1 · 2020-04-04T15:08:13.860

0

If I understand your question, all you need is some way to check the status of the user, and if they have already visited, don't overwrite their team name or score:

let teamname
let totalpoints

if(localStorage.getItem("visited") !== "true"){
   teamname = /* your code here */
   totalpoints = /* your code here */

   localStorage.setItem("teamname", teamname)
   localStorage.setItem("totalpoints", totalpoints)
   localStorage.setItem("visited", true)
}else{
   /* do something else */
}

edited Apr 04 '20 at 15:08

answered Apr 04 '20 at 14:54

symlink

11,984
7
29
50

1

Now this always overwrites `visited`. And `getItem` will return a string, never a boolean. – Bergi Apr 04 '20 at 14:56
@Bergi moved the `setItem("visited")` to inside the if statement, and changed to string – symlink Apr 04 '20 at 15:06
Ah, with the moved statement it makes sense. – Bergi Apr 04 '20 at 15:08

Zachary Haber · Answer 2 · 2020-04-07T15:02:30.063

When you first create the variables teamname and totalpoints, pull them in from localstorage then.

let [ teamname = 'defaultName', totalpoints = 0 ] = JSON.parse( localStorage.getItem('teamKey') || '[]');

Then when you store the values:

function store()
{
   localStorage.setItem( "teamKey", JSON.stringify( [ teamname, totalpoints ] ));
  document.write(localStorage.getItem("key value"));
}

You'll want to stringify/parse when entering and grabbing values from localStorage because it becomes a string and this way you can get back the object you are putting.

Edit: I feel like we all misinterpreted what you were asking for:

In order to append to the array every time you store, you need the leaderBoard to be an array of objects where the objects are {teamName:string,totalPoints:number}. And then add to the array every time you store the row. You can also do some checking if you want to see if there's the team already in the leader board and base whether you add them again on that.

let leaderBoard = JSON.parse( localStorage.getItem('leaderBoard') || '[]');

Then when you store the values:

function store(teamName,totalPoints)
{
   localStorage.setItem( "leaderBoard", JSON.stringify( [...leaderBoard,{teamName,totalPoints} ));
  // depending on what you want to afterwards, you probably need to update leaderBoard variable to the latest as well.
  leaderBoard = JSON.parse(localStorage.getItem("leaderBoard"));
  document.write(localStorage.getItem("leaderBoard"));
}

You'll want to stringify/parse when entering and grabbing values from localStorage because it becomes a string and this way you can get back the object you are putting.

Same problem. the key keeps getting overwritten to the most previous value that was assigned. — NoahCGC, Apr 07 '20 at 14:46

How to stop local storage overwriting

2 Answers2