I have a page(say register page) with text boxes in it. After entering values in them, if I navigate to other to page by using back and forward buttons in the browser and come back to the register page again. I want the entered text box values to be shown. Is there any way to do that. Hope somebody could help. Thanks in advance...
saving to local storage is a bit dangerous, because anyone can go to console and type:
window.localStorage to see the saved values, for ALL USERS of the domain.
for example, on this page of SO right now, the localstorage contains this :
Storage {login-prefs: "{"provider":"google","oauth_version":"","oauth_server":"","username":""}", se:fkey: "c6f10e10979159fee3220954ec846d68,1387300621", wb:isparticipating: "{"1106914":{"t":1387805621703,"v":false}}"}
assuming that the textbox values do not contain personal information,
you will still need to address issue of multiple users on same machine.
one solution will be to use the user ID as a key, the value as a json representation of textboxId : value
example:
on window.befreunload event, strore all the textbox values under a key containing user ID:
localStorage.setItem( 'user_123_form-values' , JSON.stringify( [{ txbox1: 'some text' }, { txbox2: 'some other text' }]) );
to get values:
JSON.parse(localStorage['user_123_form-values'])
here is a fiddle to demonstrate the local storage approach, though if the data needs to be secure,
you will need to use cookies:
http://jsfiddle.net/LLyB6/2/
JS variables never have been persistent, but there are two ways around this:
1.Cookies
2.Storage
Cookies are supported in all but the most ancient browsers, but they can be very unwieldly and difficult to use. On top of that, your browser sends cookies to the server with every pageload, so if it's only used by JavaScript then it's very inefficient.
Instead, you should probably look at the Storage option.
Saving an item is as simple as localStorage.itemname = value; Reading is as easy as localStorage.itemname, and deleting is as literal as delete localStorage.itemname
These values are saved across pageloads, but not sent to the server.
from:
Javascript global variable does not persist when navigate to another page (which also uses same js file)
What you are looking for is done using session / cookie / Appending query string:
Check this answer: PHP Pass variable to next page
Related
Is there any way to access the autocomplete suggestions that appear under HTML input fields in some browsers (representing previously submitted data)? Is this only available to the browser?
I ask as I want to make my own autocomplete implementation in javascript, but I want to intermingle my own suggestions with the users previous searches. A bit like how youtube does (but youtube stores all the data obviously, and it is tied to a login, there are no accounts on my website and never will be).
I was wondering more if there was a way to do it with the data stored in the users browser rather than storing all the data on my server. Is there is a way to grab the data the browser uses to present previous input to a user?
Is the data that appears in html input fields representing previously submitted data only available to the browser?
Yes - until it appears in the DOM.
Is there is a way to grab the data the browser uses to present previous input to a user?
It's a browser-specific feature, and you can't access the data [history] directly (Where do browsers save/store auto fill data). You only can disable storing anything.
I ask as I want to make my own autocomplete implementation in javascript, but I want to intermingle my own suggestions with the users previous searches. I was wondering more if there was a way to do it with the data stored in the users browser rather than storing all the data on my server.
Especially if you want to utilize all previous searches, the browser's autofill doesn't help you anyway. But yes, you can store them in the browser (on the client side) manually: Use DOM Storage, like localStorage. Though I would recommend sessionStorage only, you might run into privacy issues otherwise if everybody using a browser could see the search terms of previous users…
You can use jstorage. Jstorage lets you store up to 5Mb of data on the client side.
<script src="//cdnjs.cloudflare.com/ajax/libs/json2/20110223/json2.js"></script>
<script src="https://raw.github.com/andris9/jStorage/master/jstorage.js"></script>
<script>
/* $.jStorage is now available */
// store some data
$.jStorage.set('yourkey', 'whatever value');
// get the data back
value = $.jStorage.get('yourkey');
</script>
The only way i see this working is with help of localStorage (html5) problem that it doesn't work in ie<8
Here's an example: http://jsfiddle.net/8NZY7/
I have the following situation: the user submits a form, I fetch the data from the server via an Ajax request and displays a chart. However, I want to give the user the option to display the data in the chart in table form or export as csv after he had submitted the form.
I was wondering what's the best solution to store the data, considering that I don't want the data to persist if the user opens a new window to submit the form again for example.
The application is in Rails.
Thanks.
You have a few options:
Cookies
LocalStorage
SessionStorage
More info: https://developer.mozilla.org/en/DOM/Storage
Non-standard:
window.name can store anywhere from 1mb up to 10mb depending on the browser. This is more of a hack, but is fairly stable. You would need to implement your own accessor/setter methods on this, where localStorage and sessionStorage have API's built in.
Personally i would recommend local storage if all your users browsers support it.
Its very simple to use and you can access it using these to methods.
localStorage.getItem("Itemkey");
localStorage.setItem("Itemkey","value");
localStorage.removeItem("ItemKey");
Its always a good way to go and this means you can assign each window a differnt local storage key and even remove the item when the window is closed, or unloaded !
For reference I found this very useful: http://diveintohtml5.info/storage.html
And combine it with storing JSON objects ( http://www.json.org/js.html ) and you have a very fast,simple and easy to use solution. OR even just store a string,array or what ever is required.
On a blog I am working on, I use a cookie to save a user preference on which side of the layout that the sidebar should show, so I have a cookie something like this...
name: sidebar_switcher
value: right or left
No wI just built a Modal/screen overlay DIV that shows on users first visit, I made it set a DIV once this Modal window is hidden/closed so that I don't nag the user on every visit with it. SO I now have another cookie being saved like this...
name: subscribe
value: yes or no
So my question, since each Cookie is a new HTTP request as far as I know, should I instead be storing these values into 1 cookie? If that is the case, then should I do it as a JSON string?
Thanks for advice
You could store it as one cookie, or you could use localStorage() with a fallback on cookies.
That way, your users with modern browsers don't need to parse any cookies around.
I have a web app that populates user page history into the local storage. Ahem. It should be sessionStorage, which I have now changed so that it doesn't persist.
But that left me with an interesting problem: a full localStorage to be emptied. I know you can edit the storage in the developer console to remove the data, but imagine I wanted to use localStorage for whatever reason, and at some point I wanted to completely delete the contents of data that I had placed there programmatically.
I understand local storage is domain specific so this should not be a problem - but my question is how do I globally identify my data and then delete it?
Is there a single js expression that I could use that will just wipe out my data in one hit? Or am I stuck with using naming conventions for my key and then using a reg-ex to select all the keys?
As easy as:
localStorage.clear();
Spec: http://dev.w3.org/html5/webstorage/#dom-storage-clear
localStorage.clear();
is the method call you are after see http://php-html.net/tutorials/html5-local-storage-guide/ or http://diveintohtml5.ep.io/storage.html
I have two HTML pages. After entering few inputs users will be redirected from first page to second page. Before redirecting the user to second HTML page(using window.location="new HTML URL"), I persist few of the user inputs in cookie using document.cookie DOM API.
When I am in the second HTML page, I could not retrieve the value from this cookie. I think since document object would have changed in the new HTML page, my cookie values become inaccessible.
Can someone tell me: how do I retrieve the value from a cookie persisted by one javascript in one HTML page in other HTML page i.e cookie written by HTML A's javascript in HTML B's javascript?
I don't have any server-side code, so I could not take advantage of server-side logic. Also I am not supposed to pass the values in URL. So I need a solution on plain javascript and HTML.
If some one has a better solution please let me know. Thanks
try to use localStorage instead of cookies,
// set your values in the first page
localStorage.setItem('itemKey', 'values');
// on the second page, retrieve them
var values = localStorage.getItem('itemKey');
you can use a jStorage plugin for cross browser behaviour.
also refer to this question for storing objects instead of strings
JAAulde is on point with his answer.
For what the OP is trying to do something like PHP would be great, in that case I wouldn't bother with cookies in order to just pass data between two pages, that's just silly. However, if true persistence was needed and the data requirements were simple cookies would be the way to go even while using a language such as PHP.
Those are rather draconian constraints, is this a class project? That said there aren't any other ways to do what you're attempting, save for an ugly and highly insecure hack of the DOM.