HTML5 storage事件監聽

阿新 • • 發佈：2019-01-21

分析

引用《h5移動web開發指南》上的話：

“當同源頁面的某個頁面修改了localStorage,其餘的同源頁面只要註冊了storage事件，就會觸發”

所以，localStorage的例子執行需要如下條件：

同一瀏覽器打開了兩個同源頁面
其中一個網頁修改了localStorage
另一網頁註冊了storage事件

很容易犯的錯誤是，在同一個網頁修改本地儲存，又在同一個網頁監聽，這樣是沒有效果的。

例子

網頁A：監聽了storage事件：

<!DOCTYPE html>
<html>
<head lang="en">
    <title>A</title 
>
</head>
<body>
<script>
    window.addEventListener("storage", function (e) {
        alert(e.newValue);
    });
</script>
</body>
</html>

網頁B：修改了localStorage

<!DOCTYPE html>
<html>
<head lang="en">
    <title> 
B</title>
</head>
<body>
<script>
    localStorage.clear();
    localStorage.setItem('foo', 'bar');
</script>
</body>
</html>

執行：將上面兩個網頁儲存，放到同一個伺服器上，然後，先開啟A.html，再開啟B.html。就會看到A.html會彈出提示框。注意兩個網頁要同源。

擴充套件

如果非得要在同一網頁監聽怎麼辦？可以重寫localStorage

的方法，丟擲自定義事件：

<!DOCTYPE html>
<html>
<head lang="en">
    <title>A</title>
</head>
<body>
<script>
    var orignalSetItem = localStorage.setItem;
    localStorage.setItem = function(key,newValue){
        var setItemEvent = new Event("setItemEvent");
        setItemEvent.newValue = newValue;
        window.dispatchEvent(setItemEvent);
        orignalSetItem.apply(this,arguments);
    }
    window.addEventListener("setItemEvent", function (e) {
        alert(e.newValue);
    });
    localStorage.setItem("nm","1234");
</script>
</body>
</html>

HTML5 storage事件監聽

分析引用《h5移動web開發指南》上的話： “當同源頁面的某個頁面修改了localStorage,其餘的同源頁面只要註冊了storage事件，就會觸發” 所以，localStorage的例子執行需要如下條件：同一瀏覽器打開了兩個同源頁面其中一個網頁修改了local

HTML5 storage事件監聽

引用《h5移動web開發指南》上的話： “當同源頁面的某個頁面修改了localStorage,其餘的同源頁面只要註冊了storage事件，就會觸發” 所以，localStorage storage的例子執行需要如下條件：同一瀏覽器打開了兩個同源頁面其中一個網頁修改了localSt

h5 storage事件監聽

分析引用《h5移動web開發指南》上的話： “當同源頁面的某個頁面修改了localStorage,其餘的同源頁面只要註冊了storage事件，就會觸發”

HTML5 瀏覽器返回按鈕/手機返回按鈕事件監聽

手機鎖定 listitem con 按鈕 spa color cnblogs java 1.HTML5 History對象支持使用pushState()方法修改地址欄地址，而不刷新頁面。 popstate事件當history實體被改變時，popstate事件將會發生

一個不錯的HTML5 Canvas多層點選事件監聽例項

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style

JS 事件綁定、事件監聽、事件委托詳細介紹

兼容性 log 查看 and == 常用提高監聽 live 事件綁定要想讓 JavaScript 對用戶的操作作出響應，首先要對 DOM 元素綁定事件處理函數。所謂事件處理函數，就是處理用戶操作的函數，不同的操作對應不同的名稱。在JavaScript中，有三種常用的

JS中的事件監聽與事件流

pan 交互 ack 其他獲得發生 listen 監聽器 pre 事件監聽：　　使用監聽器（eventListener）來預定事件，在傳統軟件工程中稱成為觀察者模式　　執行某種操作時（特定的交互瞬間），會產生對象，對象會沿事件流的方向傳播。事件流: 　　事件流有

