This post will help you to attach the page information to URLs, lets assume that If you want to store a small fragment of information to the URLs in such a way that the information should be available to anyone who is accessing the page.
The information can be passed as a page fragment, for this we can use javaScript to add a page fragment and encode the data as parameters in a query string, which starts with a question mark, followed by the parameters passed as key/value pairs separated by equal signs, and separated from each other by ampersands.
In the example, we just create a static state link.
<!DOCTYPE html>
<html>
<head>
<title>Remember me?</title>
<style>
#square
{
position: absolute;
left: 0;
top: 100px;
width: 100px;
height: 100px;
border: 1px solid #333;
background-color: #ffff00;
}
div p
{
margin: 10px;
}
</style>
<script>
// found at http://www.netlobo.com/url_query_string_javascript.html
function getQueryParam( name ) {
name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
var regexS = "[\\?&]"+name+"=([^&#]*)";
var regex = new RegExp( regexS );
var results = regex.exec( window.location.href );
if( results == null )
return null;
else
return results[1];
}
window.onload=function() {
// set up button
document.getElementById("move").onclick=moveSquare;
document.getElementById("size").onclick=resizeSquare;
document.getElementById("color").onclick=changeColor;
var move = getQueryParam("move");
if (!move) return;
var size = getQueryParam("size");
var color = getQueryParam("color");
// update element
var square = document.getElementById("square");
square.style.left=move + "px";
square.style.height=size + "px";
square.style.width=size + "px";
square.style.backgroundColor="#" + color;
// update data-state values
document.getElementById("move").setAttribute("data-state",move);
document.getElementById("size").setAttribute("data-state",size);
document.getElementById("color").setAttribute("data-state",color);
}
function updateURL () {
var move = document.getElementById("move").getAttribute("data-state");
var color = document.getElementById("color").getAttribute("data-state");
var size = document.getElementById("size").getAttribute("data-state");
var link = document.getElementById("link");
var path = location.protocol + "//" + location.hostname + location.pathname +
"?move=" + move + "&size=" + size + "&color=" + color;
link.innerHTML="<p><a href='" + path + "'>static state link</a></p>";
}
function moveSquare() {
var move = parseInt(document.getElementById("move").getAttribute("datastate"));
move+=100;
document.getElementById("square").style.left=move + "px";
document.getElementById("move").setAttribute("data-state", move);
updateURL();
}
function resizeSquare() {
var size = parseInt(document.getElementById("size").getAttribute("data-state"));
size+=50;
var square = document.getElementById("square");
square.style.width=size + "px";
square.style.height=size + "px";
document.getElementById("size").setAttribute("data-state",size);
updateURL();
}
function changeColor() {
var color = document.getElementById("color").getAttribute("data-state");
var hexcolor;
if (color == "0000ff") {
hexcolor="ffff00";
} else {
hexcolor = "0000ff";
}
document.getElementById("square").style.backgroundColor="#" +
hexcolor;
document.getElementById("color").setAttribute("data-state",hexcolor);
updateURL();
}
</script>
</head>
<body>
<button id="move" data-state="0">Move Square</button>
<button id="size" data-state="100">Increase Square Size</button>
<button id="color" data-state="#ffff00">Change Color</button>
<div id="link"></div>
<div id="square">
<p>This is the object</p>
</div>
</body>
</html>
According to the example when each button is clicked, the div element will be adjusted, and the newly applied CSS value will be stored with an appropriate button.
When the state of the page will change, a link in the page will get updated and the changes to the page will be reflect. The actual window.location property and even the window.location.search property will not change. Now you after this you can reload the page and have the script restore the page to the state in the URL.
0 Comment(s)