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.
As you mentioned localStorage and sessionStorage are not available on the server. You could use cookie and access them inside getServerSideProps via req.
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).
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.
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.
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.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With