说到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. mysql5.5免安装版配置教程

    1. 下载免安装版 ,解压缩 2. 配置MYSQL的环境变量 新增系统变量MYSQL_HOME:安装目录 在PATH变量的最后面添加: ;%MYSQL_HOME%\bin(注意前面的:) 3. 打开文 ...

  2. openstack-nova源码之阅读流程

    以创建虚拟机为例 1.项目入口setup.cfg文件 2.根据nova-compute = nova.cmd.compute:main找到功能入口 3.nova/api/openstack/compu ...

  3. Linux jdk8 安装

    wegt 命令安装 wget --no-cookies --no-check-certificate --header "Cookie: gpw_e24=http%3A%2F%2Fwww.o ...

  4. Linux守护进程编写指南

    Linux守护进程编写指南 守护进程(Daemon)是运行在后台的一种特殊进程.它独立于控制终端并且周期性地执行某种任务或等待处理某些发生的事件.守护进程是一种很有用的进 程.Linux的大多数服务器 ...

  5. 雪花算法，生成分布式唯一ID

    2.3 基于算法实现 [转载] 这里介绍下Twitter的Snowflake算法——snowflake,它把时间戳,工作机器id,序列号组合在一起,以保证在分布式系统中唯一性和自增性. snowfla ...

  6. 2.9_Database Interface ADO结构组成及连接方式实例

    说通俗点OLE DB和ODBC都是最底层的东西,而ADO对象给我们提供了一个“可视化”和应用层直接交互的组件,ADO对象T通过OLE DB间接取得数据库中的数据,如下图: 从上面看出,可以说ADO是应 ...

  7. ActiveX的AssemblyInof.cs文件 IObjectSafety  接口

    ActiveX的AssemblyInof.cs文件 IObjectSafety  接口 [Guid("D4176A17-2A33-4903-8F37-9EBDD7CAFFD3"), ...

  8. 什么是MBR

    MBR的定义 MBR(Main Boot Record)主引导记录是位于磁盘最前边的一段引导代码,由磁盘操作系统(DOS)在对磁盘初始化时产生,负责磁盘操作系统(DOS)对磁盘进行读写时磁盘分区合法性 ...

  9. CPU子系统

    CPU的基本结构: CPU的主要部件: ​ 运算部件.缓存部件.寄存器.控制器.时序部件 CPU的工作原理: ​ 主要功能:处理指令.执行操作.控制时间.数据运算 ​ 执行指令的流程:读取指令.指令译 ...

  10. 聊聊 ES6 中的箭头函数

    首先来两点: 当只有一个参数的时候,那么 () 可以省略 当只有一个 return 的时候,那么 {} 可以省略 当函数体内只有一条语句的时候,那么 {} 也可以省略 下面来几个简单的例子来对比 ES ...