im working in a app that makes many calculations, and basically i implemented a functionality when a user refreshed or F5 a page he will not loose his data in the current page, im saving the data in localStorage since the data isnt saved in the db, does angularjs have some kind of storage data that i could use it or does anybody no a better solution to use. (not using a database).
You can use the following ways for storing the data:
1) $localStorage
2) $sessionStorage
Given below is a simple example of how you can save an input field in localStorage and still retrieve the value on refresh
<input type="text" ng-model="myValue">
<button type="button" ng-click="saveData()">Save</button>
In controller:
//this will execute everytime on refresh
$scope.myValue = $localStorage.data || null;
$scope.saveData = function(){
$localStorage.data = $scope.myValue;
//similarly $sessionStorage.data can be used
}
You could choose between localStorage and sessionStorage.
localStorage will keep data until you will decide to clear it programmatically, or user will clear it in browser.
sessionStorage on other hand will be cleared when browser or tab is closed. Sometimes it's better solution, because you won't need to think about situations when you would have to clear localStorage.
you can use localstorage for this which an html5 api
Or
If you want to do it with angular then you better go through the following link
https://github.com/grevory/angular-local-storage
http://gregpike.net/demos/angular-local-storage/demo/demo.html
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 working in AngularJS application with Spring rest as backend. I am pretty new to angularjs.
I have a UI page where i display some list of objects in table.There is an edit button against every record.When i click edit, another page opens which set the data accordingly.
The issue is, being on edit page, if I refresh the browser, I loss my data. One way I can think is to make another rest call but I want to avoid making any rest call.
Is there any way to retain data on the page on refresh or making rest call is better solution?
I would think the cleanest way to do it is to make a REST call, as the data could have changed on the server. However, if you want to avoid the call anyway, you may use localstorage. Just store the data in your table in localstore with key value pairs (assign some unique key to every row). You could use this plugin: Angular LocalStorage
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 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.