Speaking Storage event, then we have to give everyone talk about localstorage and sessionstorage:
1, localStorage and sessionStorage as temporary objects stored client information is used.
2, they are only stored objects of type string (although the specification can store objects of other native types, but so far not achieved its browser).
3, localStorage life cycle is permanent, which means that unless the user is displayed on the UI to clear localStorage information provided by the browser, otherwise this information will always be there.
4, sessionStorage life cycle for the current window or tab, once the window or tab is permanently closed, all through sessionStorage stored data will be cleared.
5, different browsers can not share information or sessionStorage in localStorage. Between different pages of the same browser you can share the same localStorage (page belonging to the same domain name and port), but between different pages or tabs sessionStorage of information can not be shared. It should be noted that the tab page and refers only to top-level window, if a tab contains multiple homologous iframe tag and they belong to a page, so they can be shared between the sessionStorage.
Storage events:
In some complex cases, when multiple pages need to access data stored locally, you need a storage area when the content is changed, can notify the relevant page.
Web Storage API built a set of event notification mechanism, when the contents of the storage area is changed (including add, modify, delete data), it will automatically trigger the storage event, and sends it to all interested listeners. So, if you need to track changes in the storage area, you need to listen for storage in the event concerned the storage area of the page content. Also, note that when you are testing storage event, you need to run on the server side.
Any event has event objects, of course, onstorage no exception:
key set or remove or modify key. When you call clear (), it was null.
oldValue change the old value before. If you are new elements, it was null.
newValue the new value after the change. If you delete an element, it was null.
storageArea The property is a reference to the changes sessionStorage localStorage objects or
URL url event that triggered this change of page
Next, through a complete example to show you the storage localStorage event mechanism, combined with the native JS drag and achieve a page element to control the movement of elements of another page.
Complete code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<Title> Page drag bis </ title>
<style>
*{
margin: 0;
padding: 0;
}
.box{
width: 100px;
height: 100px;
position: absolute;
background-color: red;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
<script>
class Drag{
constructor(){
this.oBox = document.querySelector(".box");
this.m = this.move.bind(this);
this.u = this.up.bind(this);
this.addEvent();
this.display();
}
addEvent(){
var that = this;
this.oBox.addEventListener("mousedown",this.down.bind(this));
window.onstorage = function(){
that.display();
}
}
down(eve){
var e = eve || window.event;
this.y = e.offsetY;
this.x = e.offsetX;
document.addEventListener("mousemove",this.m);
document.addEventListener("mouseup",this.u);
}
move(eve){
var e = eve || window.event;
this.oBox.style.left = e.clientX - this.x + "px";
this.oBox.style.top = e.clientY - this.y + "px";
var obj = {
left:this.oBox.offsetLeft,
top:this.oBox.offsetTop
}
localStorage.setItem("pos",JSON.stringify(obj));
}
up(){
document.removeEventListener("mousemove",this.m);
document.removeEventListener("mouseup",this.u);
}
display(){
this.oBox.style.left = JSON.parse(localStorage.getItem("pos")).left + "px";
this.oBox.style.top = JSON.parse(localStorage.getItem("pos")).top + "px";
}
}
new Drag;
</script>
</html>
Note: Another page JS code above and JS code is the same, the only difference is the color change elements, there is no longer issued to the (additional Again: storage need to run the event on the server side)
effect:
