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.
Related
So I have looked around and there is nothing about storing data collect on a webpage so if I refresh said page it would still have everything I either wrote of selected previously. I would like to implement this feature to my website.
If I select one of the options is selected, it filters to said option but I want that option to save on my page when website is refreshed. Is there anyway to do so???
There are many ways to do that.
First of all you can save it on server, but it to much resource cost and in most situations not good solution.
For this problem the best way to store this info on client. You can use something like cookies, session storage and local storage.
I think session and local storage are the best for your purposes. Difference between them session storage save info for current sessin - browser window, loses after browser window closed. Local storage works for browser at all, loses after cockies and storage clear (by hands). So on current computer and browser local storage would save info until it directly cleared))
Also you can use query string, but it is bad solution.
You can simple find more info about localstorage in the internet. Also popular frameworks like angularjs has services to manage work with local and session storage)
The simplest way to achive what you are looking for is with LocalStorage, which is a feature that is supported on most web browsers.
The API in javascript looks something like this:
function onClick(){
localStorage.setItem('selectedRole', role);
}
And on the page load:
$( document ).ready(function() {
selectedRole = localStorage.getItem('selectedRole')
});
You should probably edit the code a bit to fit your needs, This is how I guess you implemented your application.
In your case, sessionStorage is the best choice since you need to persist on refresh only. On page close, the data will lose.
Store the data on page refresh using:
window.onbeforeunload = function () {
sessionStorage.setItem('selectedFilter', selectedFilterData);
};
Retrieve the data on page load using:
window.onload = function () {
var selectedFilter = sessionStorage.getItem('selectedFilter');
if(selectedFilter !== null) {
//set the selections
}
};
I am new to angular and wanted to implement the cache in it. I have found few after Google http://gregpike.net/demos/angular-local-storage/demo/demo.html
http://jmdobry.github.io/angular-cache/
Can anyone suggest which is the best cache for angular. My app is a kind of ticketing system and i need to cache many drop-down list value and and view data.
i need to cache the object of the list (not html). There are few list which will change very rarely and some are that can change after a day or two. if i can cache the $http call in local storage , it would be great.
If you do not need a persistent cache then you may consider simply using the built-in AngularJS $cacheFactory.
To obtain cache persistence you would need look at using local storage. There are a number of options available however angular-local-storage is the most popular.
I'd do it with a custom cache in the service: https://stackoverflow.com/a/60190745/1974681
With this approach when you reload your app, the caché is refreshed too.
You could use localStorage or sessionStorage. In that case the cache will not be refreshed on app reload (https://alligator.io/js/introduction-localstorage-sessionstorage/).
localStorage and sessionStorage accomplish the exact same thing and have the same API, but with sessionStorage the data is persisted only until the window or tab is closed, while with localStorage the data is persisted until the user manually clears the browser cache or until your web app clears the data.
As easy as:
const data = {hello: 'world'};
sessionStorage.setItem('KEY', JSON.stringify(data));
sessionStorage.getItem('KEY'); // {hello: 'world'}
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 am developing a flex component in Flex3 which needs to store some data on the local disk for the future use using
var localData:Sharedobject=SharedObject.getLocal("localdata");
Today while i was working on this, eventually i had opened my chrome browser in incognito mode, so the data was not stored and i couldn't restore the data which i has saved earlier.
So i want to know is there any way to check if the local storage is allowed or not; using javascript. Javascript because i want to check it before even my component is loaded. Pls suggest me some ways to do it.
SharedObject.getLocal() throws an Error when it fails to create SO, so just listen for this error.
EDIT
If you need javascript solution you can create a simple Flash/Flex file which will try to create a SharedObject, then it can pass the result (true/false) to Javascript (using ExternalInterface).
Then you can pass the result to your main component...
JS can't access flash SharedObjects.
*EDIT 2 *
There is HTML5 localStorage, so you may want to use that one, but from your question I understood you wanted to check if Flash local storage works.
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