说到Storage事件,那么就得先给大家说一下localstorage和sessionstorage:

  1、localStorage和sessionStorage一样都是用来存储客户端临时信息的对象。

  2、他们均只能存储字符串类型的对象(虽然规范中可以存储其他原生类型的对象,但是目前为止没有浏览器对其进行实现)。

  3、localStorage生命周期是永久,这意味着除非用户显示在浏览器提供的UI上清除localStorage信息,否则这些信息将永远存在。

  4、sessionStorage生命周期为当前窗口或标签页,一旦窗口或标签页被永久关闭了,那么所有通过sessionStorage存储的数据也就被清空了。

  5、不同浏览器无法共享localStorage或sessionStorage中的信息。相同浏览器的不同页面间可以共享相同的 localStorage(页面属于相同域名和端口),但是不同页面或标签页间无法共享sessionStorage的信息。这里需要注意的是,页面及标 签页仅指顶级窗口,如果一个标签页包含多个iframe标签且他们属于同源页面,那么他们之间是可以共享sessionStorage的。

Storage事件:

  在某些复杂情况下,如果多个页面都需要访问本地存储的数据,就需要在存储区域的内容发生改变时,能够通知相关的页面。

  Web Storage API内建了一套事件通知机制,当存储区域的内容发生改变(包括增加、修改、删除数据)时,就会自动触发 storage 事件,并把它发送给所有感兴趣的监听者。因此,如果需要跟踪存储区域的改变,就需要在关心存储区域内容的页面监听 storage 事件。另外,需要注意的是.当你在测试storage事件时,需要在服务器端运行。

  任何事件都有事件对象,当然,onstorage也不例外:

    key               设置或删除或修改的键。调用clear()时,则为null。
    oldValue       改变之前的旧值。如果是新增元素,则为null。
    newValue      改变之后的新值。如果是删除元素,则为null。
    storageArea    该属性是一个引用,指向发生变化的sessionStorage或localStorage对象
    url       触发这个改变事件的页面的URL

接下来,通过一个完整的实例,来演示一下 localStorage 的 storage 事件机制,结合原生JS拖拽,实现一个页面中的元素控制另一个页面中的元素的运动。

完整代码:

  

<!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>双页面拖拽</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>

注意:另一个页面的JS代码和上面的JS代码是一样的,唯一不同的是改变了元素的颜色,这里就不再发出来了(另外再次提醒:storage事件需要在服务器端运行)

效果:

  

Storage事件及综合案例的更多相关文章

  1. JavaScript:综合案例-表单验证

    综合案例:表单验证 开发要求: 要求定义一个雇员信息的增加页面,例如页面名称为"emp_add.htmnl",而后在此页面中要提供有输入表单,此表单定义要求如下: .雇员编号:必须 ...

  2. Angular路由与多视图综合案例

    Ajax请求存在的几个问题 (1)Ajax请求不会留下History 记录,会导致浏览器后退按钮失效 (2)用户无法直接通过URL进入应用中的指定页面(保存书签.链接分享给朋友) (3)Ajax对SE ...

  3. Ext.js入门:常用组件与综合案例(七)

    一:datefield简单示例 二:timefield简单示例 三:numberfield简单示例 四:FormPanel提交   datefield简单示例: <html xmlns=&quo ...

  4. 黑马eesy_15 Vue:04.综合案例(前端Vue实现)

    黑马eesy_15 Vue:02.常用语法 黑马eesy_15 Vue:03.生命周期 黑马eesy_15 Vue:04.Vue案例(ssm环境搭建) 黑马eesy_15 Vue:04.综合案例(前端 ...

  5. EL&Filter&Listener:EL表达式和JSTL,Servlet规范中的过滤器,Servlet规范中的监听器,观察着设计模式,监听器的使用,综合案例学生管理系统

    EL&Filter&Listener-授课 1 EL表达式和JSTL 1.1 EL表达式 1.1.1 EL表达式介绍 *** EL(Expression Language):表达式语言 ...

  6. JQuery:JQuery基本语法,JQuery选择器,JQuery DOM,综合案例 复选框,综合案例 随机图片

    知识点梳理 课堂讲义 1.JQuery快速入门 1.1.JQuery介绍 jQuery 是一个 JavaScript 库. 框架:Mybatis (jar包) 大工具 插件:PageHelper (j ...

  7. 5. vue常用高阶函数及综合案例

    一. 常用的数组的高阶函数 假设, 现在有一个数组, 我们要对数组做如下一些列操作 1. 找出小于100的数字: 2. 将小于100的数字, 全部乘以2: 3. 在2的基础上, 对所有数求和: 通常我 ...

  8. Vue和Element基础使用,综合案例学生列表实现

    知识点梳理 课堂讲义 1.Vue 快速入门 1.1.Vue的介绍 Vue是一套构建用户界面的渐进式前端框架. 只关注视图层,并且非常容易学习,还可以很方便的与其它库或已有项目整合. 通过尽可能简单的A ...

  9. Web Storage事件无法触发

    不管是在同源其他页面还是在本页面都不能触发storage事件. <!DOCTYPE html> <html> <head> <meta charset=&qu ...

随机推荐

  1. Django框架之DRF 基于mixins来封装的视图

    基础视图 示例环境搭建:新建一个Django项目,连接Mysql数据库,配置路由.视图函数.序列化单独创建py文件 # 配置路由 from django.conf.urls import url fr ...

  2. SQL server 常见错误--登录连接失败和附加数据库失败

    问题1:数据库软件登录连接不了,因为SQL server有部分服务没有开启,需要手动开启.       解决:计算机管理-->服务-->开启SQL server服务(具体那个自己慢慢试,就 ...

  3. 有关kali更新源时出现的GPG数字证书无效提示的解决方法

    下载并导入key文件 wget -O - https://archive.kali.org/archive-key.asc |apt-key add 显示ok表示成功导入key,然后再进行之后的其他步 ...

  4. Vue.js 2.x render 渲染函数 & JSX

    Vue.js 2.x render 渲染函数 & JSX Vue绝大多数情况下使用template创建 HTML.但是比如一些重复性比较高的场景,需要运用 JavaScript 的完全编程能力 ...

  5. 牛客挑战赛33 B-鸽天的放鸽序列

    也许更好的阅读体验 \(\mathcal{Description}\) 定义一个长为\(n\)的\(01\)序列\(A_1, A_2, \dots, A_n\)​的权值为\(\sum_{i=1}^n ...

  6. 上传自己的 NuGet 包

    参考:https://blog.csdn.net/gulijiang2008/article/details/41724927 STEP 1:在NuGet上注册并获取API Key STEP 2:下载 ...

  7. Python之TensorFlow的基本介绍-1

    一.TensorFlow™是一个基于数据流编程(dataflow programming)的符号数学系统,被广泛应用于各类机器学习(machine learning)算法的编程实现,其前身是谷歌的神经 ...

  8. js合并多个array

    Array.prototype.concat.call(array1, array2, array3, ...)

  9. awvs 中文手册详细版(含10.5及12版本)

    目录: 0×00.什么是Acunetix Web Vulnarability Scanner ( What is AWVS?) 0×01.AWVS安装过程.主要文件介绍.界面简介.主要操作区域简介(I ...

  10. live555的使用(转载)

    Live555 是一个为流媒体提供解决方案的跨平台的C++开源项目,它实现了对标准流媒体传输协议如RTP/RTCP.RTSP.SIP等的支持.Live555实现 了对多种音视频编码格式的音视频数据的流 ...