I have read about HTML Filesystem and LocalStorage but I'm not sure what is the best way to implement what I need, if it is all possible.
Basically what I need is for the browser to store some data, preferably XML format, and then send this to server. My ideal implementation is writing to a text file and then uploading this file to the server. But I understand this is not possible to do locally in browsers.
Also I read that Filesystem is not being supported anymore. So is Localstorage the only option to store information in client side?
The biggest problem I would have with Localstorage is that I might have multiple pages, but I need all of them to write to one place.
For example let say I have a web app and the user starts with page A, then navigates to page B and then page C and so on. I need to store some information on each page, and then finally, say page D, I want to send all the previously stored data to the server.
So firstly, am I trying to do something impossible?
If not, what is the best way to go about this?
Thank you.
To simply answer your question, yes, you can achieve that. You can store anything in key value pairs in the local storage from different pages and you can send it to the server whenever ready. You can also look at session based storage if you want it to be saved only for a session.
Related
Currently I'm developing a React web application that needs to store some data from user in the client side and also this data are Important and should not swap suddenly so we can't use Indexed DB.
I just thought about using a file to store data as JSON but in a file that can be stored in user computer and also access to read and write it from React.
The best way to work with that is using localStorage.
Cookies are mainly for reading server-side, and local storage can only be read by the client-side. Other point is saving data, a big technical difference is the size of data you can store, localStorage give you more space.
Check it out https://medium.com/#siobhanpmahoney/local-storage-in-a-react-single-page-application-34ba30fc977d
What you're looking for is the in-browser sessionStorage or localStorage. Having the ability a JSON file to a user's computer would be a major vulnerability and is not possible from a browser/client. I suppose you could create one and trigger a download for them to accept–and then have them subsequently re-upload it when you need the data again. But, I'd argue that session/localStorage is more what you're looking for.
I am trying to keep values for a page over user interaction. I know I can do it using cookie and local storage. But I am curious to know that is there any way to do it without using cookie and local storage. If it is possible then how?
Actually I am asking to do it without any storage.
Update url for each action made by user so you can retain the parameters you want on page reload, I don't think we have any other way
IndexedDB is another option for client-side storage. Its API is a bit complex though, so to use it, you might want a library like localForage instead.
Another option is to save the values by saving them in a database on the server, though for reliable retrieval without storing any information client-side, the user will have to be able to input something unique to them (such as username/password - the server checking their IP addresses likely won't be enough, since IP addresses are often shared)
I am working on a project for my dad's boss. I created a to do list using HTML, JS, and CSS. I'm really out of my element in terms of how to make it so that the list of things that he enters automatically saves, so that if he closes the file, the list is still there when he opens it
I don't want anyone to code this for me. I don't want anyone to write the code for me, because I really want to learn how to think through these things more efficiently, but if someone could help talk me though what I need to do, I would appreciate it.
It sounds like your application does not involve any server-side logic, so I only discuss client side options:
When the todo-List is getting changed you need to store the content and load it again when the page is revisited/loaded. Therefore you basically have the options of saving the data to a cookie or to local storage. Cookies are intended to save small data client-side and to transfer this data with every request to the server. Cookies also usually have a limited time to live before they are deleted.
Localstorage can store bigger data client side, is not sent with every request to the server and will usually be not deleted as quick as cookies. So I think I would prefer using localstorage.
There are nice references on writing and reading to cookies and localstorage.
Localstorage
see https://developer.mozilla.org/de/docs/Web/API/Window/localStorage
localStorage.setItem('myCat', 'Tom');
...
var cat = localStorage.getItem('myCat');
Cookies
see https://www.w3schools.com/js/js_cookies.asp
document.cookie = "username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 UTC";
...
var x = document.cookie;
But you should understand that as long as you rely on saving your data to the client the data will not be available in another browser (e.g. you worked in chrome and now open the page in firefox or in incognito mode).
So longterm you should consider to transfer and save the data server-side. If you insist in using a pure client-side approach, I would recommend to implement the option to save the todo-list as a download. Otherwise the deletion of browser-data might result in loss of all your todo-lists.
It looks like what you want to do is a web application that's able to store information, on this case your information is the TODO list you mensioned. You can store this information on a database or a .txt for example. After that, the next step is to fill the list you created everytime you load your html page, to save new information you can set an event in js saving the information in the background.
Of course to do all this you need to do some research on the key points I've mensioned.
I'm working on a website that is going to be offline. All the html files will be in a folder stored on the hard-disc. I've managed to do 90% of the work and the last part I have no idea of. Here is what it is:
I have stored a list of products in the localStorage as various strings under the keys - like buying objects and it goes to the cart, the cart objects are in localStorage. I created a page that showed the list of all the products in the localStorage. It can be cleared if the user clears them. Now I need to create a page where all the objects that was selected before, regardless of the localStorage being cleared, show as list in this page. You can take it as the page that lists products that have been ordered in the past, i.e even after the cart is cleared the products will show in the past-orders page.
I do not know any server side codes, I did everything using JavaScript as it was supposed to be a simple project, but I'm stuck at this part. So I cannot use PHP or anything to generate files or use a database to store stuff.
Here's what I thought but I don't think it works but wanted to confirm if it does or not:
Generate an XML file or a .txt file and store it in the drive and then clear the localStorage. But I don't think it is possible. If its possible just using JavaScript please point me in the right direction and I'll research and come up with something.
P.S. the website will be entirely offline what I mean is the users will never connect to the internet for this to work. Also there won't be a server or localhost.
Thank you!
The site is completely offline, but functionality is similar to an eCommerce site. You click a button and some content from the website stores in the localStorage and I have to call it in multiple pages, when a user clicks another button, localStorage clears but whatever was selected before must be available without localStorage. Hmmmm.. Consider a quiz site where you answer everything and when you take a new quiz, old scores will be stored somewhere else and it won't change when you take a new test.
Is it possible to attain this functionality without a server side script? It seems the final-targeted-users won't know how to install any softwares that can provide a localhost or a server or something like that.
Client-side, browser's JavaScript runtimes don't have local file system access excepting a very limited one when uploading files to a remote server, and anyway, browers won't give you direct access to the file.
You'll need some kind of server-side logic behind the scenes if you want full I/O in the local file system.
Perhaps you can take a look at NodeJS, a server-side JavaScript runtime that can work as lighty Web server on either small and large projects, and it has built-in server-side JavaScript I/O functions.
Otherwise, you're absolutely stuck in the client-side Web browser's sandbox limitations.
U can refer documents of knockoutjs and NodeJS.. That would probablky help... A far as my knowledger is concerned NodeJS does contain a way to handle your problem.
How to store a list in the web sql or any type of storage in the browser,
I have found three ways to store data in the browser, i.e. localstorage,session storage and web sql with html5 so i need to store the java.util.List in the browser and need to modify it at in future so is there any way to do so?
I'm not sure - you need to store and manipulate the 'List' on the server or on the client?
In the first case you may use session. In second case you can't use session because you can not access session variables in javascript.
In such situation I'm usually creating hidden field (if it's something page related) or cookie (if it's something application related). Using base64 you may pass transformed to string List to the client, modify them and save. Of course later you may read the data on the server.
I got the answer, we need to first take the list in local var in the page and than through javascript iterate it and store in the local browser db.