Hi I have am logging in users and redirecting them to http://domain.com/profile/#welcomemessage or http://domain.com/profile/?msg=showwelcomemessage
So basically it shows welcome message based on query string.When Users reload the page I want to remove the query.i.e..basically I want to show the welcome message only once.
If this is not possible.Should I use localstorage ? will this work on all browsers?
You are probably looking for
window.history.replaceState
Usage:
window.history.replaceState( {} , 'foo', '/foo' );
From w3.org:
history . replaceState(data, title [, url ] )
Updates the current entry in the session history to have the given
data, title, and, if provided and not null, URL.
or you can use localStorage like this:
if (!localStorage.getItem("visited")) {
//yourmessage
localStorage.setItem("visited", "true");
}
//clear the localStorage when the tab is closed
window.onbeforeunload = function() {
localStorage.removeItem("visited");
};
localStorage sounds like the way to go. Or a session if you are more server-orientated. localStorage does work in ie8 and above
For localStorage:
if (!localStorage.hideWelcomeMessage) {
document.getElementById('welcome-message').style.display="block";
localStorage.hideWelcomeMessage = true;
}
and html:
<div id="welcome-message" style="display:none;">Welcome!</div>
The above assumes the id is "welcome-message" but of course you can change that up.
Related
when the user login to his account and click remember me how to make the login form auto-fill the user email and password when the user come to login again so he doesn't have to fill his email and password again in react and next
First of all, store user's credentials on front side (localStorage, lessionStorage and etc.) is not a good practice.
Usually "Remember me" checkboxes are used to create an auth-cookie with longer time life.
For example:
When user checked "Remember me", you will send post request with query params remember=1, server handle this, and send response with header:
Set-Cookie: {auth-cookie}={value}; Max-Age={one week, for example}
It will create a cookie in browser, which time life is one week.
In another case, if user didn't check "remember me", server responds with header like this:
Set-Cookie: {auth-cookie}={value}; Max-Age={one day, for example}
It means that user will be authorized during just one day, after it cookie will be expired, and user will logged out.
User can allow the browser to autocomplete input fields if click "Save password" after submitting the form in browser's popup.
It's browser behavior.
Best regards!
Answer
You can use localStorage, a built-in object in JavaScript for browsers.
localStorage is of type Storage, which means that you can use it via the methods setItem, getItem, and removeItem.
How to use
localStorage.getItem("item1"); // null
localStorage.setItem("item2", "EntityPlantt");
localStorage.getItem("item1"); // still null
localStorage.getItem("item2"); // "EntityPlant"
localStorage.item1; // "EntityPlantt"
location.reload(true); // Reloads page
localStorage is persistent, so you can call it on load to fill in the form.
Examples
onload = () => {
if (localStorage.getItem("data")) {
var data = JSON.parse(localStorage.data);
// fill out the form
}
}
And, when someone fills the form, you can save the form data in localStorage.
btn.onclick = () => {
localStorage.setItem("data", JSON.stringify({
// Form data
}));
submitForm(); // The submitting of the form; your code here
}
Note that localStorage can only store strings. So you can convert them to your type.
var number = parseFloat(localStorage.getItem("number"));
var string = localStorage.getItem("string");
var object = JSON.parse(localStorage.getItem("object"));
var array = localStorage.getItem("array").split(",");
var symbol = Symbol(localStorage.getItem("symbol"));
Reference
If you want to learn more about localStorage (and sessionStorage), go to the MDN docs.
You can use the localstorage of the browser (better encrypted). Then, if the user doesen't refresh the localstorage you will be able to use this information to fill the form.
So basically i need a redirect to a landing page but this code: How to redirect first-time visitors to another page? worked when I tested it first and now it's not working and I even tested the ones in the comments or reply.. please help.
Creating the cookies script is not working
You can use LocalStorage instead of cookie:
if(!("visited" in localStorage)){
localStorage.visited="";
window.location="https://google.com/";
}
You can use localStorage instead of cookie. It has 5 mb limit of memory per domain. First check if isNewVisitor is null .If the user never visited the site, then set it to true and redirect to you homepage. if the user visits 2nd or 3rd time, it goes else if block and sets isNewVisitor to false.
var homePage= 'www.yourwebsite.com'
if(localStorage.getItem('isNewVisitor') === null){
localStorage.setItem('isNewVisitor') = true;
window.location = homepage;
}else if(localStorage.getItem('isNewVisitor')){
localStorage.setItem('isNewVisitor') = false;
}
I have below scenario
Page 1 has a link, when user clicks on it, it gets navigated to portal page with page reload. So just before navigation, a JSON object is created
The size of this object comes around 4KB roughly.
Sample object
let obj = {
"date":"12/31/2018",
"year":"2019",
"zip":"93252",
"members":[
{
"sdf":true,
"age":21,
"fdssss":false,
"aaaa":false,
"fdss":null,
"fsdfsd":[
"ADULT"
]
},
{
"sdf":true,
"age":21,
"fdssss":false,
"aaaa":false,
"fdss":null,
"fsdfsd":[
"ADULT"
]
}
}
There is a back link from that portal page, on clicking page will be navigated back to Page 1 with a page reload.
So when the page is navigated back, I need the created JSON object back again. I need it only for that session or the data should be persistent even if the page is reloaded.
Do I have to use localStorage? If i store the object in localStorage, at what point i should clear the storage? How should I handle between different users?
Do I have to use sessionStorage? what will be the scope of the data availability
I'm using AWS service.
Q1:
you can have localStorage, and you should handle it at the code when first page loaded and you can delete it when user do signout or login, storage is about browser not user, if there are some users behind one computer at different times you must clear all data manually.
Q2:
you can also have sessionStorage, per tab and will be removed by closing browser.
in details:
This is depends on your scenario which means localStorage used for long time but sessionStorage used when you need to store something temporary.
but the important thing about sessionStorage is that it is exist per tab if you close tab and windows the sessionStorage completely removed, it used for critical data such as username and password whereas localStorage is used to shared data whole the browser.
localStorage has no expiration date, and it gets cleared only by code, or clearing the browser cache or locally stored data whereas sessionStorage object stores data only for a session, meaning that the data is stored until the browser (or tab) is closed.
at the end I suggest you to use localStorage because you may want to share that data whole the browser event after closing browser and you can store more data, in the other side there are limitation about them, when you are used storage you should handle them manually and take care.
suppose:
function removeStorage()
{
var obj = localStorage.getItem('obj');
if(obj !== null)
localStorage.removeItem('obj')
}
and in login or logout success action call removeStorage() and in Page1 load have something like below:
var obj = localStorage.getItem('obj');
if(obj !== null)
{
....
//show the obj in label or do what you want with it
...
}
We normally use a prehome as the website of Forbes USA.
Every time we enter i.e. http://johnwho.url the page is redirected to a Welcome Home, and 8 sec later will be redirected to the original home , adding a cookie that will not show this pre-home again util 24 hores later.
like:
//Redirect
welcome = function() {
var cookie_name = 'welcome';
var value = true;
var go = Cookies.get(cookie_name);
if (go == null) {
Cookies.set(cookie_name, value, { expires: 1, path: '/' });
window.location = "/bienvenidos/"
} else {
return false;
}
}
window.onload = welcome();
But what if we want to redirect site wide, from an article or different url.
how can we change the redirect path to the selected(clicked) url??
What would be the best option to achieve this?
I know two ways: first you store all URLs which used to redirect into DB and use GET attributes which contains id from DB, another idea use GET attribute, which store URL.
For first solution URL looks like http://example.com/redirect/?urlID=100,
for the second issue -> http://example.com/redirect/?url=http://my-anothersite.example.com
How to store previous URL , this is not working please give me any idea to store previous url on click and i want to user on some other pages
$scope.plain_url = function() {
console.log('--------------------------')
$scope.temp_url = window.history.back();
console.log('--------------------------')
console.log($scope.temp_url)
}
If you are using a router then you can listen for specific event:
$scope.$on('$routeChangeStart', function(event, next, current) {
// get information from "current"
});
https://docs.angularjs.org/api/ngRoute/service/$route
Or if you're just interested about previous browser URL (not the one changed by your angular app, by pushstate) you can use:
document.referrer
https://developer.mozilla.org/en-US/docs/Web/API/Document/referrer