java中的key事件監聽機制

com java.awt imp package 時間 ext javax .get pri package com.at221; import java.awt.event.KeyAdapter; import java.awt.event.KeyEvent; im

Java 中的事件監聽機制

add import userdata 開發人員 util ner dns pre sta 看項目代碼時遇到了好多事件監聽機制相關的代碼。現學習一下： java事件機制包含三個部分：事件、事件監聽器、事件源。 1.事件：繼承自java.util.EventO

Java中的事件監聽機制

void 初始化 release vax 輸入 logs p s get location 鼠標事件監聽機制的三個方面： 1.事件源對象：　　事件源對象就是能夠產生動作的對象。在Java語言中所有的容器組件和元素組件都是事件監聽中的事件源對象。Java中根據事件的動作來區

NavigationView的頭部的事件監聽

navig現在App的UI設計中Drawerlayout+NavigationView是一個比較常用的設計了，而以前我一般只是在Navigation中的menu（即下部的item中）添加事件監聽，而今天碰到一個需要是要在header中增加事件監聽。　　需求如下：點擊圖片，在底部彈出一個彈出窗口。　　　　　側邊

EventFiringWebDriver網頁事件監聽（一）

sna system function tac hcl 通過 events att 腳本執行 Selenium提供了很多的event listening functions來跟蹤腳本執行過程中的events. How it works? 在註冊了listener的webDr

[轉]addEventListener() 方法，事件監聽

傳遞參數調用參數 spa 默認 mouse 可選 als http 轉載白楊-M http://www.cnblogs.com/baiyangyuanzi/p/6627401.html addEventListener() 方法，事件監聽你可以使用 r

時間綁定和事件監聽！

func 控制綁定更新 cti jquery on() function 代碼塊一般在網頁上回有不少節點的數據是根據數據庫進行更新的，這種節點都是由js代碼控制動態生成的，那麽綁定各種事件比如點擊事件的代碼塊會比生成節點的代碼塊先執行，那後生成的節點就不會被綁定上事件

事件綁定、事件監聽和事件委托

沒有 ack cap 總結事件類型 ava 動態 blog 關於在JavaScript的學習中，我們經常會遇到JavaScript的事件機制，例如，事件綁定、事件監聽、事件委托（事件代理）等。一、事件綁定要想讓 JavaScript 對用戶的操作作出響應，首先要對

事件監聽之統計登錄用戶人數（含用戶名）案例

用戶名登錄名 lsp eat 不同 over eve utf-8 put （一）創建一個User類，用於封裝一個用戶信息，該類實現了HttpSessionBindingListener接口中的valueBound()方法和valueUnbound()方法 1 packa

IE與DOM的事件監聽

attach 事件監聽不支持 cnblogs log ima 1-1 mage png IE 事件監聽標準DOM不支持註意幾點： window.onload attachEvent detachEvent 標準DOM監聽,ie不支

JavaScript事件監聽

element ack mat 事件 rem 內部一個 pre 才會 HTML DOM Event 對象參考手冊 addEventListener() 方法：向指定元素添加事件句柄，添加的事件句柄不會覆蓋已存在的事件句柄。 1.語法： element.addEvent

Linux下文件系統事件監聽-inotify

not notify 系統 dot xls ble tbb get bbb kc壁揭藕co悄譚島2a蟹捉鄖http://lhzdlzgjd.wikidot.com/p3缺殘截dn諒允鴕nx遲已瞥http://byzbbydj.wikidot.com/pb胰胤自79評特榷r5

No.5一步步學習vuejs之事件監聽和組件

sage 應該 shift vuejs 進行編譯器 add round mage 一監聽事件可以用 v-on 指令監聽 DOM 事件，並在觸發時運行一些 JavaScript 代碼。 <div id="demo1"> <button v-on:cli

HTML5 storage事件監聽

分析

例子

擴充套件

相關推薦