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
}
};
Related
first of all i'm a beginer front end developer and i'm not a native english speaker so sorry for any mistake i made in my first question :D I'm working on project in Vue that was started by someone else. It uses websocket to display some notifications from server and i spotted a bug associated with this. The notifications are stored in object that pulls data from localStorage using VueUse's useStorage:
const state = reactive({
liveNotifications: useStorage("liveNotifications", []),
notificationsCount: 0,
});
And when data is received from ws it's being added to the beginning of the array like this:
connections.alerts.onmessage = (event) => {
const data = JSON.parse(event.data);
if (data?.status) {
return;
}
state.liveNotifications.unshift(data);
state.notificationsCount += 1;
};
The problem is, when more than 2 tabs are opened and ws send some notifications, the localstorage starts acting weird like its trying to add the same objects over and over and notificationsCount is jumping (for example) from 2 to 3 and vice versa.
Is there any way to e.g. prevent app from updating localstorage multiple times if the data given from ws is the same on all tabs. Or maybe there's another way to make this work properly?
I've tried some solutions from web but to be honest i'm not really sure why is this happening and i didn't know what exactly i was supposed to look for so if someone has better knowledge than me and can help me understand i'm here to learn :)
The problem is: both tabs will read/write to the same "file".
The localStorage read-only property of the window interface allows you to access a Storage object for the Document's origin; the stored data is saved across browser sessions.
MDN - Window.localStorage
Suggestion here is to use sessionStorage instead:
[...] the difference is that while data in localStorage doesn't expire, data in sessionStorage is cleared when the page session ends.
Whenever a document is loaded in a particular tab in the browser, a unique page session gets created and assigned to that particular tab. That page session is valid only for that particular tab.
It sounds like you need a shared worker.
Since you are receiving the same data it is reduntant to keep two connections.
You should handle your websocket connection in a shared worker, then upon receiving the data save it to the localStorage, then post a message to the tabs to update the UI.
localStorage.clear() seems to behave in a manner that completely wipes all local storage. Local Storage seems to fit my use case, but I'm concerned of the possibility the local storage isn't guaranteed to not be cleared outside of my control.
For example:
My web site has a line of code:
localStorage.setItem('some', 'data');
Some other website that is operating in the same browser on another tab has this line of code:
localStorage.clear();
If that scenario ever happens, when I go to access localStorage.getItem('some');, it will return null because someone else ran localStorage.clear().
Should we never run localStorage.clear()?
What is the proper usage of localStorage.clear() if I am heavily
using local storage and don't want to write a ton of code to remove
items from the local storage individually
localStorage.removeItem('item1'); localStorage.removeItem('item2');
// etc...
Is there some way to prevent items from being removed if someone
runs localStorage.clear() somewhere else?
There is no need to worry, every time you open a new window or tab a new session is created and localStorage refers to the local session of that tab/window which is unique for that domain.
Your fine running it, it will only clear your variables
If you need to clear everything use feel free to use localStorage.clear()
Someone else cannot clear your local storage
https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API
It is unique per domain. For example the localStorage for your domain
protocol://abc.com will be different from protocol://xyz.com
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
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.
I have a page that used Ajax to generate the a list of result. Then there is a link to click to another detail page. When I'm at the detail page, and click the back button. The list of results page will reload again. Is there anyway to stop the ajax to reload again and cache the result. Also is there anyway to cache the position also.
thank you for your help
A few projects I had bookmarked regarding the AJAX/back button management
https://github.com/browserstate/history.js
https://github.com/tkyk/jquery-history-plugin
Regarding your second question, if your browser supports local DB you may cache the result there. The following project provide a uniform API across browsers.
https://github.com/marcuswestin/store.js
https://github.com/alexmng/sticky
Position can also be stored in the localDB.
You can save state by changing the window.location.hash property. The hash is the only part of the URL that you can change and not force a reload of the URL.
window.location.hash = 'some-id'; will translate into your URL looking like this: index.html#some-id.
You can then get the hash when the page loads and set the UI to the proper state:
if (window.location.hash == 'some-id') {
//setup UI for `some-id` identifier
}
https://developer.mozilla.org/en/DOM/Storage
Store your data with a timestamp of some sort. Check to see if you have stored data and that it's not older than you would like it to be. If it's older, fetch new data. If not use the stored data.
(it's not mozilla specific)
http://caniuse.com/#search=local%20storage
You can use the new HTML5 LocalStorage system to build a cache. Here's a link: http://playground.html5rocks.com/#localstorage