Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Is it possible to pull data from HTML5's local storage and save to server database?

I have an idea for a social web app and part of the idea is to pull data from localstorage onto the server database. The reason for this is say you have an idea and you want to put it on your next status for this social app, but you have no signal and wireless anywhere. You write out the status on the app and it saves it to the localstorage for use when they get back to somewhere where they can connect their phone online.

They then get to a place where they can go online, the app then detects that there is a change in the localstorage and then pulls it from there and saves to the server database.

Is this at all possible, if so how would you go about implementing it? If it's not at all possible, do you think this could be sometime in the future?

I look forward to hearing from your comments and answers on this one as I think it could be quite a big discussion.

like image 407
CheckeredMichael Avatar asked Jul 12 '13 10:07

CheckeredMichael


People also ask

Can local storage be accessed by server?

As you mentioned localStorage and sessionStorage are not available on the server. You could use cookie and access them inside getServerSideProps via req.

Can you use localStorage as a database?

At its core, a browser's Local Storage is similar to a database: it allows us to store, retrieve, remove, and manipulate data, all directly within the browser — no database required. But when it comes down to it, it's really just a big key-value store (much like the PHP arrays with discussed in Lesson 3).

What data type can localStorage save in the browser?

Web storage objects localStorage and sessionStorage allow to store key/value in the browser. Both key and value must be strings. The limit is 5mb+, depends on the browser. They do not expire.

When should I use local storage vs session storage?

sessionStorage is similar to localStorage ; the difference is that while data in localStorage doesn't expire, data in sessionStorage is cleared when the page session ends. Whenever a document is loaded in a particular tab in the browser, a unique page session gets created and assigned to that particular tab.


2 Answers

Yes it's possible, why wouldn't it be? When you pull data from the local storage, the data works just like any other Javascript variable, there are no restrictions that would stop you sending it to a server other than the lack of Internet connection.

how would you go about implementing it?

First you'd need to detect the connection status, see this question. So when a user tries to update their status, it checks if the connection is online and if it isn't then save it to local storage.

Use the methods in the linked question to detect when the connection comes back up, and at that point pull the data from local storage and send it to the server via ajax, then clear the local storage to prevent duplicate data being sent.

like image 181
MrCode Avatar answered Sep 22 '22 03:09

MrCode


You can periodically check navigator.onLine in your Javascript to get the online status of a device. Note that while

  navigator.onLine == false 

safely tells you that a device of offline,

 navigator.onLine == true 

doesn't necessarily mean it has access to the internet and can perform the request, just that it is connected to some sort of network.

Once you assume that the device is not offline you'd send an ajax request (I recommend using jQuery's $.ajax function) in which you POST the data from your localStorage

(localStorage.getItem('dataToPull'))

to a PHP script, which then inserts it into your MySQL database.

If that ajax request fails, and you're sure it's not getting a PHP/MySQL error, it's safe to assume that although the device is connected to a network and navigator.onLine is true, there's no internet connectivity. You can then do some error handling, e.g. poll the device again in 5 minutes.

like image 39
benfranke Avatar answered Sep 19 '22 03:09

benfranke