監聽localStorage變化（當頁面）

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

今天用到了監聽localStorage，然後搜尋了一些文章部落格，我最後總結一下，可以直接拿來用

1、網上很多寫到的都是說同域不同頁面下的運用，這個太多了，我就不寫了，簡單，我沒有用到暫時。

2、我剛好優化專案想到本地儲存localStorage，然後同頁面監聽，重寫localStorage的方法，丟擲自定義事件：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>監聽localStorage變化（同頁面）</title>
</head>
<body>
<button class="add">add</button>
<button class="del">del</button>
<script src="http://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
        crossorigin="anonymous"></script>
<script>
    var orignalSetItem = localStorage.setItem;
    localStorage.setItem = function(key,newValue){
        var setItemEvent = new Event("setItemEvent");
        setItemEvent.key = key;
        window.dispatchEvent(setItemEvent);
        orignalSetItem.apply(this,arguments);
    };
    window.addEventListener("setItemEvent", function (e) {
        if(e.key=='demo'){
            alert('key值為demo，新增成功');
        }
    });
    $('.add').click(function () {
        localStorage.setItem("demo","123");
    })



    var orignalremoveItem = localStorage.removeItem;
    localStorage.removeItem = function(key,newValue){
        var removeItemEvent = new Event("removeItemEvent");
        removeItemEvent.key = key;
        window.dispatchEvent(removeItemEvent);
        orignalremoveItem.apply(this,arguments);
    };
    window.addEventListener("removeItemEvent", function (e) {
        if(localStorage.getItem("demo")){
            if(e.key=='demo'){
                alert("key值為demo，刪除成功");
            }
        }else{
            alert("本地資料無key值為demo")
        }
    });
    $(".del").click(function () {
        localStorage.removeItem('demo')
    })
</script>
</body>
</html>

監聽localStorage變化（當頁面）

今天用到了監聽localStorage，然後搜尋了一些文章部落格，我最後總結一下，可以直接拿來用 1、網上很多寫到的都是說同域不同頁面下的運用，這個太多了，我就不寫了，簡單，我沒有用到暫時。 2、我

vue專案如何監聽視窗變化，達到頁面自適應？

【自適應】向來是前端工程師需要解決的一大問題——即便作為當今非常火熱的vue框架，也無法擺脫——雖然elementui、iview等開源UI元件庫層出不窮，但官方庫畢竟不可能滿足全部需求，因此我們可以通過【監聽視窗變化】達到想要的絕大部分自適應效果。獲取視窗寬度：document.body.clientW

LocationListener監聽位置變化，當進入到某一距離內時發出提醒

專案中需要這樣的要求：啟動一個服務一直在背後監聽當前位置變化，如果進入到離某個地點n千米內，發出一個Notification提醒使用者附近有什麼什麼...... 這裡我採用的策略是這樣的：首先監聽網路，如果聯網了就啟動距離監聽服務，否則關閉距離監聽服務。因為網路一旦斷了，

Vue.js（13）- Watch監聽資料變化

watch 監聽的特點：監聽到某個資料的變化後，側重於做某件事情；只要被監聽的資料發生了變化，會自動觸發 watch 中指定的處理函式； app.vue <template> <div> <p>姓名：<input type="t

netlink監聽網路變化程式碼（轉載）+流程分析（原創+轉載）+資料結構以及相關巨集的解析（原創）

一.netlink監聽網路變化程式碼（Linux下使用NetLink 監聽網路變化） #include <stdio.h> #include <unistd.h> #include <stdlib.h> #include <string.h>

jquery監聽div內容（元素）的變化具體實現思路

