How to save and retrieve an array of floating point coordinates to localStorage in Javascript?

Question

I want to save 5 button coordinates to localStorage then retrieve them for a click event to identify when a button is clicked. Centre coordinates for the buttons are saved to an array as they are rendered. When the object is retrieved I can only access them as a single character string rather than as an array.

How do I save them as an array ? and how do I retrieve them ?

I'm not sure if what I want to do is even possible as this is the first idea I have for using JSON. The idea came from looking at this answer which made me ask if this could be a way to store and receive a set of floating point numbers. So I'd be most grateful if anyone can point me in the right direction.

during render

 var xButtonCoords = [];    
 var yButtonCoords = [];
     xButtonCoords.push(button.x.toPrecision(6));
     yButtonCoords.push(button.y.toPrecision(6));

Once rendering is done coordinates are saved to localStorage.

 store(xButtonCoords, yButtonCoords);

The store function packs button coordinates as a string object before it is stored.

function store(xButtonCoords, yButtonCoords) {
var xCoords = packString(xButtonCoords, xButtonCoords.length);   // show just x coordinate
localStorage.setItem('xCoords', JSON.stringify(xCoords));        // put into storage

The packString function represents button coordinates as a string before putting the object into storage. The string object uses a key value pair.

function packString(points, numberOf) {
var coords = [];
for (i = 0; i < numberOf; i++) {                                  // do number of shifts
    var key = i;                                                  // make a coordinate key
    var val = points.shift();                                     // get coordinate value
    var string = key+" : "+val;                                   // create key value string
    coords.push(string);                                          // save string as coords
    }
    return coords;
}

during event

var X = localStorage.getItem('xCoords');                         // retrieve from storage
var report = 'xDots: '+JSON.parse(X);
alert(report);

The retrieved object appears as a string of characters.

NB. The five string character integers in the key represent the order in which buttons are rendered. I am trying to create an array of 5 floating point numbers not a string of characters.

for (var [key, value] of Object.entries(report)) {
    alert(`${key}: ${value}`);                                   // characters not elements
    }
}

I actually found that duplicate through this one: https://stackoverflow.com/questions/3357553/how-do-i-store-an-array-in-localstorage While floats do have their antics, you actually don't work with them: `toPrecision` calls return strings. To get the numbers back, either use `parseFloat` (to show the intent) or just `Number()` those. — raina77ow, Sep 20 '20 at 05:54
make this change in packString function: **var string = new Object(); string[i]=val; coords.push(string);** Now, it would store the order as **key** and coordinate as **value**. It should be easier to process once you retrieve it. — gkulshrestha, Sep 20 '20 at 06:22

Saadi Toumi Fouad · Answer 1 · 2020-09-20T15:27:29.780

Well you should use an array instead of an object because you need indexing, so you can use JSON.stringify to make a JSON string from your array then store it in localStorage, and when you want to retrieve it just do JSON.parse on it and you get the array back, here is a small example, note that stack snippets don't allow local storage usage so i used only an object, it's the same idea of course

// save the array as a string
var a = [0.1, 1.2, 2.3, 3.4, 4.5], myLocalStorage = {};
myLocalStorage.a = JSON.stringify(a);
// it's a string so you get the first char only
console.log(myLocalStorage.a[0]);
// get it back to an array so you get the first item
var b = JSON.parse(myLocalStorage.a);
console.log(b[0]);

I will try this with localStorage

You can do the same with local storage

// save the array as a string
var a = [0.1, 1.2, 2.3, 3.4, 4.5];
localStorage.a = JSON.stringify(a);
// it's a string so you get the first char only
console.log(localStorage.a[0]);
// get it back to an array so you get the first item
var b = JSON.parse(localStorage.a);
console.log(b[0]);

or using set and get

var a = [0.1, 1.2, 2.3, 3.4, 4.5];
localStorage.setItem("a", JSON.stringify(a));
// it's a string so you get the first char only
console.log(localStorage.getItem("a")[0]);
// get it back to an array so you get the first item
var b = JSON.parse(localStorage.getItem("a"));
console.log(b[0]);

I will try this with localStorage – Greg Sep 20 '20 at 06:06 — Greg, Sep 20 '20 at 06:06

How to save and retrieve an array of floating point coordinates to localStorage in Javascript?

1 Answers1