This question already has answers here:
How to store objects in HTML5 localStorage/sessionStorage
(24 answers)
Storing JSON data in browser memory
(3 answers)
Closed 4 years ago.
I want to make a web-based TO-DO list exactly like the one on the W3schools link below, however when I close the browser all the inputs and edit disappear and it reverts back to the original. Is it possible to easily store the values (if not I will quickly delete this Q)? What code can I add to make it save the data (perhaps localstorage?) each time or would I have to set up a php/mySql? No authentication required, whatever is the most straightforward way to do it.
The exact code is below. I prefer to host locally for simplicty but if necessary web based hosting server is also fine with me.
To Do List Example from W3 Schools
You can use Javascript LocalStorage to save data on browser close, only if it is being loaded on a domain that is accessed via HTTP.
Though, you can use a server-side database, such as mySQL to store data.
I am working on a php/JavaScript web application that must perform many calculations using many values input by the user. There are several pages of inputs, and calculations using values input on previous pages are everywhere.
I have been passing the recently entered values between pages using $_POST, and storing them for use in a serialized class saved as a $_SESSION variable. One obvious way to pass values from PHP to the page for use by JavaScript is to populate the page with hidden form elements. JavaScript could use this data and modify it as necessary, then pass the values via POST.
I may have many such hidden elements, and I can't help but think that this is a good way to slow down the pages. Is there a better way to store this data between pages? Cookies?
Thanks!
SH
Search AJAX in google. It's a technic that helps your javascript to communicate with your php. First it is hard to learn the syntax but watching videos from youtube will do just fine.
As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.
Closed 9 years ago.
At one interview, once I attended, I was asked to create one java script based functionality in which I was said to create one form (say i.e first name, last name, email, age) and one listing(actually listing was kind of another form storing multiple entries) below this form. On submitting this form one new row was added to listing. However it is possible to remove any previously added listing row. and after adding removing, finally need to store this final state of listing. ( Kind of form post and server side scripting comes into picture )
So what I did that, On Form submit, adding a new <tr> row in listing table at the same time I serialized all form data except submit button using jQuery serialize and stored it in one hidden element of listing form.
On removing listing row, I was removing <tr> row along with respective hidden element for the same row.
All was working like great without any error. But the interviewer asked me that "The approach I used (hidden elements) was really proper?".
I replied, I could have used json?
but Could not crack interview.
So I want to know what is best approach that We can use to store data in such conditions?
Another approach for client-side is to keep a list of objects separately and only store the reference to each item inside a property of your DOM element. This approach is very similar to what jQuery's $.fn.data() provides and has these advantages:
You don't have to serialize anything, the data stays in its native format; it should be said that you could have achieved this by adding a property as well.
All your data is kept in one place instead of scattered around in the DOM.
This is an example implementation:
(function(ns) {
var entries = {},
entryId = 1;
ns.Entries = {
addEntry: function(data) {
entries[entryId] = data;
return entryId++;
},
getEntryById: function(id) {
return entries[id] || null;
}
};
}(this));
Calling Entries.addEntry returns an identifier that you can store in one of the DOM element's properties:
tr.entryId = Entries.addEntry(data);
Later you can use that entryId property to find the corresponding data in the entry list and use it.
var data = Entries.getEntryById(tr.entryId);
Demo
Of course, this particular functionality can also be solved server-side by using sessions.
Thanks to HTML5, we now have the ability to embed custom data attributes on all HTML elements. These new custom data attributes consist of two parts:
Attribute Name
The data attribute name must be at least one character long and must be prefixed with 'data-'. It should not contain any uppercase letters.
Attribute Value
The attribute value can be any string.
Using this syntax, we can add application data to our markup as shown below:
<ul id="vegetable-seeds">
<li data-spacing="10cm" data-sowing-time="March to June">Carrots</li>
<li data-spacing="30cm" data-sowing-time="February to March">Celery</li>
<li data-spacing="3cm" data-sowing-time="March to September">Radishes</li>
</ul>
We can now use this stored data in our site’s JavaScript to create a richer, more engaging user experience. Imagine that when a user clicks on a vegetable a new layer opens up in the browser displaying the additional seed spacing and sowing instructions. Thanks to the data- attributes we’ve added to our <li> elements, we can now display this information instantly without having to worry about making any Ajax calls and without having to make any server-side database queries.
source: HTML5 Doctor
There are other methods too I believe.
Actually instead of using hidden elements , you can add data to the html elements using jQuery. This is a better approach to make your data a little less obvious/direct to the users. Check the data() in jQuery.
Nothing wrong with storing data client-side if the user can be trusted with it and nothing terrible happens to your system when he messes with it.
Only problem I can see with using hidden fields (or cookies) is that they get sent with every request, which might waste bandwidth. Not sure if that applies to your case, probably not, because you say you just submit once when all is done.
The problem with solutions that 'just work' is that they are not abstract enough and therefore tend to cause problems in the future. Consider your example; should you decide to store the temporary data in Local Storage (to allow users close their browser and return to it later), you'd have to rewrite how you store your data. If you stored it in a variable, you'd be able to add 'Save to Local Storage' just as easily as 'Submit to server' or 'Pass to Any Other Function' functionality. Your 'hidden element' approach would have to be rewritten for any purpose except posting to service.
To start with, multiple forms on one page are wrong - it's data loss antipattern. The correct approach would be to place everything into one form. This way, it would work even without JS and you could use JS only to improve usability, not to provide basic functionality. This solution would degrade gracefully an it would be easy to debug and maintain.
Of course, saving the data in hidden field is a valid technique.
By writing submitted data into the form itself, and reading again from it, you've tied these two elements together - they are said to be tightly coupled.
What word happen if another requirement came through to displaye previously submitted data in the table also? Or to put the form on a separate page?
If you take a more MVC approach, you can separate out the logic for the various parts - reading, writing and sending data. For example, as you said, writing and reading from a JSON model. This would make each aspect more readily extensible in the future.
I will not answer your question directly but will focus on interview and method you chose.
I would say you chose wrong way and well known IT company you applied this solution for can have problems.
You chose the way to store everything on client's side, but you shouldn't! As your client can lose a lot of data this way, because imagine the case when your listing form will never be sent? User will just forget to hit send (never trust user!). Then you lose everything... whole progress of your work... and let's say you've already added 50 listing items...
Also adding items like this can easily make your session expired (no requests to the server) and no data will be saved, because user will have to log in again. And you will have to handle it as well, or you will lose everything!
Sorry for exclamation marks, but I think data is crucial (especially for your client) so do not ever offer solutions which can make client losing it somehow.
So:
It's not bad to store data in HTML elements, but you need to apply this solution very carefully.
This question already has answers here:
Closed 12 years ago.
Possible Duplicate:
How do I get the current location of an iframe?
Hi i want to get the complete URL, and with the methods i know i get the full url but of the iframe, and i want the 'final' document.location.href,
how can i get it?
i don't care if its php or js, but i'm guessing by my experiments that with PHp it's not possible...
If you want to know where you currently are:
Client side - javascript - you can use alert(window.location).
Server side - php - .$_SERVER["REQUEST_URI"] or $_SERVER['PATH_INFO'] depending on what you want.
Take a look at the top answer from this question.
It's important to note that it's (luckily!) not possible to get the URL of an iframe if the iframe's URL is from a different domain than the parent page. If you're trying to do that, you're probably out of luck.
This question already has answers here:
Persist variables between page loads
(4 answers)
Closed 7 years ago.
i have a one html page in which i am storing few user selected values now and want to use these values on another html page.
i am using jquery in my module and i have already tried window.name and window.localStorage but they don't persist values between two pages.
so please help me to solve this problem.
If you don't want a cookies--and if you're directing from the first page to the second, how about passing the values as GET variables to the next page:
http://example.com/newpage.html?var1=blah?var2=blerg
then you can access that data with window.location.search.
You could use the "hash":
http://my.app.com/page2.html#name1=val1&name2=val2
The hash would be ignored by the server, keeping things "clean". The second page can read the hash from
window.location.hash
and then parse out the name/value pairs with some simple string/regexp/array manipulation.
If you wanted the hash to be "hidden", your second page could also then remove the hash from the URL - this would not result in another trip to the server - changes to hash only result in browser/client side behaviour.
If it's just a few values, how about cookies?
Store the value inside a cookie on the first page and and retrive it on the second. Its very easy with the Jquery Cookie plugin http://plugins.jquery.com/project/cookie
You would have to try and use cookies (assuming users are nice enough to enable those).
Here is a very useful link: http://www.w3schools.com/JS/js_cookies.asp
Finally i got pretty cool solution on
http://plugins.jquery.com/project/DOMCached