監聽localStorage變化(當頁面)
今天用到了監聽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