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?

Answer 1

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.

Answer 2

您可以在没有信令服务器的情况下使用WebRTC来同步应用程序的两个实例。

Answer 3

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

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.

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.

Answer 6

您可以使用 api 保存所有数据...登录后每个用户的 api 从后端加载数据，然后保存在本地存储中