I built a web application that i have running on multiple raspberry pis, I wanted to add storage that is shared by all the web app instances. Basically what I want to achieve is for each instance I open in my browser it saves the device name and URL to my browser (Local storage is what I went with but it's not shared) the web app would then open the storage read all previously accessed pis for easy switching.
I tried to do this using local storage but didn't work as apparently it's per instance and not shared. anyone can suggest a proper way to achieve this ?
Local storage is exactly as it sounds - local to the browser (and machine). It's used to store data between multiple sessions with the same app/website on the same machine/browser. If you want to share some information between multiple instances of the app running on different machines or in multiple different browsers you need to store it on the server.
How to store it on the server is then a separate question alltogether (with a wide range of options, e.g. writing to a file or a database). In any case, the implementation will need to be separate from the client app.
Local storage keys are shared on a single device if requests originate on the same domain.
Consider the following example of how keys could be shared:
You have the domain http://example.com
You have two apps hosted at http://example.com/app1/index.html and http://example.com/app2/index.html
You have a local storage key for last visited where the value is a date string
If you go to app1, it sets the key.
If you go to app2, it will be able to retrieve the key set in app1.
Are you having trouble with getting localstorage to be shared across instances in this manner?
If the apps are on different domains, or you're trying to share information between devices, you'll have to use a server to share the data.
Local storage is local to the current domain. There is no storage that can freely be shared between all web pages built into a browser.
If you have multiple web applications / application instances, they need to know about each other to communicate (via cross-frame messaging) and exchange their URLs to have each store them locally and display them. There are a few approaches how to do that:
have the user explicitly add other domains he knows about so that you can contact them
have the servers announce their presence on the local network (or use a configuration file on each server) so that they know about each other before serving the web site
have a central ("storage") website at a known domain that every application website will contact
Related
I create a test server domain named, e.g., https://pwa.test.com and put two PWAs:
https://pwa.test.com/app1
https://pwa.test.com/app2
I am using VueJS and in vue.config.js is possible to set base url to subfolder.
So both PWAs work gracefully in each subfolder. The problem is that they share the local and session storage, and this is a severe security issue.
The IndexedDB has a specific name for each app, but both are listed together.
How I can separate completely my apps?
I try use 'scope' in manifest.json, but this does not apply to storage.
Using the local storage, you are in charge of detecting which PWA is trying to reach the data. If you really need to use the same subdomain for both, you must also use different keys to identify the items in the local storage. The same applies to sessions.
The best solution would be to use different subdomains for the same application. Your browser should do the rest and store the information separately.
I don't have any idea how to implement this. After a bit of search I found out that medium keeps track of the browser and not the user, what is mean is you can access three free articles from each new browser on the same machine (if I am wrong do point it out). I am using React and Firebase for my website.
Edit: I was thinking along the lines of getting some kind of id which is unique to a browser. As cookies and local storage can always be bypassed.
I don't know if it's a clean way to do it but you can associate an IP to an unique counter. Or with a cookie but he can bypass that by cleaning the cookies
The answer would tightly depend on your application setup and especially on the service backing your front store.
If you are using a self-backed backend, for example a nodejs - express based server, within your route middleware you can access the remote address from the req.connection.remoteAddress request property along with the user-agent req.header('User-Agent') and forward these to your datastore being Firebase in this case.
If you are deploying your application to Google Cloud Function, you can then access the remote peer address using the fastly-client-ip request header and still forward this to your storage system.
Use javascript and implement a system that uses a cookie or local-storage to verify how many articles are read on your website.
On most of these websites however you are still able to bypass this limit by clearing the cache or using a incognito window.
To also limit these scenarios you can use a cookie in combination with an IP address, which has its own drawbacks, especially in corporate environments, and mobile connections where IP addresses are heavily shared or changed. Depending on your situation this may matter or not.
I have a web service involving the attachment of multiple documents to one of many "objects". To simplify this process and make it easier to edit each file individually if the user so desires, I want the user to be able to synchronise all of these files onto a directory on his/her computer (much like that of Google Drive or Dropbox). If the user were to change one of these files, remove a file, or add a file, this would reflect on my web service, and hence affect the files that are attached to this "object".
What would be the best choice of services to do this? I am currently using a Node.JS back-end, although I suspect this will do little to influence the choice of storage. I'm looking for a service that allows the user the flexibility of full filesystem-level CRUD, whilst synchronising the files in a secure manner to a subset of a larger object storage collection, much like synchronising (and only providing access to) a subdirectory of an AWS S3 bucket, hence the title of this question.
I'm currently looking into (somehow) doing this with AWS S3, although I am open to using another storage service.
Thanks in advance.
AWS Storage Gateway (cached gateway) allows you to edit files locally and the Gateway will synchronize the update automatically over to S3.
You will need to install a small VM on the machine. Typically, if your clients have a private data centre / server , this config will allows a "share folder" (or a NAS) to be synchronized with S3.
I'm making a Windows 8 Store App using HTML, JavaScript, and CSS. The app allows its user to make lists, and manage the items inside of those lists. I've managed to edit lists and do everything I want, but the problem is that once you close the app, everything is reset, because none of the changes to the DOM I made (such as elements I added or removed) are saved, and I lose all of the lists and their items I made. Is it possible to edit the DOM in such a way that it edits the actual HTML file, so that everything I did is still there once I open the app again? If not, what are some alternate methods for saving user data once the app is closed?
Thanks,
Daniel
This may be late but hope this helps.
You can use HTML local storage.With local storage, web applications can store data locally within the user's browser.
Before HTML5, application data had to be stored in cookies, included in every server request. Local storage is more secure, and large amounts of data can be stored locally, without affecting website performance.
Unlike cookies, the storage limit is far larger (at least 5MB) and information is never transferred to the server.
Local storage is per origin (per domain and protocol). All pages, from one origin, can store and access the same data.
You can store data by
localStorage.setItem("Name", "Daniel Bezden");
And then you can access them by
localStorage.getItem("Name");
Good luck!
Is there anyway to have a client side small database that syncs with server side database whenever there is a change in data?
So I am looking at writing a javascript program to store a bunch of student application forms. But the internet connection is gonna be unstable as the personnel using it will be moving around campus to collect form data on his tablet.
I have looked at localstorage, but it does not have any database features.
I am really looking for technologies that can do local database entries and make asynchronous syncing easy (like what dropBox did was awesome except that it is not a web application)
I hope my question is clear
Thanks
It depends upon what kind of support you want.
Check out http://diveintohtml5.ep.io/storage.html#future where they talk about the Web SQL Database specification and IndexedDB.
It may work (Web SQL Database that is), since it sounds like a controlled environment.
following storage mechanisms when available:
Standard HTTP Cookies
Local Shared Objects (Flash Cookies)
Silverlight Isolated Storage
Storing cookies in RGB values of auto-generated, force-cached
PNGs using HTML5 Canvas tag to read pixels (cookies) back out
Storing cookies in HTTP ETags
Storing cookies in Web cache
Internet Explorer userData storage
HTML5 Session Storage
HTML5 Local Storage
HTML5 Global Storage
HTML5 Database Storage via SQLite
Copypasta from evercookie description. Several items were removed because too short lifespan and/or too few space. Do not borrow his code, tho, it uses jquery and is clumsy in the other ways.