sessionStorage troubles - javascript

I'm trying to understand how sessionStorage works. I get how to make it store some variable and restore it but I wanted to do something different.
This link from w3schools shows how to show/hide elements with a function. I have a pretty similar setup on my site. So I wanted to make it work on the w3schools example then I'll know how to apply it on my site.
Could you perhaps edit the w3schools code to make it use session storage to restore the last option (either shown or hidden) so that I can undestand how it works and apply it then myself?
Thanks in advance.

There you go:
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
</head>
<body>
<p id="hideMe">some text</p>
<button id="hide">hide</button>
<button id="show">show</button>
<script>
$(function(){
$("#hide").click(function(){
$("#hideMe").hide()
sessionStorage.setItem('hidden', 'true');
})
$("#show").click(function(){
$("#hideMe").show()
sessionStorage.setItem('hidden', 'false');
})
sessionStorage.getItem('hidden') === 'true' ? $("#hideMe").hide() : null
})
</script>
</body>
</html>
(fiddle)
But I'd say it's not what you're looking for. The sessionStorage will survive page reloads but as soon as you close the tab/window it's gone.
The sessionStorage property allows you to access a session Storage object. sessionStorage is similar to Window.localStorage, the only difference is while data stored in localStorage has no expiration set, data stored in sessionStorage gets cleared when the page session ends. A page session lasts for as long as the browser is open and survives over page reloads and restores. Opening a page in a new tab or window will cause a new session to be initiated, which differs from how session cookies work.
(https://developer.mozilla.org/de/docs/Web/API/Window/sessionStorage)

Related

How to access location attribute of window object?

I have problems with accessing the location attribute of the window object, which I need to redirect the user to another page via JavaScript/jQuery. I know you normally should use an .htaccess file to do this, but I'm actually writing an nw.js application, so I have no server.
Here is an example source code:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<script src="http://code.jquery.com/jquery-3.2.1.js">
</script>
<script>
$(function() {
$("#testbutton").click(function() {
$("#testbutton).before($(window).attr("location"));
});
});
</script>
</head>
<body>
<button type="button" id="testbutton">Click me</button>
</body>
</html>
This should, if it worked, get the value of the location attribute and insert it before the button when the button gets clicked.
In reality, it doesn't do anything. I also tried to assign the value of the location attribute to a variable, or write this in plain JavaScript (which I intend to avoid), but neither did change the fact that nothing happens.
Is it possible to access the location attribute of the window object via jquery? And if it's possible, what's my mistake?
I wanted to print the value first before changing it, because I like to develop projects step by step. I know this code is not going to change the location attribute, but I wonder why it's not even getting the value?
You don't need jQuery....just access the location.href directly
$(function() {
$("#testbutton").click(function() {
$("#testbutton").before(location.href);
});
});
<script src="//code.jquery.com/jquery-3.2.1.js"></script>
<button type="button" id="testbutton">Click me</button>
The window Object is a global Object and has many properties that you can read and edit , one of this properties is the location Object which is not a text its an object that holds some information about the current location and urls but you can access the current url location using location.href and then you can insert this text any place you want , look at the example below
$(function() {
$('#testbutton').click(function() {
var currentUrl = window.location.href;
$('#testbutton').before(currentUrl+'<br>');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<button type="button" id="testbutton">Click me</button>
</body>

How to redirect without using window.location

If I click a button from page A, the browser will redirect to page B. In page B if I click a another button again it redirects to Page A. Here I used window.location.href to redirect the new page.
eg:window.location.href="http:\\localhost:12345\index2.html"
Is any other alternative way to redirect next page. I don't want to use windows.location
Update:
If I use windows.location the url which I come from is stored in document.reffer. For security purposes I don't want to allow to store the url.
Location assign() Method
You may use this method
example :-
function myFunction() {
location.assign("https://www.google.co.in");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<body>
<button onclick="myFunction()">Load new document</button>
</body>
</html>
You can also use
window.location.replace("http://someUrl.com");
replace() does not keep the originating page in the session history.
Using $location in angularjs : See the documentation https://docs.angularjs.org/api/ng/service/$location
$url =$('<a/>')
$url.attr('href',"http://google.com");
$url[0].click()
You can try this.
You can use location.assign() for redirect another page.
location.assign("https://www.facebook.com/");
why not use <a>. what you only to do is give it a class like button.

Chrome- Go back to previous webpage automatically?

Is there a way to configure in Chrome (or any browser) that whenever a webpage changes it automatically goes back to the previous page.
E.g. If a user presses a "Submit" button on a survey, they will be shown the "finish" message but then the original webpage with the survey will load again?
To go to previous page use
window.history.go(-1);
Example
<!DOCTYPE html>
<head>
<script>
function initialize(){
var submitBtn = document.getElementById("submitBtn");
submitBtn.addEventListener("click",function(){
alert("successfully submited");
setTimeout(goBack,2000)
});
function goBack(){
window.history.go(-1);
}
}
window.addEventListener("load",initialize);
</script>
</head>
<body>
<button id="submitBtn">Submit</button>
</body>
To go to a specific page
window.location = "";
While I'm not convinced it's a great idea, you know your requirements better than I do.
So to go back, you run this javascript.
window.history.back()
When you say immediately go back, I assume you want them to see the finish message first before being sent back after, say, 3 seconds?
<script>
setTimeout(function() {
window.history.back();
}, 3000);
</script>
Edit
If you want to redirect without javascript, you can use a meta tag in the header
<meta http-equiv="refresh" content="3; url=http://www.example.com" />
So if you use server side rendering you could reference the HTTP_REFERER header and inject it into your meta tag.
If you don't use server side rendering (PHP, MVC, React, etc) and you can't use javascript, then no; you're stuffed.

Prevent webpage dialog from spawning new browser window?

I have an open web page dialog. From there, what I'd like to do is when the user clicks on a link, refresh the contents of the dialog with modified query string parameters. The problem I am running into is that rather than refresh the same web page with new parameters, a new browser window pops up.
Here is the page used to open the dialog:
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript">
function ShowPopup() {
var popWinFeatures = "dialogWidth: 800px;dialogHeight:600px;center:yes;status:no;scroll:no;resizable:yes;help:no";
window.showModalDialog("webPageDialog.html","PopUpWin",popWinFeatures);
}
</script>
</head>
<body>
Click For Modal
</body>
</html>
and this is the code within the webpage dialog that attempts to refresh the webpage with changed query string parameters:
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="scripts/jquery-1.6.4.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
var queryString = "?ab=123";
var newURL = window.location.protocol + "//" + window.location.host + "/" + window.location.pathname;
$('#testLink').attr('href', newURL+queryString);
});
</script>
</head>
<body>
Please Click Me
</body>
</html>
I've also tried using window.open as well as setting window.location. And I've also tried setting window.location.href but the result was the same.
the new browser window displays exactly what I expect. It's just not in the same window.
Thoughts?
Since posting this question, I came up with two possible solutions. In case anyone comes after me and wants to know what I ended up doing, here you go!
The first was just to make the popup non-modal. Removing the modal piece gave me the behavior exactly like I expected it. This didn't work in my situation however for a different reason... It seems that the session cookie was not carried over which in this web app, would cause the log-in page to be displayed before then displaying the correct page. This struck me as odd, but ran out of time to investigate why that was happening.
Second (and this is the solution i ended up going with) was to use an iframe, and display what i needed within the iframe. Definitely not my favorite, but it works!

Change variable value in js from HTML JavaScript?

I need the community to help me with the following:
I defined the variable x=1 in my js file. I have 2 HTML files that use that variable (1.html and 2.html). I want to use onclick event in 1.html to change the value of variable x to 2 permanently.. so that if I use x variable in 2.html it's value is 2 not 1.
This is what I have in java.js file:
x=1;
This is in 1.html:
<html>
<head>
<script type="text/javascript" src="java.js">
</script>
</head>
<body>
<input type="button" value="Change x" onClick="x=4">
<p id="iz"></p>
</body>
</html>
This is in 2.html:
<html>
<head>
<script type="text/javascript" src="java.js">
</script>
</head>
<body>
<input type="button" value="Change x" onClick="x=x+1">
<p id="iz"></p>
</body>
</html>
The result of the button in 2.html should be 5.
JavaScript doesn't work like that. There's no persistence between pages without using cookies, or passing the state to the server.
If you navigate to foo.html and it sets var foo = 1 and then navigate to bar.html, foo will not have been set.
Short answer, you can't only using JavaScript - the web is stateless.
Though, can use a cookie or local storage as your backing store to hold the value. Initially setting it to 1, any subsequent modifications effect the backing store and reflect the proper value.
In java script there is no persistence of variable as you want, you have to use cookies, a server side aproach or the local storaged offered in html5
This is not normal behaviour for JavaScript because the values you set will on persist for the duration of either page. What you probably want to do is store the value of x on a server, store it in a cookie, or store it in localStorage.
In each of your pages it is pulling in x=1. Just because you change a variable on one page doesn't mean it is going to be seen on another page. This is where you need to pass variables along to the other pages with either GET or POST or cookies or local storage
Your input tags are not closed, that can't be right. Fix these before looking for other reasons for bugs in your code:
<input type="button" value="Change x" onClick="x=4">
Should perhaps be:
<input type="button" value="Change x" onClick="x=4"/>

Categories

Resources