我們做電子商務，javascript框架採用的是jQuery,在開發過程中遇到了上面標題列出的問題：如何監聽div內容的變化。先給出最終程式碼（後續進行相關分析）： 1 2 3 4 5 var title = $("b

Android 監聽廣播autoLauch 防止啟動頁面被多次啟動（筆記）

直接上程式碼： 1.監聽USB插入的廣播，這個廣播自己插入android收usb是觸發，當然我是監聽自定義廣播。看下面manifest 配置，： <?xml version="1.0" e

Netty事件監聽和處理（上）

事件處理多路復用 linu 自定義事件性能 cdn 處理請求 fancybox 客戶陪產假結束了，今天又開始正常上班了，正好趕上米粉節活動，又要忙上一陣了，米粉節活動時間為4.03 - 4.10，有不少優惠，感興趣的可以關註mi.com或小米商城app。今天

Netty事件監聽和處理（下）

關註 proto cte meta pro sse cti 讀取線程模型上一篇介紹了事件監聽、責任鏈模型、socket接口和IO模型、線程模型等基本概念，以及Netty的整體結構，這篇就來說下Netty三大核心模塊之一：事件監聽和處理。前面提到，Netty是一個N

Springboot-Listener（springboot的事件監聽的4種實現方式）

prope nds ack nis stat fff span 文件中 out springboot事件監聽的4種方式第1種： 1.自定義事件MyApplicationEvent繼承ApplicationEvent import org.springframewor

java監聽設計模式（java觀察者設計模式）

今天給大家分享一下觀察者設計模式（監聽設計模式），該模式在很多主流得框架、原始碼中使用率非常高。在分享之前先給大家講一個我們使用手機的一個場景，我們都用過手機，當我們手機來電話的時候，會有各種複雜的操作，比如會響鈴、手機震動、螢幕會亮屏等等，大家有沒有考慮過這個場景是怎麼實現的呢？其實這個地方就是使

Swift實時監聽網路狀態（更新到Swift3）

最近做個專案，需要實時的監聽網路連線狀態，網路連線斷開時需要提醒使用者手動開啟網路，網路重新連線上之後需要做些操作。身為小白的我感到很有壓力，所以就不自覺的又上度娘那裡去取經了。（哈哈，初學者嘛，大家理解）自己整理下，加深下印象以後也方便用 :) 下面直入正題，如何實現實時監聽網路連線

Android中ScrollView如何監聽滑動距離（總結）

需求：想實現像美團中列表下拉後出現懸浮窗的效果。思路：首先對ScrollView進行滑動監聽，然後在onScrollChanged()方法中獲取到滑動的Y值，接著進行相關操作即可。實現步驟： 1、自定義MyScrollView （1）重寫onScrollChang

oracle修改監聽埠號（1521）

修改oracle監聽埠1，檢視當前監聽狀態[[email protected] ~]$ lsnrctl status LSNRCTL for Linux: Version 11.2.0.1.0 - Production on 05-JUL-2018 14:26:26

Fragment監聽返回鍵（Fragment響應Activity的onKeyDown事件）Kotlin版

在Fragment不僅僅只可以監聽返回鍵哦，所有你見過的按鍵都可以監聽，什麼A~Z，0~9，F1~F12等等我就不舉例子了。至於為什麼寫這篇部落格，因為我的專案是一個Activity+多個Fragment架構的，下面進入正題。。。。直接上程式碼（原創轉載請標明） overrid

關於監聽的總結（監聽配置裡的host部分只能使用主機名嗎，用IP地址或localhost不能正確啟動監聽程式嗎？）

第一部分： lsnrctl工具下的三個命令，分別是status、stop、start。我們從三個命令執行後在螢幕上顯示的結果來看，可以發現一個共性，就是都有“正在連線到”這句話。而且status和start兩個命令在“正在連線到”這句話之後的要顯示的內容（基本）是一

js監聽鍵盤確認（enter）點選事件

$(document).keydown(function (event) { //alert(event.keyCode); //判斷當event.keyCode 為37時（即左方面鍵），執行函式to_left(); //判斷當

詳解android之Animation監聽方法AnimationListener（一）

先寫一個類繼承AnimationListener，看看具體方法：具體方法大家也已經從圖片中也有些瞭解了，那接下來就看看實戰中，又怎麼使用呢： 1. 先看看佈局檔案和效果圖：

Vue-- 監聽路由變化，數據無法更新？

響應被調用數據驅動後來實例無法誤區 .com 來看　　之前寫的Vue項目，有個問題困擾了好久。新聞板塊有推薦、精華、最新等幾個Tab，設想通過切換Tab，改變路由參數（get/news/:tab）去獲取對應數據，然後渲染到頁面（用的是同一套組件），問題來了：當

Angular.js中使用$watch監聽模型變化

數組 r.js imac all 註銷表達式而不是 group equal $watch簡單使用 $watch是一個scope函數，用於監聽模型變化，當你的模型部分發生變化時它會通知你。 $watch(watchExpression, listener, obj

監聽localStorage變化（當頁面）

相關推薦