Is it possible to send local storage data?

1

Hi there! I’m very new to programming but found the Kirupa tutorial on using localStorage very easy to follow and it is helping me with an app I’m developing.

My scenario is this: I have a very small array in my js file. When the page loads up, I have a function that loops through the array, and generates an li element for each item in the array, displaying it’s name and price in the li. The array is constructed like this:

var gameList = [
{ name: “”, value: 0.00},
]

Secondly, I have a simple form on the page that allows me to add new items to the array, and using localStorage, it’s now possible for me to keep a dynamically updated array. I push items into the array (gameList), then at the end of the session I set it using localStoarge. I have a couple of lines at the start of my code that sets gameList to be equal to the locally stored, updated game list.

var retrievedData = localStorage.getItem(“updatedGameList”);
gameList = JSON.parse(retrievedData);

So this is fine for now, but the growing array - which I want to keep and maintain - is only available on this machine.

So, my question is, can I send this locally stored data somewhere? Maybe my personal domain? That way I could then reference it properly in my js file so that the data is always available? Maybe the array could have it’s own js file?

I realise that this may not be the best way to be handling what is essentially a database. But I’m only part way through an online course and I’m using the tools that I have to make this work.

And lastly, in terms of maintenance of the array, is there any way to send it back to sublime in the form a .js file? I know this could be a crazy question. The updated array will become pretty big, maybe 200 items eventually, and it would be much easier to maintain from within sublime.

Thanks for your time, and apologies if these questions are ridiculous!! :slight_smile:

2

Not a ridiculous question at all! You can send your own data anywhere you want, but it will require some level of server-related code. The easiest way to send data back and forth is through JSON, and you can convert your array into a JSON format easily using something like the following:

var jsonData = JSON.stringify(myArray);

From here, you can send this data to a database, to another web site, or to your e-mail server. If you want something really quick and dirty, you can literally just copy the contents of your JSON-ized array using the Chrome Dev Tools, save it on disk as a .js file, and reference it again in your app. That is a manual way of doing something that you don’t really care about automating.

The best solution is to store this in a database. They’ve gotten easier to deal with as well. Firebase is my go-to for things like this, and this video might give you some ideas: https://www.youtube.com/watch?v=xAsvwy1-oxE

:slight_smile:

1 Like
3

Kirupa, you are the man!!! I tried the copy and paste, it worked, and it is incredibly dirty, but for now I think this will be fine. It means I won’t lose any data while the app is in production (and I get my head around databases).

I was wondering if we could use jQuery.post(), to automate it, maybe on browser close or even with a submit button, but I think even that will be superseded in the final version. I couldn’t quite see how to send the data, and where to send it to, and then how to refer to again. I will certainly check out the video you recommended, and the course I’m studying is currently looking at node.js and c9.io so hopefully will have a clean solution soon! But thanks again - the brakes were on and you’ve helped me take them off! (I posted the question on Stack Overflow and nobody was able to help, the answers I received were very unhelpful)

I’ll be bookmarking your site for sure, an invaluable, positive place!! :slight_smile:

4

Great to see! Node.js will definitely help, but you’ll still need some form of cloud storage to send (and later receive) the data to and from. Node is an excellent middle layer between your app and whatever server-based solution you employ.

Ping us again if you need any help with that or other web development issues :slight_smile:

5

Hi Kirupa. I have an update to this query. I have had a lot of time away from this project but am looking to implement the ability to update and save a central object that contains items, essentially a database that my app works from. I hope you can help! I’ll try to explain what I need to do:

First of all, I have a button that fires a get request when clicked. The url is my own domain, and it fetches a .js file, which is essentially a object of items:

$("#load").click(function () {

	$.get( "assets/js/db401.js", function( data ) {
		gameList = jQuery.parseJSON(data);	
	});
	generateGameList();
})

So what I’m doing here is getting the data from the .js file, which is an object like this:

[{“name”:“Item 1 Name”, “price”: item 1 price},{“name”:“Item 2 Name”, “price”: item 2 price} ]

With me so far?! Step 1 is to get the data from the server. This works like a charm. I set a variable called gameList to be equal to the fetched object, and then several other functions now use this variable. In this example, generateGameList() generates a list of the fetched items. All good.

Step 2, and what I’m struggling to get my head around, is to update the object that is being used by the app. In the first step, I am calling db401. This is a collection of 401 items. Say I add an item in my app, I would then like to save this new instance of the object, db402. Here is the structure of the post request so far:

$("#save").click(function () {

	localStorage.setItem(`${'db'+gameList.length}`, JSON.stringify(gameList));

	$.post( url, function( data ) {
	  });		
})

So here, I locally store the new instance of the gameList, which would equate to db402. This works fine, in my local storage I now have a new object that has the new item. My app automatically uses the updated gameList.

If I refresh the page at this point, obviously the call is being made to the original js file, db401. What I would like to do is send db402 to the server, and after a lot of stack overflow reads, I’m none the wiser.

What I would need to do is either constantly overwrite the original object (which seems a little risky to me), or have the get request look for the highest number (db402 is obviously newer/bigger database than db401) and save all these new instances of the object on the server.

I hope this makes sense, let me know if not and I’ll try to explain further!

Thanks,
Sean

6

Sean - this totally makes sense! Sending data securely back to the server is not a trivial thing to implement using client-side code. This is where having some server-side logic will help. PHP is a good choice. NodeJS is another good one. If you are willing to use a 3rd party service for this logic, I highly recommend looking at Google’s Firebase. It provides an easy-to-use real-time database that you can rely on for exactly what you are trying to do :slight_smile:

7

Hi mate. You were so right about this - Firebase is awesome! Thanks again, it’s perfect for my project.

1 Like
8

Glad you liked it! Firebase has saved me many MANY hours of time over the years :slight_smile:

9

While we’re on firebase related stuff…have you had much experience with flamelink? There’s not a lot in terms of tutorials out there yet. In fact…zero! But it looks quite cool and integrates with Firebase easy enough.

I’m about to start a new project and I need to implement a CMS - I’ve pretty much decided to use Wordpress for ease…but I really don’t want to! I’m loving Materialize at the minute and would prefer to build it from the ground up. But there’s so little out there on Firelink that it could be a mistake to try to learn that too!

Anyway, thanks for your help man! :smiley:

10

I’ve never heard of flamelink/firelink! Wordpress is a good and safe choice. Can’t really go wrong with using it :slight_smile:

11

I will probably end up using WP but this does look pretty neat so I may have a play around first!

1 Like