Syncing localStorage

Question

I'm looking for a solution that allows a browser's localStorage to be less local, so that people can access their data on multiple devices. The traditional way is to run a database on a server and have people log in; but I'm trying to avoid doing that. I'd like the server side to be lightweight - perhaps even completely static if possible - and to not have the job of safely storing passwords, worrying about data protection etc.

Many browsers have a login of some sort -- Google Account, Firefox Account etc -- that ties a user's browsers together. So the ideal solution would be to store data in localStorage, but use that account to sync across devices. There are interfaces such as chrome.storage that seem to be available to packaged apps, but not to ordinary web pages.

Is something like this possible with present technologies?

Trierarch

Have you considered a tool like firebase, for an easy database store. There's not really any easy solution otherwise for your q. – Hydra

That does look close to what I was after, actually. Post that as an answer, @DvidSilva, so I can give you the bounty. – Trierarch

Answer 1

I would consider using a tool like firebase web, it would save you tons of time on development and it will sync all your clients to the data.

https://firebase.google.com/docs/storage/web/start

Hydra

Answer 2

You could use WebRTC without a signaling server to synchronize both instances of your application.

Neighborhood

Answer 3

From Your webapp:

1. post an email address and the user data to the backend (PHP for example)

From Your back-end:

2. generate a UUID and save the user data inside a file which name is this UUID

3. send back to the client that UUID and save this identifier together with the data to the localStorage.

At this point, You can have a static link which You can either:

• at client-side: print to the screen in clear-text or in form of a 2-D barcode, ready to be recognized by Your mobile devices
• at server-side: send by email to that given email address.

Now, You can get the user data from the back-end by posting that UUID

Discussion:

How safe is a UUID to store user-data? I believe, a UUIDv4 (generated from 'random data') it is safe enough to create reasonably unique identifiers. So, pay attention how You are generating that random seeds. Here is a great reference: PHP function to generate v4 UUID. So, that static link shall be safe enough, and You can use any already existing authentication system to share that link, by email or whatever You want.

---

Here is another approach: CROSS-STORAGE which enables multiple browser windows/tabs, across a variety of domains, to share a single localStorage. However, I strongly believe that UUID shall be generated at server-side.

Expressly

Answer 4

AFAIK there are no good ways to do what you'd like to do. There are some hacks but they each have their own shortcomings.

If you really don't care about security here (which I'll assume is the case since you don't want a server): you could use the URL itself as your localStorage. That is to say, you could for example base64encode(JSON.stringify(yourLocalStorageData)) and tack that onto a URL: example.com/#eyJmb28iOiAiYmFyIn0=\n. When the browser opens your URL, it could start by looking for the above and perform the opposite procedure: localStorage = JSON.parse(base64decode(URL_DATA)).

From there you could make it the users problem of "syncing" the page by allowing them to share the URL using whatever method they choose.

Downside is of course keeping things in sync. User has 2 browsers. User shares the original link between browser A and browser B. User continues to work on browser B. User now opens browser A: it will not reflect the changes made in browser B unless if the URL was shared again, in the other direction.

I've seen a few examples of this technique already where the user would "download the application state" as text (again, base64 encoded) and would upload that text when coming back. It was worded as "take a backup" and "restore a backup" which is maybe more user friendly.

Kaveri

Answer 5

You want secure cloud storage for your app in a browser without having to do the security?

You could have your app do OAuth with GitHub via Auth0, and create a GitHub App that the user adds to a private repo. Your app then syncs their data to the repo.

Then GitHub handles the identity, Auth0 handles the authentication, and GitHub handles the data storage.

Intestine

"You want secure cloud storage for your app in a browser without having to do the security?" Yes, basically. Google and Mozilla have resources I can only dream of, and have the problems of identity and data synchronisation solved for a lot of use cases. I'd like to ride those coat-tails. Asking each user to make a GitHub repo doesn't sound practical. If this was a small group, like a company network, it might be an option; but not for the open internet. – Trierarch

Answer 6

you can use api that save all data ...api for per user after login load data from back-end after that save in local Storage

Overwork